大家好，本次我们来使用js来实现一个简单的板球游戏。截图如下：
首先，设计页面代码，页面代码很简单，因为整个几乎是使用js编写的，页面几乎没有代码，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{
margin: 0px;
}
</style>
<script src="//img.17u1u.com/js/common.js" type="text/javascript" charset="utf-8"></script>
</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;
}
};
大家可以试试，想要了解更多，可以关注“重庆千锋”公众号，获取更多的额视频学习资料，大家也可以申请千锋重庆两周免费试听课程。
