Native JS realizes snake game
Snake Game (Native JavaScript)
Analysis of the thinking of the snake game
Game ideas:
Object-oriented thinking
- Three js files represent three objects respectively
- The three objects are independent of each other and control the overall situation in HTML
Benefits of using object-oriented thinking
The snake game adopts object-oriented thinking to achieve. Our food, snakes and maps are independent of each other and will not affect each other. They can be called separately
Analysis of Snake Game Objects
Game scene (a big div)
-
The size of the scene
-
Border of the scene
-
The location of the scene in the browser
The protagonist of the game (each section is a small div)
Properties of snake
-
The initial length of the snake (four knots)
-
The shape of each section of the snake
-
The size of each section of the snake
-
Snake color (snake head color, snake body color)
-
Where is the initial position of the snake
Snake behavior
-
You can move by yourself, the length of the snake body is moved one section at a time
-
You can control the direction through the keyboard
-
You can eat food, and there will be one section after eating
food
Food attributes
-
Food size
-
Food color (random)
-
Food location (random)
-
Food shape (round)
Food method
- Food can change position after being eaten by snake (random)
Additional items
Game scene additional items
- Game obstacles
- Scoring function of the game
- The longest record of snakes in the game
The protagonist of the game
- Snakes can accelerate
- Game level settings
If you are interested, you can try to add the additional items of the game. If you have any questions, you can discuss it in the comments below!
Stop talking nonsense, go directly to the source code!
index.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇</title>
<!-- 将三个js文件,通过外联的方式进行引入 -->
<script src="地图.js"></script>
<script src="蛇.js"></script>
<script src="食物.js"></script>
</head>
<body>
<script>
//主界面HTML实现对游戏的全局控制
//一,创建地图,并将地图添加到body中
//实例化map对象
var map = new Game_Map();
//将map对象添加到body中
document.body.appendChild(map);
//三,创建食物
//计算食物随机出现的范围是多少
var countX = (map.offsetWidth - 40) / 20;
var countY = (map.offsetHeight - 40) / 20;
//实例化蛇对象,并且传参.
var food = new Food(countX, countY, map);
//二,创建蛇
var snake = new Snake(3, 0, map, food)
</script>
</body>
</html>
Map.js
//游戏场景
//我们使用构造函数来写游戏场景
function Game_Map() {
// 用对象的属性来设置游戏场景的大小
this.width = 1000;
this.height = 800;
//创建一个div来表示游戏场景
var map = document.createElement("div");
// 设置创建的div的长和宽
map.style.width = this.width + "px";
map.style.height = this.height + "px";
//设置盒子的背景颜色
map.style.backgroundColor = "rgba(211, 211, 211, 0.315)";
// 设置盒子的边框
map.style.border = "20px solid skyblue";
//设置盒子的位置
map.style.margin = "50px auto";
//给地图一个相对定位(子绝父相)
map.style.position = "relative";
//返回值返回创建的div就是map
return map
}
Snake.js
//蛇对象
//面向对象使用构造函数
function Snake(xindex, yindex, parent, food = null) {
//使用构造函数的属性来设置蛇的长还有每一节的大小
this.length = 4;
this.size = 20;
//获取传递的food
this.food = food;
//定义一个数组来存放蛇身
this.list = new Array();
// 一,创建蛇
//蛇的的长度是4,所以我们使用for循环来创建
for (var i = 0; i < this.length; i++) {
//创建蛇的div
var item = document.createElement("div");
//设置蛇的每一节的宽和高
item.style.width = item.style.height = this.size + "px";
//蛇的每一节是圆形,所以我们使用圆角边框
item.style.borderRadius = "100%";
// 使用if判断让蛇头的的颜色和身体的颜色不一样
if (i == 0) {
item.style.backgroundColor = "red";
}
else {
item.style.backgroundColor = "green";
}
//蛇是在地图里面所以蛇使用的是绝对定位
item.style.position = "absolute";
//定义蛇的初始位置,我们一开始给蛇的传递两个参数,来设置蛇的初始位置
//给的csx使用for循环是0 1 2 3 所以我们给的值是从右到左一个一个放置蛇身,csx是蛇身的初始横坐标
item.style.left = (xindex - i) * this.size + "px";
//给的csy是她的初始纵坐标
item.style.top = yindex * this.size + "px";
//给蛇设置一个自定义标签,为蛇当时的方向
item.setAttribute("dir", "right");
//把蛇身一节一节的放入到数组中
this.list[i] = item;
//然后再一节一节的添加到我们的map中
parent.appendChild(item);
}
// move函数
function move(list, size, food = null) {
//for循环遍历让蛇进行移动
for (var i = 0; i < list.length; i++) {
//判断蛇的移动方向
if (list[i].getAttribute("dir") === "down") {
//移动之前先判断一下是否碰到墙了
if (list[0].style.top == 800 + "px") {
// 碰到的话,游戏结束
alert("游戏结束!")
} else {
//没有碰到继续
list[i].style.top = list[i].offsetTop + size + "px";
}
} else if (list[i].getAttribute("dir") === "up") {
if (list[0].style.top == -20 + "px") {
alert("游戏结束!")
} else {
list[i].style.top = list[i].offsetTop - size + "px";
}
} else if (list[i].getAttribute("dir") === "left") {
if (list[0].style.left == -20 + "px") {
alert("游戏结束!")
} else {
list[i].style.left = list[i].offsetLeft - size + "px";
}
} else if (list[i].getAttribute("dir") === "right") {
if (list[0].style.left == 1000 + "px") {
alert("游戏结束!")
} else {
list[i].style.left = list[i].offsetLeft + size + "px";
}
}
}
//让dir属性进行传递,使得蛇身和蛇头一起向同一方向移动
for (var i = list.length - 1; i > 0; i--) {
list[i].setAttribute("dir", list[i - 1].getAttribute("dir"));
}
//判断食物是否出现
if (food == null) {
console.log(null);
return;
// 食物出现的话,判断如果蛇头和食物的位置重叠的话,那么就让食物重新定义一个新的随机位置,并且调用蛇长身体的方法
} else if (list[0].style.left == food.food.style.left && list[0].style.top == food.food.style.top) {
food.setPosition();
group();
}
};
//二,实现蛇的移动
this.movetime = setInterval(move, 100, this.list, this.size, this.food,);
// 三,控制转弯
document.addEventListener("keydown", changeDir,);
var list = this.list;
function changeDir(e) {
switch (e.keyCode) {
// 向上
case 38:
list[0].setAttribute("dir", "up");
break;
// 向下
case 40:
list[0].setAttribute("dir", "down");
break;
// 向左
case 37:
list[0].setAttribute("dir", "left");
break;
// 向右
case 39:
list[0].setAttribute("dir", "right");
break;
}
}
// 【4】蛇长身体
var group = function () {
// 蛇头和食物重叠以后,蛇身要长长一节,所以创建一个div,设置属性,加到蛇身的最后一节上
var item = document.createElement("div");
item.style.width = item.style.height = "20px";
item.style.borderRadius = "100%";
item.style.backgroundColor = "green";
item.style.position = "absolute";
item.style.left = list[list.length - 1].style.left;
item.style.top = list[list.length - 1].style.top;
list[list.length] = item;
parent.appendChild(item);
}
}
Food.js
//食物对象
//构造一个食物对象函数
function Food(countX, countY, body) {
//设置食物的大小
this.size = 20;
// 创建食物,设置食物的属性
this.food = document.createElement("div");
this.food.style.width = this.food.style.height = this.size + "px";
this.food.style.borderRadius = "50%";
this.food.style.position = "absolute";
//定义食物的随机位置以及随机的颜色
this.setPosition = function () {
this.food.style.left = Math.floor(Math.random() * countX) * this.size + "px";
this.food.style.top = Math.floor(Math.random() * countY) * this.size + "px";
this.food.style.backgroundColor = `rgb(${
Math.floor(Math.random() * 256)},${
Math.floor(Math.random() * 256)},${
Math.floor(Math.random() * 256)})`;
}
this.setPosition();
body.appendChild(this.food);
}
Note: I am a little white. If there is any problem with the code, I hope everyone can raise it and I will correct it in time!
