位置: 编程技术 - 正文

javascript HTML5 canvas实现打砖块游戏

编辑:rootadmin

推荐整理分享javascript HTML5 canvas实现打砖块游戏,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

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

游戏开发流程:

1、创建画布:

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

2、创建移动的小木块:

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

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

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

javascript HTML5 canvas实现打砖块游戏

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

生成一系列的小方块用于被小球击打,小球的生成主要是根据画布的大小和小方块的坐标与长宽以及各个小方块的x轴和y轴的间隔。

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

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

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

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

小球移动的代码:

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

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

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

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

标签: javascript HTML5 canvas实现打砖块游戏

本文链接地址:https://www.jiuchutong.com/biancheng/373391.html 转载请保留说明!

上一篇:JS简单编号生成器实现方法(附demo源码下载)(js自动生成序号)

下一篇:JS中的forEach、$.each、map方法推荐(js中的filter方法)

  • 递延所得税资产和负债怎么理解
  • 小企业会计准则适用于哪些企业
  • 递延所得税资产和负债怎么计算
  • 其他个人出租房屋按照多少征收应纳税额
  • 支付职工的培训费计入什么科目
  • 街道办事处发票抬头写什么
  • 交通补贴算工资收入吗
  • 总公司汇总缴纳所得税升为一般纳税人分公司受影响吗
  • 金税盘开具发票 在增值税申报表哪填写
  • 红字发票信息表填好后再怎么操作
  • 营改增之前
  • 提取的生产企业安全费如何记帐
  • 行政单位在建工程入账
  • 非独立核算的分公司如何报税
  • 应缴纳的所得税税额
  • 软件企业增值税退税的账务处理
  • 新公司营业执照经营范围越多越好吗
  • 当月税负率怎么算
  • 旅行社成本票没有收到,怎么挂账
  • 劳务外包公司代发工资能正常发吗
  • 已付款未收到发票
  • 第二年缴纳税控盘服务费入什么科目?
  • 同期比较百分比如何计算
  • 询证函是什么文书
  • 营运资金管理策略有哪些
  • 为什么电脑连上蓝牙耳机却是外放
  • 酒店采购布草如何入账
  • 银行存款收款凭证属于什么凭证
  • php 编程
  • 企业财务管理内部控制问题与应对策略
  • 保险赔款的会计分录
  • 税前扣除的比例
  • 资产减值损失属于损益类的收入还是费用
  • 购买仓库计入什么科目
  • php命令大全
  • php rtrim
  • 工商年报资产状况纳税总额怎么填
  • 劳务公司的账务怎么做
  • chrome网上应用商店在哪
  • 公司费用计入什么科目
  • 回扣没拿到也算违法吗
  • 无法收到的租金要交房产税吗
  • 定额的个体户怎么交税
  • 美金账户余额截图
  • 企业内部研发支持方案
  • sql的应用
  • 从事特殊行业
  • 以前年度损益调整会计分录
  • 应收账款应付账款借贷方都表示什么
  • 公司名下的车怎样领免检标志
  • 支出可以缴纳所得税吗
  • 交了社保里面的钱去哪里了
  • 增值税普通发票查询真伪
  • 怎么做好流水账
  • 公司股权作价转让会计分录案例
  • 公司给员工转公司
  • 转账时转错账号怎么办
  • 小规模纳税人残保金减免政策
  • 外贸企业有内销和外销是否分开做账
  • 登记总分类账的依据有
  • 建账前的准备工作
  • windows命令提示符重启
  • ubuntu唤醒快捷键
  • linux操作系统安装包
  • linux apache2配置
  • win xp 内存
  • easyui 日期格式化
  • cocos2dx HelloWorld代码分析
  • js动态改变div内容
  • 微信小程序开发用什么语言
  • Node.js中的什么模块是用于处理文件和目录的
  • Node.js 中exports 和 module.exports 的区别
  • android 按键
  • JavaScript+html5 canvas制作色彩斑斓的正方形效果
  • api/home/getmyregion
  • python simple
  • 为什么电子发票没有监制章
  • 黔西南州医疗保险报销比例
  • 小规模纳税人30万免税政策
  • 税收政策对中小微企业的影响数据公式
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设