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 相关文章推荐
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 Javascript
js实现进度条的方法
Feb 13 Javascript
js获取当前日期前七天的方法
Feb 28 Javascript
简单实现js选项卡切换效果
Feb 03 Javascript
分享bootstrap学习笔记心得(组件及其属性)
Jan 11 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 Javascript
vue3修改link标签默认icon无效问题详解
Oct 09 Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 Javascript
浅谈TypeScript 索引签名的理解
Oct 16 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时间戳 strtotime()使用方法和技巧
2013/10/29 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
24个ES6方法解决JS实际开发问题(小结)
2020/05/31 Javascript
python用来获得图片exif信息的库实例分析
2015/03/16 Python
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
查看keras的默认backend实现方式
2020/06/19 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
办公室主任先进事迹
2014/01/18 职场文书
售后客服个人自我评价
2014/09/14 职场文书
个人简历求职信范文
2015/03/20 职场文书
看上去很美观后感
2015/06/10 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
总结几个非常实用的Python库
2021/06/26 Python
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python