好程序员分享js实现简单的板球游

好程序员分享js实现简单的板球游戏，大家好，本次我们来使用js来实现一个简单的板球游戏。截图如下：

首先，设计页面代码，页面代码很简单，因为整个几乎是使用js编写的，页面几乎没有代码，如下：

<!DOCTYPE html>

<html>

<head>

body{

margin: 0px;

}

</style>

</head>

<body>

</body>

</html>

接下来就是主要的js代码common.js，如下：

// 画布的宽高

var canvasWidth;

var canvasHeight;

// 方块的背景图片

var bg;

// 球

var ball;

// 板

var board;

// 背景方块的宽度

var breakWidth;

// 球的坐标和速度

var ballX = 100;

var ballY;

var xVal = 5;

var yVal = -5;

// 板的坐标

var boardX = 0;

var boardY;

// 方块数组

var breakers = [];

// 板的原始长度

var boardWidth = 242;

// 计时变量

var time = 0;

// 记录是否改变状态

var breakerChanged = false;

var col = 10;

window.onload = function(){

// 创建并设置canvas

var canvas = document.createElement("canvas");

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

canvasWidth = canvas.width;

canvasHeight = canvas.height;

breakWidth = (canvasWidth-10) / col;

// 将画布添加到body中

document.body.appendChild(canvas);

var context = canvas.getContext("2d");

// 球的初始Y值

ballY = canvasHeight - 80;

// 板的初始Y值

boardY = canvasHeight - 20;

// 加载所有的图片

loadAllImage();

// 定义键盘响应事件

document.onkeydown = boardMove;

// 开始启动程序

setInterval(run, 20);

function run(){

// 清空画布

context.clearRect(0,0,canvasWidth, canvasHeight);

// 绘制背景、小球、板

context.drawImage(bg, 0, -50, canvasWidth, canvasHeight + 50);

context.drawImage(ball, ballX, ballY);

context.drawImage(board, boardX, boardY, board.width, board.height);

// 如果处于变长的过程中

if(breakerChanged){

// 继续计时

time++;

// 当时间达到5秒钟

if(time >= 250){

// 还原

breakerChanged = false;

time = 0;

board.width = boardWidth;

}

// 绘制方块

updateBreakers();

// 更新小球的位置

updateBall();

// 球与方块的碰撞

ballHitBreakers();

// 球与板的碰撞

ballHitBoard();

}

function boardMove(){

// 向左移动

if(event.keyCode == 37){

boardX -= 30;

if(boardX <= 0){

boardX = 0;

}

// 向右移动

else if(event.keyCode == 39){

boardX += 30;

if(boardX >= canvasWidth - board.width){

boardX = canvasWidth - board.width;

}

// 简单判断球和板的碰撞

function ballHitBoard(){

if(hit(boardX, boardY - 60, board.width, board.height, ballX, ballY)){

yVal = -yVal;

}

// 简单判断球和方块的碰撞

function ballHitBreakers(){

// 从后面开始循环

for (var i = breakers.length - 1; i >= 0; i--) {

var breaker = breakers[i];// 3个属性,item, x, y

// 如果碰撞

if(hit(breaker.x, breaker.y, breakWidth, 30, ballX, ballY)){

// 变长的状态

if(breaker.state == 1){

// 判断是否已经处于变长状态

if(breakerChanged){

// 如果已经变长，应该刷新时间

board.width = boardWidth * 1.5;

time = 0;

}else{

// 如果开始变长，就改变状态

board.width = boardWidth * 1.5;

breakerChanged = true;

}

}else if(breaker.state == 2){

// 判断是否已经处于变长状态

if(breakerChanged){

// 如果已经变长，应该刷新时间

board.width = boardWidth * 0.5;

time = 0;

}else{

// 如果开始变长，就改变状态

board.width = boardWidth * 0.5;

breakerChanged = true;

}

// 方块消失(数组删除一个元素)

breakers.splice(i, 1);

// 球返回

yVal = -yVal;

}

// 简单碰撞函数

function hit(bx, by, bw, bh, x, y){

if(x >= bx && x <= bx + bw && y >= by && y <= by + bh){

return true;

}else{

return false;

}

// 球的运动

function updateBall(){

ballX += xVal;

ballY += yVal;

// 靠近左边的边距

if(ballX <= 0){

xVal = -xVal;

}

// 靠近顶部的边距

if(ballY <= 30){

yVal = -yVal;

}

// 测试代码，让球永远不掉落

// if(ballY >= canvasHeight - 80){

// yVal = -yVal;

// }

// 靠近右边的边距

if(ballX >= canvasWidth - 60){

xVal = -xVal;

}

// 加载所有的方块

function createBreakers(){

// 循环行

for (var i = 0; i < col; i++) {

// 循环列

for (var j = 0; j < col; j++) {

// 得到一个4~9的随机数

var num = Math.floor(Math.random() * 6) + 4;

// 创建一个图片

var item = loadImage("img/ball/" + num + ".png");

var x = breakWidth * j + j * 2;

var y = 30 * i + 30;

// 键值对(key-value)

// {"item":item, "x":x, "y":y}

// 如果是绿色的方块，让板变长

if(num == 9){

breakers.push({"item":item, "x":x, "y":y, "state":1});

}

else if(num == 4){

breakers.push({"item":item, "x":x, "y":y, "state":2});

}

else{

breakers.push({"item":item, "x":x, "y":y, "state":0});

}

// 绘制所有的方块

function updateBreakers(){

for (var i = 0; i < breakers.length; i++) {

context.drawImage(breakers[i].item, breakers[i].x, breakers[i].y, breakWidth, 30);

}

function loadAllImage(){

bg = loadImage("img/ball/bg.png");

ball = loadImage("img/ball/ball.png");

board = loadImage("img/ball/board.png");

// 创建方块

createBreakers();

}

// 加载单张图片

function loadImage(url){

var img = new Image();

img.src = url;

return img;

}

};

转载于:https://www.cnblogs.com/gcghcxy/p/10984621.html

好程序员分享js实现简单的板球游相关推荐

好程序员分享使用JavaScript正则表达式如何去掉双引号
好程序员分享使用JavaScript正则表达式如何去掉双引号最近接了一个项目,项目需求需要用js正则表达式过滤掉页面文本域中值得双引号,其实解决办法很简单,下面把我写的代码分享给大家,有同样需求的朋友 ...
好程序员分享Web前端知识之HTML
今天好程序员分享Web前端知识之HTML.Web前端技术由HTML.CSS和Javascript三大部分构成,而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者 ...
好程序员分享做HTML5页面你要懂得这些
为什么80%的码农都做不了架构师?>>> 好程序员分享做HTML5页面你要懂得这些,很多人问过我这个问题,而问这个问题的人基本上都是刚听说过HTML5,处在懵懂的阶段,他们往往 ...
要嫁就嫁程序员！原因很简单：五成表示工资愿交给另一半！
俗话说得好,嫁人就嫁程序员,钱多话少脾气好.虽然看上去程序员应该不愁婚嫁,但近日也出现了年薪百万程序员遭亲妈一元起"拍卖"相亲的新闻.程序员的恋爱生活到底怎么样?BOSS直聘就程序 ...
java 快速从树节点找到数据_14期每日分享Java程序员分享超全哈希相关的知识
什么是每日分享? 饥人谷每天为大家带来一篇程序员分享!内容都来自于热爱编程.热爱生活的小伙伴们!分享的话题与编程.生活.兴趣.爱好.运动等相关! 想要每天都进步一点点的小伙伴们快点下关注吧! 今天的分 ...
python程序员专用壁纸_神级python程序员分享的让小白30分钟快速上手的一张神图，赶快收藏！...
原标题:神级python程序员分享的让小白30分钟快速上手的一张神图,赶快收藏! 现在很多人学编程都把Python作为入门语言,其实这是个很不错的选择,那么你知道新手如何学Python吗?小编给大家分 ...
一个程序员分享8年的开发经验
[转]一个程序员分享8年的开发经验时间:2011-08-10 10:25 来源: 风尘浪子作者:风尘浪子围观: 635 次在中国有很多人都认为IT行为是吃青春饭的,如果过了30岁就很难有机 ...
猿辅导python助教面试两次都有什么内容_来还愿！终于收到猿辅导offer了，但是23k*14，手…程序员分享...
本文介绍了来还愿!终于收到猿辅导offer了,但是23k*14,手-程序员分享,有助于帮助完成毕业设计以及求职,是一篇很好的资料. 对技术面试,学习经验等有一些体会,在此分享. 来还愿!终于收到猿辅导 ...
96年程序员分享工作三年的点点滴滴
前言 P.S. 这篇博客不聊技术,只谈工作生活(●'◡'●) 时光荏苒,又到了一年毕业季,每年这个时候很多大学生走出校园步入社会开始面试.工作之旅.回想起2018年我从一个二本学校毕业,经历了三年的时 ...
好程序员分享24个canvas基础知识小结
好程序员分享24个canvas基础知识小结,非常全面详尽,推荐给大家. 现把canvas的知识点总结如下,以便随时查阅. 1.填充矩形 fillRect(x,y,width,height); 2.绘制 ...

好程序员分享js实现简单的板球游

好程序员分享js实现简单的板球游相关推荐

最新文章

热门文章