💒 es6 + canvas 开源 盖楼小游戏 完整代码注释 从零教你做游戏(一)

盖楼游戏

一个基于 Canvas 的盖楼游戏

Demo 预览

在线预览地址 (Demo Link)

手机设备可以扫描下方二维码

github

https://github.com/bmqb/tower_game 喜欢的朋友 给个star 支持一下哦

Game Rule 游戏规则

以下为默认游戏规则,也可参照下节自定义游戏参数

  • 每局游戏生命值为3,掉落一块楼层生命值减1,掉落3块后游戏结束,单局游戏无时间限制
  • 成功盖楼加25分,完美盖楼加50分,连续完美盖楼额外加25分,楼层掉落扣除生命值1,单局游戏共有3次掉落机会

栗子:第一块完美盖楼加50分,第二块连续完美盖楼加75分,第三块连续完美盖楼加100分,依此类推……

Customise 自定义

git clone https://github.com/bmqb/tower_game.git
cd tower_game
npm install
npm start

打开 http://localhost:8082

  • 图片、音频资源可以直接替换 assets 目录下对应的资源文件
  • 游戏规则可以修改 index.html 文件 L480option 对象

Option 自定义选项

可以使用以下 option 表格里的参数,完成游戏自定义,所有参数都是非必填项

Option Type Description
width number 游戏主画面宽度
height number 游戏主画面高度
canvasId string Canvas 的 DOM ID
soundOn boolean 是否开启声音
successScore number 成功盖楼分数
perfectScore number 完美盖楼额外奖励分数
hookSpeed function 钩子平移速度
hookAngle function 钩子摆动角度
landBlockSpeed function 下方楼房横向速度
setGameScore function 当前游戏分数hook
setGameSuccess function 当前游戏成功次数hook
setGameFailed function 当前游戏失败次数hook

hookSpeed

钩子平移速度

函数接收两个参数,当前成功楼层和当前分数,返回速度数值

function(currentFloor, currentScore) {
  return number
}

hookAngle

钩子摆动角度

函数接收两个参数,当前成功楼层和当前分数,返回角度数值

function(currentFloor, currentScore) {
  return number
}

landBlockSpeed

下方楼房平移速度

函数接收两个参数,当前成功楼层和当前分数,返回速度数值

function(currentFloor, currentScore) {
  return number
}

setGameScore

当前游戏分数hook

函数接收一个参数,当前游戏分数

function(score) {
  // your logic
}

setGameSuccess

当前游戏成功次数hook

函数接收一个参数,当前游戏成功次数

function(successCount) {
  // your logic
}

setGameFailed

当前游戏失败次数hook

函数接收一个参数,当前游戏失败次数

function(failedCount) {
  // your logic
}

License

MIT license.

原文地址:https://www.cnblogs.com/iamkun/p/8616104.html

时间: 2024-10-08 12:22:42

💒 es6 + canvas 开源 盖楼小游戏 完整代码注释 从零教你做游戏(一)的相关文章

完美反编译任何小程序完整代码,扒小程序

废话不多说,直接上主题. 1.第一步下载一个模拟器(推荐使用自带root的模拟器),我使用的是夜神模拟器 下载地址:https://www.yeshen.com/ 2.下载好之后,下载一个RE管理器 3.下载一个zip的压缩软件用来压缩文件 4.在模拟器上装上微信,使用微信访问你需要扒下来的小程序 5.然后打开第二步安装的RE管理器,进入    /data/data/com.tencent.mm/MicroMsg/{数字串}/appbrand/pkg/这个目录,可以看见wxapkg为后缀的文件,

Petroglyph专访:中间件做游戏

Xsolla有幸与Petroglyph的总裁及创始人Michael Legg进行了对话.这是及时战略游戏中对主要一家公司.由前Westwood的员工 创办,还设计了一块新的RTS游戏-Grey Goo,会将传统的命令与征服的游戏情景提升到一个全新的阶段. Michael讲解了一些游戏发展过程,并介绍了中间件做游戏的优势. 给我们介绍一个你的工作室吧 Petroglyph 专注于即时战略游戏.我们的出生召唤我们回归到命令与征服的光荣使命中.现在,我们正在制作新的RTS游戏-Grey Goo.在与对

Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏

Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏 转载 来源:jrainlau 链接:https://segmentfault.com/a/1190000005804860 项目地址:https://github.com/jrainlau/draw-something 下载 & 运行 git clone [email protected]:jrainlau/draw-something.git cd draw-something && npm install

