JavaScript实现贪吃蛇游戏
更新时间：2021年06月16日 17:06:45 作者：乱舞春秋__
这篇文章主要为大家详细介绍了JavaScript实现贪吃蛇游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下
通过JavaScript，我们可以实现贪吃蛇游戏，具体功能如下：
（1）通过按上下左右键来改变蛇的移动方向
（2）若蛇撞到自己，则游戏结束
（3）蛇移动出地图边缘时，会从地图的另一边进来
（4）长按方向键，蛇加速移动
（5）蛇吃到食物后，重新生成食物
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//地图对象
var Map;
Map = {
width: 990,
height: 600,
backgroundColor: 'rgba(36, 30, 225, 0.25)',
map: null,
createMap: function () {
if (this.map == null) {
this.map = document.createElement("div");
}
},
adornMap: function () {
this.map.style.position = "relative";
this.map.style.width = this.width + "px";
this.map.style.height = this.height + "px";
this.map.style.backgroundColor = this.backgroundColor;
},
initialize: function () {
this.createMap();
this.adornMap();
document.body.appendChild(this.map);
}
};
//蛇对象
var Snake;
Snake = {
snakeWidth: 30,
snakeHeight: 30,
snake: [[3, 1, null, 'red'], [2, 1, null, 'black'], [1, 1, null, 'black']],
maP: null,
direct: "right",
timer: null,
createSnake: function () {
for (var i = 0; i < this.snake.length; i++) {
if (this.snake[i][2] == null) {
this.snake[i][2] = document.createElement("div");
}
this.snake[i][2].style.width = this.snakeWidth + "px";
this.snake[i][2].style.height = this.snakeHeight + "px";
this.snake[i][2].style.backgroundColor = this.snake[i][3];
this.snake[i][2].style.position = "absolute";
this.snake[i][2].style.left = this.snake[i][0] * this.snakeWidth + "px";
this.snake[i][2].style.top = this.snake[i][1] * this.snakeHeight + "px";
this.maP.appendChild(this.snake[i][2]);
}
},
move: function () {
//蛇身移动
for (var i = this.snake.length - 1; i > 0; i--) {
this.snake[i][0] = this.snake[i - 1][0];
this.snake[i][1] = this.snake[i - 1][1];
}
//蛇头移动
switch (this.direct) {
case "left":
this.snake[0][0] -= 1;
break;
case "right":
this.snake[0][0] += 1;
break;
case "up":
this.snake[0][1] -= 1;
break;
case "down":
this.snake[0][1] += 1;
break;
}
//防止蛇移动至地图外
if (this.snake[0][0] > 32) {
this.snake[0][0] = 0;
}
if (this.snake[0][0] < 0) {
this.snake[0][0] = 32;
}
if (this.snake[0][1] < 0) {
this.snake[0][1] = 19;
}
if (this.snake[0][1] > 19) {
this.snake[0][1] = 0;
}
//若蛇撞到自己，则游戏结束
for (var i = 1; i < this.snake.length; i++) {
if (this.snake[0][0] == this.snake[i][0] && this.snake[0][1] == this.snake[i][1]) {
clearInterval(this.timer);
alert("游戏结束！");
return;
}
}
//蛇吃到食物时，重新生成食物位置，蛇身变长一节
if (this.snake[0][0] == Food.left && this.snake[0][1] == Food.top) {
Food.createFood();
this.snake.push(
[
this.snake[this.snake.length - 1][0],
this.snake[this.snake.length - 1][1],
null,
"black"
]
)
}
this.createSnake();
},
initialize: function () {
var that = this;
that.createSnake();
that.timer = setInterval(function () {
that.move();
}, 500)
}
};
//食物对象
var Food;
Food = {
foodWidth: 30,
foodHeight: 30,
backgroundColor: "orange",
left: null,
top: null,
maP: null,
snakE: null,
food: null,
//创建食物
createFood: function () {
this.randomPosition();
if (this.food == null) {
this.food = document.createElement('div');
this.food.style.width = this.foodWidth + "px";
this.food.style.height = this.foodHeight + "px";
this.food.style.backgroundColor = this.backgroundColor;
this.food.style.position = "absolute";
this.maP.appendChild(this.food);
}
this.food.style.left = this.left * this.foodWidth + "px";
this.food.style.top = this.top * this.foodHeight + "px";
},
//随机生成食物位置
randomPosition: function () {
var repeat;
do {
repeat = false;
this.left = Math.floor(Math.random() * 33);
this.top = Math.floor(Math.random() * 20);
for (var i = 0; i < this.snakE.length; i++) {
if (this.left == this.snakE[i][0] && this.top == this.snakE[i][1]) {
repeat = true;
}
}
} while (repeat)
}
};
window.addEventListener('load', function () {
Map.initialize();
Snake.maP = Map.map;
Snake.initialize();
Food.maP = Map.map;
Food.snakE = Snake.snake;
Food.createFood();
//按上下左右键，蛇改变移动方向
window.addEventListener('keyup', function (e) {
var direct = e.keyCode;
switch (direct) {
case 37:
if (Snake.direct == "right") {
return;
}
Snake.direct = "left";
break;
case 38:
if (Snake.direct == "down") {
return;
}
Snake.direct = "up";
break;
case 39:
if (Snake.direct == "left") {
return;
}
Snake.direct = "right";
break;
case 40:
if (Snake.direct == "up") {
return;
}
Snake.direct = "down";
break;
}
})
//长按方向键加速移动
var lastKey = -1;
window.addEventListener('keydown', function (e) {
if (e.keyCode == lastKey) {
switch (e.keyCode) {
case 37:
if (Snake.direct == "right") {
return;
}
Snake.direct = "left";
break;
case 38:
if (Snake.direct == "down") {
return;
}
Snake.direct = "up";
break;
case 39:
if (Snake.direct == "left") {
return;
}
Snake.direct = "right";
break;
case 40:
if (Snake.direct == "up") {
return;
}
Snake.direct = "down";
break;
}
Snake.move();
}
lastKey = e.keyCode;
})
})
</script>
</body>
</html>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文主要讲述的是面向对象的三大特性：封装，继承，多态，内容含括从封装到继承再到多态的所有重点内容以及使用细节和注意事项，内容有点长，请大家耐心看完2022-05-05
SpringBoot+WebSocket+Netty实现消息推送的示例代码
这篇文章主要介绍了SpringBoot+WebSocket+Netty实现消息推送的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要介绍了SpringBoot中的bean管理,本文结合示例代码给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
这篇文章主要介绍了SpringBoot项目依赖和配置,这里主要是搭建项目常用到的maven依赖以及搭建项目会需要用到的一些配置文件，本文通过示例代码给大家详细讲解，需要的朋友可以参考下2022-11-11
在Java中,我们经常需要使用网络请求来与服务器进行通信,在进行网络请求时,有时我们需要在重定向过程中添加请求头信息,本文将介绍如何使用Java在重定向过程中添加请求头,并提供相应的代码示例,2023-10-10
spring的构造函数注入属性@ConstructorBinding用法
这篇文章主要介绍了关于spring的构造函数注入属性@ConstructorBinding用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
这篇文章主要介绍了springboot整合消息队列RabbitMQ,文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
这篇文章通过一个Demo来简要介绍下ThreadLocal和ClassLoader导致内存泄露最终OutOfMemory的场景。下面通过示例代码给大家分享Java内存泄露的相关知识，感兴趣的朋友一起看看吧2017-12-12
Java数据库连接池的几种配置方法(以MySQL数据库为例)
这篇文章主要介绍了Java数据库连接池的几种配置方法(以MySQL数据库为例) 的相关资料,需要的朋友可以参考下2016-07-07
SpringBoot配置文件properties和yml的实现
本文主要介绍了SpringBoot配置文件properties和yml的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
最新评论