位置: 编程技术 - 正文

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方法)

  • 收到劳务发票还未付款
  • 计提存款利息
  • 公司支付宝收款二维码怎么弄
  • 软件维护费属于费用还是资产
  • 房屋租赁发票票样
  • 原始凭证和记账凭证的作用分别是什么
  • 水利建设基金可以按次申报吗
  • 厨房酒店用品
  • 如何承包消防工程公司
  • 资产申报是什么
  • 短期借款的账务处理实训
  • 小规模能开劳务费吗
  • 挂其他应付款的会计分录
  • 培训机构给学员过生日
  • 其他流动资产的构成
  • 质量不合格起诉状
  • 服务类收入
  • 跨年的发票作废账务如何处理
  • 公司注册的费用记什么科目
  • 支付境外销售佣金怎么做
  • 贷款利息支出必须交税吗
  • 新公司开业的祝福语
  • 用企业资本金购物违法吗
  • 购销合同印花税税率
  • 小规模纳税人补开发票如何申报增值税
  • 潜在表决权如何影响表决权
  • linux常见的文本编辑工具有哪些
  • kcleaner.exe是什么
  • php程序开发范例宝典光盘
  • php中的die
  • php umask
  • 债权类股票有哪些
  • 白金汉宫维多利亚女王雕像寓意
  • laravel框架的优缺点
  • 工程项目成本预算表
  • php如何调用function
  • 单位车辆车船使用税滞纳金如何交
  • yolo 模型训练
  • 数据挖掘 实战
  • 租金收入的所得税率
  • 工业总产值和营业收入关系
  • python怎么求列表里的和
  • 增值税主要内容
  • java第一步
  • sql条件查询语句怎么写
  • 在建工程待摊支出是什么意思
  • 无形资产的成本包括增值税吗
  • 独立法人企业关系怎么写
  • 应收账款在贷方为负数表示什么
  • 为什么购买办公用品
  • 工程咨询服务发展指导意见坚持市场培优的原则
  • 转租单位房子合法吗
  • 怎样理解
  • 坏账准备计提标准
  • 借款利息计入哪个科目
  • 健全的财务会计制度承诺函
  • debian9.6安装教程
  • mysql5.5改密码
  • 当你感觉到你的win2000运行速度明显减慢
  • 如何解开win10电脑密码
  • Linux系统磁盘分配
  • win10 1607更新失败
  • xp系统注册表在哪
  • win7应用程序无法正常启动
  • 刻录ghost安装光盘
  • win8电脑怎么设置定时开机
  • WIN10系统怎么改成泰语
  • kvm 安装
  • windows2008 iis
  • 一键删除通讯录联系人
  • 超级链接是什么意思
  • shell bash sh
  • javascript入门基础
  • python数学语言
  • 网页中实现浏览的快捷键
  • jquery插件库怎么导入
  • jquery.form.js实现文件上传
  • won10安装
  • 青羊名字由来
  • 领的增值税发票怎么读入?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设