HTML5小游戏研究(四):完结:增加多个关卡,手机支持, 记分牌
2016-07-29 17:23
337 查看
关卡
本来按照只有一关的思路设计,整个逻辑都是循环,突然我说要加上多个关卡,猛的不适应,考虑了一下,无耻的去看原著的代码,发现原著是使用了一个数组,来定义地图上障碍物的位置与高度,于是完全拷贝过来为己用。var levelMap=[ [0, 0, 0, 0, 0, 50, 60, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 10, 0, 0, 0, 30, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 5, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
这个数组就很明确了,把地图分为若干个小块,如果数组为0,表示什么也没有,如果有值,代表障碍物的高度。
然后增加一个变量level代表关数,当方块到右侧胜利时,改为关数增加一,然后调用开局函数,在开局函数增加level的判断,如果当前level不为最大值,则绘制当前关数的地图,然后就可以循环进行游戏了。
function start(){ if(jumpProcess!=null) clearInterval(jumpProcess) if(moveProcess!=null) clearInterval(moveProcess) console.log("当前关数",level) if(level<levelMap.length){ createObstacles(level) console.log(level) console.log(levelMap[0]) fallDown() ctx.clearRect(0,0,650,350); } else{ win(); } }
写绘制地图的动画代码
//画出障碍物 function createObstacles(level){ ctxBg.clearRect(0,0,canvas.width,canvas.height); for(i=0;i<levelMap[level].length;i++){ if(levelMap[level][i]!=0){ drawObstacle(i,levelMap[level][i]) } } } function drawObstacle(position,height){ var objHeight=0 var thisProcess=setInterval(function(){ if(objHeight<height){ ctxBg.fillRect(objWidth*position,canvas.height-objHeight,objWidth,objHeight); objHeight+=1 } else{ clearInterval(thisProcess) } },5) }
以上完成以后,游戏就有了多个关卡。
然后我在碰撞这里犯了糊涂,竟然用了一个switch来把每一关的碰撞条件手动计算出来。工程越搞越多,越想越不对劲,突然才想明白应该怎么做。每一次移动时,都去数组遍历看是否当前坐标有障碍物,但不确定这样做是否有效率,测试时至少不卡顿。
function collision(level){ for(i=0;i<levelMap[level].length;i++){ if(levelMap[level][i]!=0){ if(playerX+playerRadius>=i*objWidth && playerX-playerRadius<=i*objWidth+objWidth && playerY<=levelMap[level][i]+playerRadius){ return true; } } } }
至此,关卡逻辑均已完成,只剩下设置关卡的具体参数。
手机支持
没有什么特殊操作,只有点击屏幕一种方式,不停的点就可以完成所有操作。addEventListener('touchstart',touch,false); addEventListener('touchmove',touch,false); addEventListener('touchend',touch,false); function touch (event){ var event = event || window.event; switch(event.type){ case "touchstart": keyDown() //这是控制跳跃、开局、重新开始的函数 break; case "touchmove": event.preventDefault(); keyDown() break; } }
计分板等文字信息
在主CANVAS上半部画出死亡数、关数。方块跳到最高处时也仅处于CANVAS的下半部,所以充分利用空间。在碰撞与过关时绘制信息即可。
总结
简单的加了几关,整体看上去像一个完整的小游戏,可玩性还可以。盯着小bug修复了一下午。后续游戏可以添加微信朋友圈分享、自定义地图等功能。
完整代码可以在我的github下载,或试玩这个demo。
相关文章推荐
- HTML5 canvas双缓存实例
- 第一个H5项目的感想
- HTML5之FileReader的使用
- html5学习小结,float练习。
- html5学习小结,float练习。
- ubuntu系统中import h5py, ImportError: No module named h5py的解决方法
- 01、HTML5新增标签与废除标签
- HTML5 CSS block / inline / inline-block
- html5的视频音频放置方法
- 基于zookeeper-3.4.5-cdh5.7.1的kafka_2.9.2-0.8.1.1的安装
- H5学习5-地理定位
- HTML5 CSS 结构_2
- html5 canvas 绘制曲线图
- H5基于iScroll实现下拉刷新,上拉加载更多
- html5学习小结,float练习。
- HTML5支持或将成手机浏览器市场的分水岭
- HTML5 Canvas渐进填充与透明
- 将HTML5 Canvas的内容保存为图片
- HTML5 组件Canvas实现图像灰度化
- 提高HTML5 Canvas性能的技巧