JavaScript實(shí)現(xiàn)貪吃蛇游戲
更新時間：2021年06月16日 17:06:45 作者：亂舞春秋__
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)貪吃蛇游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)貪吃蛇游戲的具體代碼，供大家參考，具體內(nèi)容如下
通過JavaScript，我們可以實(shí)現(xiàn)貪吃蛇游戲，具體功能如下：
（1）通過按上下左右鍵來改變蛇的移動方向
（2）若蛇撞到自己，則游戲結(jié)束
（3）蛇移動出地圖邊緣時，會從地圖的另一邊進(jìn)來
（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;
}
//若蛇撞到自己，則游戲結(jié)束
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("游戲結(jié)束！");
return;
}
}
//蛇吃到食物時，重新生成食物位置，蛇身變長一節(jié)
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,
//創(chuàng)建食物
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";
},
//隨機(jī)生成食物位置
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>
效果圖：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
SpringBoot3.x中自定義開發(fā)通用SDK的實(shí)現(xiàn)
本文介紹了SpringBoot和Maven創(chuàng)建自定義的SDK,包括創(chuàng)建項(xiàng)目、修改配置、編寫配置類、設(shè)置配置文件、構(gòu)建Jar包等,具有一定的參考價值,感興趣的可以了解一下2024-12-12
Swagger2匹配多個controller代碼實(shí)例
這篇文章主要介紹了Swagger2匹配多個controller代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09
在Java開發(fā)中，設(shè)計(jì)模式是一種十分常見的編程思想，它可以幫助我們解決很多實(shí)際開發(fā)中的問題，本篇文章將介紹一種常見的設(shè)計(jì)模式——外觀模式，并結(jié)合實(shí)際的開發(fā)場景進(jìn)行講解,需要的朋友可以參考下2023-06-06
Spring是一個廣泛應(yīng)用的框架，SpringAOP則是Spring提供的一個標(biāo)準(zhǔn)易用的aop框架，依托Spring的IOC容器，提供了極強(qiáng)的AOP擴(kuò)展增強(qiáng)能力，對項(xiàng)目開發(fā)提供了極大地便利2022-11-11
Java中的==和equals()區(qū)別小結(jié)
在Java編程中，理解==操作符和equals()方法的區(qū)別是至關(guān)重要的，本文主要介紹了Java中的==和equals()區(qū)別，具有一定的參考價值，感興趣的可以了解一下2023-08-08
Java深入淺出掌握SpringBoot之MVC自動配置原理篇
在進(jìn)行項(xiàng)目編寫前，我們還需要知道一個東西，就是SpringBoot對我們的SpringMVC還做了哪些配置，包括如何擴(kuò)展，如何定制，只有把這些都搞清楚了，我們在之后使用才會更加得心應(yīng)手2021-10-10
SpringBoot增強(qiáng)Controller方法@ControllerAdvice注解的使用詳解
這篇文章主要介紹了SpringBoot增強(qiáng)Controller方法@ControllerAdvice注解的使用詳解,@ControllerAdvice,是Spring3.2提供的新注解,它是一個Controller增強(qiáng)器,可對controller進(jìn)行增強(qiáng)處理,需要的朋友可以參考下2023-10-10
這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅的處理Spring Boot異常信息的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Spring Boot具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
在開發(fā)過程中很多時候會遇到判空校驗(yàn)，如果不做判空校驗(yàn)則會產(chǎn)生NullPointerException異常，本文就來介紹一下Java8 判空新寫法，感興趣的可以了解一下2021-09-09
JAVA實(shí)現(xiàn)利用第三方平臺發(fā)送短信驗(yàn)證碼
本文以注冊為例，在SpringMVC+Spring+Mybatis框架的基礎(chǔ)上完成該短信驗(yàn)證碼功能。需要的朋友一起來看下吧2016-12-12