Javascript浅尝:《贪吃蛇》续1——网页上的键盘事件

上一篇文章,我挂出了一个我用JS写的贪吃蛇,感觉怎么样呢?

因为最近在学习JS,就想找个项目来练习练习,之前用Java写过贪吃蛇,实现方法是现成的,所以就想到再用JS来写一个。

写代码之前,第一个考虑的就是按键的实现问题,这里有2点:

  1. 按方向键和空格键可以进行转向和暂停操作。
  2. 一般情况下,按方向键和空格键的时候页面会滚动,会影响玩游戏,所以游戏中,按键时滚动条必须锁定,而结束游戏后需要解锁。

那么就先来说说第一点,比较容易,给document添加onkeydown事件,通过event.keyCode来判断是哪些按键被按下,然后执行相应的操作。

方向键左,上,右,下分别对应的是37,38,39,40,空格键对应的是32。那么代码如下:

// 添加键盘事件
document.onkeydown = function(event) {
	// 按空格键
	if (event.keyCode == 32) {
		// 执行空格键
	}
	// 方向键
	else if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) {
		// 执行方向键
	}
}

第一点就搞定了,然后就是第二点,游戏中对滚动条进行锁定,方法也很简单,只要事件操作中返回false就可以锁定滚动条了。以空格键为例,代码如下:

document.onkeydown = function(event) {
	// 按空格键
	if (event.keyCode == 32) {
		// 执行空格键
		return false; // 锁定滚动条
	}
	// 方向键
	// ...
}

锁定就搞定了,那么退出游戏后需要解锁滚动条又怎么做呢?这里就可以设置一个布尔变量,如scrollMove,当游戏启动时,scrollMove=false,当游戏结束时,scrollMove=true,相应的return false改为return scrollMove就解决了!

那么,这篇文章就到这里吧,下次再继续讲其他的关键点的实现。

本文《Javascript浅尝:《贪吃蛇》续1——网页上的键盘事件》来自 www.juwends.com ,欢迎转载或CV操作,但请注明出处,谢谢!