HTML5 Canvas实现打砖块游戏完整教程

游戏概述与核心功能

本文展示了一个基于HTML5 Canvas技术实现的小游戏实例，核心玩法是通过小球反弹击打小方块。代码主要实现了小方块的生成逻辑、键盘事件的监听机制、小球的移动与碰壁反弹算法，以及小方块被击中后的消除功能。整个项目依赖一个特定的JavaScript脚本库进行开发。

游戏开发的具体流程如下：

画布创建与样式设置

第一步是创建画布。

将HTML5 Canvas元素嵌入到一个div标签中，以便通过CSS控制画布的居中显示。同时，为div标签添加边框（border）和圆角（border-radius）等样式，使其外观类似手机屏幕，从而提升视觉体验。


<div id="main">
 <!--将画布嵌在div块里面,使其可以居中-->
 <canvas id="liuming_canvas" width="300px" height="500px">
 </canvas>
</div>

移动挡板与小球对象定义

第二步是创建可移动的小挡板（文中称为小木块）。

定义一个用于控制的小方块对象，该对象包含以下属性：坐标位置（x, y）、小方块的长和宽，以及每次移动的距离。这些属性决定了挡板在画布上的初始状态和运动行为。


var diamond = {
 x : 100, 
 y : 485,
 width : 100,
 height : 15,
 move : 10
}

第三步是创建用于击打的小球。

定义一个用于移动和击打小方块的小球对象，该对象包含以下属性：小球的坐标位置（x, y）、半径（r），以及在x轴和y轴上的速度分量（vx, vy）。其中，x轴和y轴的速度用于计算小球的移动方向及移动后的新坐标值。


var ball_impact = {
 x : 150,
 y : 465,
 r : 10,
 vx : 200,
 vy : 200
}

小方块网格生成逻辑

第四步是生成一系列小方块（砖块）。

生成一组用于被小球击打的小方块。小方块的生成逻辑基于画布的大小、小方块的坐标以及长宽，同时设定各个小方块在x轴和y轴上的间隔距离，以形成整齐的网格布局。


var diamond_impact = [];//定义存储击打小方块的数组
diamond_impact.length = 0;
var width_span = 25; // 任意两个小方块的横向间隔 
var height_span = 25; //任意两个小方块的水平间隔 
for(var i =1 ; i <=10 ; i++){//控制每行输出的小方块
 for(var j = 1 ; j < 10 ; j++){//输出每列的小方块 只有x轴和y轴的坐标不一样而已
 var diamond_impact_children = {
 x : width_span,
 y : height_span,
 width : 10,
 height : 10
 };
 width_span += 30;
 diamond_impact.push(diamond_impact_children); //将得到的小方块放在 diamond_impact 中，已被以后使用
 }
 height_span += 25;
 width_span = 25;
}

挡板移动与键盘事件处理

第五步是编写移动小方块的移动方法。

实现小方块的移动功能，首先需要监听键盘事件。根据获取到的键盘按键事件，分别处理小方块向四个方向的移动。定义四个方向（左、右、上、下）是为了确保小方块在水平移动时能够更有效地消除小方块。在移动过程中，还需判断小方块的位置，防止其移出画布边界。为此，分别定义了四个方法来处理各个方向的移动逻辑。


//键盘事件，获取当前在那个方向运动

var direction = "";
document.onkeydown = function (e) {
 if (e.keyCode == 37 ) direction = "left" ;
 if (e.keyCode == 39 ) direction = "right";
 if (e.keyCode == 38 ) direction = "up";
 if (e.keyCode == 40 ) direction = "down";
}
 
//定义四个方法来重绘制方块的位置 分别有 左、右、上、下

function move_right_diamond(){
 clear_diamond();//清除以前的方块
 init_canvas_background();//再次初始化画布 下同
 //重新绘制小方块的位置
 if(diamond.x + diamond.width >= canvas.width){ //判断方块是否已经到达最右端
 cxt.fillStyle = "#17F705";
 cxt.fillRect(diamond.x,diamond.y,diamond.width,diamond.height);
 }else{
 diamond.x += diamond.move;
 cxt.fillStyle = "#17F705";
 cxt.fillRect(diamond.x,diamond.y,diamond.width,diamond.height);
 }
}
//其余方法类似

小球移动与碰撞反弹机制

第六步是编写小球移动的方法，以及处理碰壁和接触移动小方块后的反弹逻辑。

关于反弹：当小球碰到边界或挡板时，主要改变其x轴和y轴方向的速度。由于设定为匀速运动，只需反转速度方向即可实现反弹效果。关于移动：根据小球的速度和指定的时间间隔（cyc）来计算新的小球坐标，随后绘制新位置的小球。碰壁反弹的逻辑与触碰挡板类似，此处不再赘述。

以下是小球移动相关代码的示例：


cxt.arc(ball_impact.x,ball_impact.y,ball_impact.r,0,Math.PI * 2,true);
cxt.closePath();
cxt.fill();
ball_impact.x += ball_impact.vx * cyc /1000;//改变其坐标的位置
ball_impact.y += ball_impact.vy * cyc /1000;

击打判定与小方块消除

第七步是实现小球击打小方块后小方块消失的逻辑。

关于击打：判断小球是否击中某个小方块，主要通过比较两者的坐标位置。需要注意的是，这里需要分别判断y轴和x轴，将小球的击打范围限定在特定的区域内。关于消失：当击中当前小方块后，通过改变其长宽（通常设为0）来实现消失效果，随后重绘小方块。由于长宽为0，绘制后的小方块将不可见。

以下是图解击打过程中坐标变化的说明：

游戏胜负条件判定

第八步是判断游戏失败和成功的条件。


if(ball_impact.y + ball_impact.r >= canvas.height){
 cxt.fillStyle = "#FC0000";
 cxt.font = "bold 50px 微软雅黑";
 cxt.fillText("FAILURE！",30,250);
 diamond.move = 0;//不能移动板块
}

//判断是否与所有的小方块数相等
if(count_sum == 90){
 cxt.fillStyle = "#FCF205";
 cxt.font = "bold 50px 微软雅黑";
 cxt.fillText("SUCCESS！",20,250);//在画布上书写SUCCESS 
 diamond.move = 0;//不能移动板块
 ball_impact.vx =0;
 ball_impact.vy =0;
else{
 count_sum = 0;
}

关于失败：当小球掉到画布最低端，即小球的Y坐标大于画布的高度（canvas.height）时，判定为游戏失败。关于成功：通过计数判断被消灭的小方块数量是否与预设的小方块总数相同，若相同则判定为游戏成功。以上就是本文的全部内容，希望对大家的学习有所帮助。

基于HTML5 Canvas的打砖块游戏开发详解