ネイティブJSがヘビゲームを実現
ヘビゲーム（ネイティブJavaScript）
ヘビゲームの考え方の分析
ゲームのアイデア：
オブジェクト指向思考
- 3つのjsファイルはそれぞれ3つのオブジェクトを表します
- 3つのオブジェクトは互いに独立しており、HTMLの全体的な状況を制御します
オブジェクト指向思考を使用する利点
ヘビゲームはオブジェクト指向の考え方を採用して達成しています。私たちの食べ物、ヘビ、地図は互いに独立しており、互いに影響を与えることはありません。別々に呼び出すことができます。
ヘビゲームオブジェクトの分析
ゲームシーン（大きなdiv）
-
シーンのサイズ
-
シーンの境界
-
ブラウザでのシーンの場所
ゲームの主人公（各セクションは小さなdivです）
ヘビの性質
-
ヘビの最初の長さ（4ノット）
-
ヘビの各セクションの形状
-
ヘビの各セクションのサイズ
-
ヘビの色（ヘビの頭の色、ヘビの体の色）
-
ヘビの初期位置はどこですか
ヘビの行動
-
あなたは自分で動くことができます、ヘビの体の長さは一度に1セクションずつ動かされます
-
キーボードから方向を制御できます
-
あなたは食べ物を食べることができます、そして食べた後に1つのセクションがあります
食物
食品の属性
-
食品サイズ
-
食用色素（ランダム）
-
食べ物の場所（ランダム）
-
食品の形（丸い）
フードメソッド
- 食べ物はヘビに食べられた後に位置を変えることができます（ランダム）
追加のアイテム
ゲームシーン追加アイテム
- ゲームの障害
- ゲームのスコアリング関数
- ゲームでのヘビの最長記録
ゲームの主人公
- ヘビは加速することができます
- ゲームレベルの設定
興味のある方は、ゲームのアイテムを追加してみてください。ご不明な点がございましたら、下のコメント欄でご相談ください。
ナンセンスな話をやめて、ソースコードに直接アクセスしてください！
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);
}
注：私は少し白人です。コードに問題があれば、みんながそれを上げてくれることを願っています。時間内に修正します！
