【源码】html5塔楼游戏,来啊,盖楼啊,带教程!

塔楼游戏让您感到快乐。是的,这是真的,因为游戏的设计方式是我们想要一次又一次地玩它。它类似于屡获殊荣的Tower Bloxx Deluxe游戏,您的任务是将棋盘放在彼此的顶部并朝向天空。它的结构是使用HTML5语言的新canvas元素创建的,而逻辑是用ES6编写的(对JavaScript语言的一个杰出更新)。

基于ES6和Canvas的塔式建筑游戏(Tower Bloxx Deluxe Skyscraper)

演示

游戏规则

以下是默认游戏规则:

在每个游戏玩家以3马力开始。每次塔块被丢弃时,玩家将扣除1马力; 当hp耗尽时游戏结束。

玩家每增加一个成功的积木奖励25分(成功)。如果一个块在前一个块上面完美地堆叠(完美),那么玩家将获得50点奖励。连续完美奖励额外25分。

注意:每个成功或完美构成一个底线

例如,第一个完美奖励50分。连续第二次完美奖励75分。连续第三个完美奖励100分。等等

自定义游戏规则

git clone http://www.zzfriend.com/article-571-1.html cd tower_game npm install npm start

http://localhost:8082在Web浏览器中打开。

要自定义图像和声音资源文件,请直接替换assets目录下的相应文件。

要自定义游戏规则,请修改option对象index.html。

选项

使用下面的option常量表来完成游戏规则的自定义。

hookSpeed

钩子移动速度该功能有两个参数:currentFloor和currentScore,并返回一个速度值。

function(currentFloor, currentScore) { return number }

hookAngle

钩子角度此功能接受两个参数currentFloor和currentScore,并返回一个角度值。

function(currentFloor, currentScore) { return number }

landBlockSpeed

块摇摆速度此功能包含两个参数currentFloor和currentScore,并返回速度值。

function(currentFloor, currentScore) { return number }

setGameScore

当前分数的钩子此功能接受一个参数,得分,并设置currentScore得分。

function(score) { // your logic }

setGameSuccess

挂钩当前成功游戏的数量此功能接受一个参数,得分,并将GameSuccess设置为successCount。

function(successCount) { // your logic }

setGameFailed

当前失败游戏数量的钩子此函数接受一个参数,得分,并将GameFailed设置为failedCount。

function(failedCount) { // your logic }

执照

MIT许可证。

源码演示/下载,请点击阅读原文

↓↓↓↓↓↓

原文发布于微信公众号 - 蚂蚁开源社区(mayi_zzfriend)

原文发表时间:2018-07-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券