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 相关文章推荐
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 Javascript
使用JavaScript库还是自己写代码?
Jan 28 Javascript
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
避免回车键导致的页面无意义刷新的解决方法
Apr 12 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 Javascript
vue实现动态列表点击各行换色的方法
Sep 13 Javascript
Angular PWA使用的Demo示例
Jan 31 Javascript
深入理解JavaScript 箭头函数
May 30 Javascript
Javascript实现简易天数计算器
May 18 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网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
Angular2 之 路由与导航详细介绍
2017/05/26 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
Python 编程速成(推荐)
2019/04/15 Python
python实现简单图书管理系统
2019/11/22 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
Python super()函数使用及多重继承
2020/05/06 Python
什么是python类属性
2020/06/10 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
HTML5进度条特效
2014/12/18 HTML / CSS
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
空乘英文求职信
2014/04/13 职场文书
应急管理培训方案
2014/06/12 职场文书
给老婆的道歉信
2015/01/20 职场文书
学生会招新宣传语
2015/07/13 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python
Python Numpy库的超详细教程
2022/04/06 Python