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 相关文章推荐
禁用页面部分JavaScript方法的具体实现
Jul 31 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
javascript 实现字符串反转的三种方法
Nov 23 Javascript
jQuery插件bxSlider实现响应式焦点图
Apr 12 Javascript
javascript简易画板开发
Apr 12 Javascript
微信JS-SDK选取手机照片上传功能
Apr 21 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
Dec 20 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 Javascript
Vue和Flask通信的实现
May 19 Vue.js
React-vscode使用jsx语法的问题及解决方法
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模板技术原理【一】
2008/01/10 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
javascript中神奇的 Date对象小结
2017/10/12 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
如何实现vue的tree组件
2020/12/03 Vue.js
简单了解python元组tuple相关原理
2019/12/02 Python
django框架ModelForm组件用法详解
2019/12/11 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
python实现的分层随机抽样案例
2020/02/25 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
通俗讲解python 装饰器
2020/09/07 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
IRO美国官网:法国服装品牌
2018/03/06 全球购物
公司周年庆典邀请函
2014/01/12 职场文书
物理教学随笔感言
2014/02/22 职场文书
21岁生日感言
2014/02/27 职场文书
保护环境倡议书范文
2014/05/13 职场文书
清正廉洁演讲稿
2014/05/22 职场文书
学校安全工作汇报材料
2014/08/16 职场文书
销售内勤岗位职责
2015/02/10 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书