我们一起写个Web贪吃蛇小游戏吧（二） | 新手向 ⛵

昨日成果

小改进

发现速度太慢，所以将速度调整为750毫秒

修改的代码如下：

gameInterval = setInterval(gameRoutine, 750)

为了怕蛇的身体粘在一起，我们让蛇的身体不占满一格。

context.fillStyle = 'lime' for(var i=0;i

写控制蛇的部分

接下来是写控制蛇的方向：

//在页面加载完成后 onPageLoaded 方法会被调用。 window.onload = onPageLoaded function onPageLoaded() { //建立事件- document.addEventListener('keydown', handleKeyDown) } function handleKeyDown(event) { if(mode === '1'){ var originX = snake.direction.x var originY = snake.direction.y if(event.keyCode === 37){//左方向键 snake.direction.x = originY snake.direction.y = -originX } else if(event.keyCode === 39){//右方向键 snake.direction.x = -originY snake.direction.y = originX } }else if(mode === '2'){ // keycode: ←37 ↑38 →39 ↓40 if(event.keyCode === 37){ snake.direction.x = -1 snake.direction.y = 0 }else if(event.keyCode === 38){ snake.direction.x = 0 snake.direction.y = -1 }else if(event.keyCode === 39){ snake.direction.x = 1 snake.direction.y = 0 }else if(event.keyCode === 40){ snake.direction.x = 0 snake.direction.y = 1 } } }

什么是Event 对象

Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

本函数调用了DOM的event对象，通过event的keyCode属性来获取玩家动作。

本游戏设置了两种模式：双方向模式、四方向模式。

其中双方向模式的编写逻辑可能不太好理解，但是可以通过观察来找到规律：

实现游戏结束逻辑

function snakeIsDead(){ //碰墙 if(snake.body[0].x < 0){ return true }else if(snake.body[0].x > BLOCK_COUNT){ return true }else if(snake.body[0].y < 0){ return true }else if(snake.body[0].y >= BLOCK_COUNT){ return true } //撞身体 for(var i=1;i

很简单的思路，当蛇的头超过了画布就相当于撞墙，撞身体就是头的坐标等于身体的坐标。这样蛇就die了。

function gameover() { //停止更新画布 clearInterval(gameInterval) }

蛇死后，我们就停止画布更新。

今天到此为止吧，明天写蛇吃苹果啦…

5G游戏 web前端

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。