javascript HTML5 canvas实现打砖块游戏


Posted in Javascript onJune 18, 2020

本文实例编写的一个小游戏,基于HTML5中的canvas。游戏主要是小球反弹击打小方块。在代码中主要实现了小方块的生成,键盘键事件的监听,小球的移动和碰壁之后的反弹以及怎样消除小方块等方法。代码使用到了一个js脚本库

游戏开发流程:

1、创建画布:

将画布放在div标签里面,这样可以控制画布居中的位置,再对div标签加上一些样式比如border和border-radius,这样一来使其看上去像手机,利于观看。

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

2、创建移动的小木块:

定义一个可以用于移动的小方块,该移动小方块包含如下的属性,坐标位置,小方块的长和宽和小方块每次移动的距离。

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

3、创建用于击打的小球:

定义一个用于移动和击打小方块的小球,该小球包含如下的属性,小球的做坐标位置,半径,在x轴和y轴的速度。其中x轴和y轴的速度是为小球计算移动的方向和移动之后的坐标值。

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

4、生成一系列的小方块:

生成一系列的小方块用于被小球击打,小球的生成主要是根据画布的大小和小方块的坐标与长宽以及各个小方块的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;
}

5、编写移动小方块的移动方法:

移动小方块的实现,首先需要监听获得键盘的事件,之后再根据获得的键盘事件来分别处理来向那个方向移动,在此处我分别定义了四个方向,目的是为了只在左右移动可能不能完全消灭小方块,
在移动的过程之中还要判断移动小方块的位置,以防止是否已经出界。在此处我分别定义了四个方法来处理各个方向的移动。

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

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);
 }
}
//其余方法类似

6、编写小球移动的方法以及碰壁和接触移动小方块反弹的方法:

反弹:小方块的反弹,主要改变其x轴和y轴方向的速度,由于我们定义的是匀速运动,为此我们只需要改变其速度的方向。
移动:根据小球的速度和指定的移动大小来计算出新的小球坐标,之后再绘制新的小球。
反弹图片实例:(对于触碰墙壁反弹类似,就不多说)

小球移动的代码:

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;

7、小球击打小方块,小方块消失的方法:

击打:小球击打小方框,主要判断小球和小方块的坐标位置即可。注意此处将会分别判断y轴和x轴将小球的击打的小方块限定在一个区域里面。
小时:击中当前小方块之后改变其长宽,之后重绘小方块即可,由于当前的小方块的长宽都为0,即绘制之后的小方块没有。
图解击打的坐标变化:

8、判断游失败和成功的方法:

失败:是要小球的掉到最低端即小球的Y坐标大于画布的Y坐标 就是失败;
成功:计数判断是否消灭的小方块数是否和指定的小方块数相同。

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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
CSS常用网站布局实例
Apr 03 Javascript
JavaScript 异步调用框架 (Part 4 - 链式调用)
Aug 04 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
javascript实现tab切换的四种方法
Nov 05 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
Nov 16 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 Javascript
微信小程序实现写入读取缓存详解
Aug 30 Javascript
Webpack3+React16代码分割的实现
Mar 03 Javascript
JavaScript中10个Reduce常用场景技巧
Jun 21 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 #Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 #Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 #Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 #Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 #Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 #Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 #Javascript
You might like
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
JS解密入门之凭直觉解
2008/06/25 Javascript
写给想学习Javascript的朋友一点学习经验小结
2010/11/23 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
VUE DOM加载后执行自定义事件的方法
2018/09/07 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
python实现猜单词小游戏
2020/05/22 Python
python实现周期方波信号频谱图
2018/07/21 Python
详解Python3中ceil()函数用法
2019/02/19 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
Python函数中的可变长参数详解
2019/09/12 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
伦敦时尚生活的缩影:LN-CC
2017/01/24 全球购物
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
学生会副主席竞聘书
2014/03/31 职场文书
社区春季防火方案
2014/06/02 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
医院病假条范文
2015/08/17 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis
MongoDB orm框架的注意事项及简单使用
2021/06/20 MongoDB
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android