/h5-game-blockBreaker

使用es6语法及原生javascript实现的h5小游戏-打砖块

Primary LanguageJavaScriptMIT LicenseMIT

h5小游戏—打砖块

本项目是利用原生js实现的h5小游戏,在实现时使用了大量es6语法,对于es6语法不太熟悉的小伙伴可以先查阅相关资料了解一下

demo线上地址

项目截图

已完成功能:

  • 设计多个关卡
  • 显示计分板
  • 特殊砖块血量更多
  • 小球撞击挡板多角度反弹
  • 小球与砖块撞击不同部位,反弹角度不同
  • 图片素材更新
  • 砖块不同血量下图片自动切换

待优化功能:

  • 小球与挡板和砖块之间的碰撞模型不够精确

下载源码

git clone https://github.com/yangyunhe369/h5-game-blockBreaker.git

目录结构

.
├─ index.html                   // 首页html
│  
├─ css                          // css样式资源文件
├─ images                       // 图片资源文件  
└─ js
   ├─ common.js                 // 公共方法
   ├─ scene.js                  // 游戏场景相关类
   ├─ game.js                   // 游戏主要运行逻辑
   └─ main.js                   // 游戏运行主函数
  • common.js => 引入公共方法
  • scene.js => 引入游戏场景素材相关类,包括砖块、小球、挡板、生成的砖块对象集合、计分板
  • game.js => 引入游戏引擎
  • main.js => 游戏运行主函数

项目更新

2018.1.11 — v1.1:优化代码,替换游戏图片资源文件。

2018.6.19 — v1.2: 优化代码,修复游戏不能通关bug。

说明

如果对您有帮助,您可以点右上角 "Star" 支持一下 谢谢! ^_^

或者您可以 "follow" 一下,我会不断开源更多的有趣的项目

个人简介

作者:弦云孤赫(David Yang)

职业:web前端开发工程师

爱好:网游、音乐(吉他)

联系方式

QQ:314786482

微信:yangyunhe_yyh

坐标:四川成都

License

MIT