我们一起写个Web贪吃蛇小游戏吧(二) | 新手向 ⛵
【摘要】 昨日成果 小改进发现速度太慢,所以将速度调整为750毫秒修改的代码如下:gameInterval = setInterval(gameRoutine, 750)为了怕蛇的身体粘在一起,我们让蛇的身体不占满一格。context.fillStyle = 'lime' for(var i=0;i<snack.body.length;i++){ context.fillRect...
昨日成果
小改进
发现速度太慢,所以将速度调整为750毫秒
修改的代码如下:
gameInterval = setInterval(gameRoutine, 750)
为了怕蛇的身体粘在一起,我们让蛇的身体不占满一格。
context.fillStyle = 'lime'
for(var i=0;i<snack.body.length;i++){
context.fillRect(
snack.body[i].x * BLOCK_SIZE + 3,
snack.body[i].y * BLOCK_SIZE + 3,
BLOCK_SIZE - 3,
BLOCK_SIZE - 3
)
}
写控制蛇的部分
接下来是写控制蛇的方向:
//在页面加载完成后 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属性来获取玩家动作。
本游戏设置了两种模式:双方向模式、四方向模式。
其中双方向模式的编写逻辑可能不太好理解,但是可以通过观察来找到规律:
按左键后的方向 | 原来的方向 | 按右键后的方向 |
---|---|---|
上{x:0,y:-1} | 右{x:1,y:0} | 下{x:0,y:1} |
下{x:0,y:1} | 左{x:-1,y:0} | 上{x:0,y:-1} |
右{x:1,y:0} | 下{x:0,y:1} | 左{x:-1,y:0} |
左{x:-1,y:0} | 上{x:0,y:-1} | 右{x:1,y:0} |
实现游戏结束逻辑
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<snake.body.length;i++){
if(snake.body[0].x === snake.body[i].x &&
snake.body[0].y === snake.body[i].y){
return true
}
}
//都没撞,没死...
return false
}
很简单的思路,当蛇的头超过了画布就相当于撞墙,撞身体就是头的坐标等于身体的坐标。这样蛇就die了。
function gameover() {
//停止更新画布
clearInterval(gameInterval)
}
蛇死后,我们就停止画布更新。
今天到此为止吧,明天写蛇吃苹果啦…
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)