第八讲:HTML5中canvas实现小球击打小方块游戏

源代码:http://download.csdn.net/detail/liumingm900913/7469969 游戏开发流程: 1.创建画布: 将画布放在div标签里面,这样可以控制画布居中的位置,在对div标签加上一些样式,利于观看 <div id="main"> <!--将画布嵌在div块里面,使其可以居中--> <canvas id="liuming_canvas" width="300px" heigh

别再让我帮你盖楼了行不?给个脚本自动盖楼领喵币

这几天,双十一的活动有没有把你折腾的不轻呢?如果没有,只有两种可能:一,你没女朋友:二,你没有女性朋友,不然你一定会收到如下消息 要知道阿里每年都会发放大量红包.各种优惠券和各种互助游戏......而这两天,马爸爸的“ATM”们可都沉迷于这些个互助游戏里不可自拔,吾日三省吾身:签到了?做任务了么?升级了么?: 一般我们程序员对这种游戏都是没什么太大兴趣,毕竟每天都有找不完的Bug,加不完的班,但是假如在这时候你的女神向你求帮助的时候,就你那个等级你拿的出手么? 所以,程序员怎么能错过这么一个在女

微信公众号H5游戏平台完整源码下载(几十款游戏和应用)

点击打开链接微信公众号H5游戏平台完整源码下载(几十款游戏和应用)完整打包下载,价值超高. 微信Html5游戏平台源码,包括40款h5小游戏和21款有趣的测试,大家可以直接打开浏览器本地测试. 下面展示部分效果图 11.png (149.71 KB, 下载次数: 0) 下载附件 H5游戏平台完整源码下载 3 分钟前 上传 22.png (45.41 KB, 下载次数: 0) 下载附件 H5游戏平台完整源码下载 3 分钟前 上传 33.png (115.83 KB, 下载次数: 0) 下载附件 H

2048游戏完整源代码揭秘和下载 (一)

2048 最近有一款2048的游戏非常火,本文将来介绍一下使用OGEngine游戏引擎开发游戏2048. OGEngine引擎是开源的,我们很容易找到,搭建起来也很方便,我们只需在Android工程下添加OGEngine的jar包或者直接引用源码就可以了. OGEngine引擎官网 2048游戏源码下载1.创建游戏的主Activity 类 创建的游戏主Activity入口类继承于GameActivity类,需要重写相关方法. (1) 重写onCreatePixelPerfectEngineOpt

贴吧/盖楼的技术实现(PHP)

2015年3月5日 14:36:44 目标, 实现类似百度贴吧的基本功能 实现: 1. 存储, 将数据库(MYSQL)当作一个大的结构体数组, 每一条记录用作为一个结构体, 记录父帖信息, 子帖信息, 兄弟帖信息 2. 显示, 因为回复帖在浏览器中显示的时候也是独占一行, 只是比楼主的帖子多了些缩进而已, 因此我将所有的回帖(子回帖, 孙子回帖....脑补网易盖楼)都看做是有着不同缩进的普通帖子 3. 技术上, 将某一贴的所有回帖, 子回帖, 孙子回帖....一次性独到内存中(缺点,可用缓存解决

根据之前的博文,我把给同学做的三子棋小游戏的代码发出来,只是界面很丑很丑,AI算法很笨很笨,过几天我传到网盘上,提供大家下载娱乐

1 background_image_filename = 'blackground.png' 2 black_mouse_image_filename = 'black.png' 3 white_mouse_image_filename = 'white.png' 4 restart_icon_filename='restart.png' 5 pingju_icon_filename='pingju.jpg' 6 win_icon_filename='win.jpg' 7 lose_icon_