原生JS實作貪吃蛇游戲
貪吃蛇游戲(原生JavaScript)
貪吃蛇游戲思路分析
游戲思想:
面向物件的思想
- 三個js檔案分別代表三個物件
- 三個物件相互獨立,在HTML中控制全域
使用面向物件思想的好處
貪吃蛇游戲采用面向物件的思想去實作,我們的食物還有蛇以及地圖是相互獨立的,不會對彼此產生影響,可以單獨呼叫
貪吃蛇游戲物件分析
游戲的場景(一個大的div)
-
場景的大小
-
場景的邊框
-
場景在瀏覽器中的位置
游戲的主角(每一節是一個小的div)
蛇的屬性
-
蛇的初始長度(四節)
-
蛇的每一節的形狀
-
蛇的每一節的尺寸
-
蛇的顏色(蛇頭的顏色,蛇身的顏色)
-
蛇的初始位置在哪
蛇的行為
-
可以自己移動,每一次移動一節的蛇身長
-
可以通過鍵盤控制方向
-
可以吃食物,并且吃完以后會長一節
食物
食物的屬性
-
食物的大小
-
食物的顏色(隨機)
-
食物的位置(隨機)
-
食物的形狀(圓形)
食物的方法
- 食物被蛇吃掉以后可以改變位置(隨機)
附加項
游戲場景附加項
- 游戲的障礙
- 游戲的計分功能
- 游戲中蛇的最長記錄
游戲的主角附加項
- 蛇可以加速
- 游戲的關卡設定
游戲的附加項大家有興趣的話可以自己去嘗試著添加,有什么問題,可以在下方評論進行討論!
廢話少說,直接上原始碼!
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>
地圖.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
}
蛇.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);
}
}
食物.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);
}
注:本人小白一個,代碼有什么問題的話,希望大家可以提出來,本人會及時改正!
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/237536.html
標籤：其他
上一篇：利用Java解決走迷宮問題
下一篇：推箱子——功能更新