// 物件導向思想，利用物件解決貪吃蛇
//1.地圖
//2.食物
//3.蛇
map.js
//利用物件導向思想建立地圖
class map
}//只需建立map的例項物件，即可建立乙個地圖
snake.js
//snake：1.建立蛇各部分並渲染到頁面
// 2.
class snake,,,
]//沒有設定就使用預設值，注意obj預設值是空物件必須寫，否則下方設定沒用，因為均是設定給obj的屬性
obj = obj ||
this.width = obj.width || 100
this.height = obj.height || 100
this.bodyimg = obj.bodyimg || "images/body.png"
this.headimg = obj.headimg || "images/head.png"
this.snake_all = snake_all;
this.map = obj.map || {}
//鍵盤按鍵按下事件，僅執行一次，作為蛇頭移動的參考
document.body.onkeydown = (event)=>;
//判斷邊界最大數值使用
let widthnumber = parseint(map.width) / parseint(this.width);
let heightnumber = parseint(map.height) / parseint(this.height);
this.widthnumber = widthnumber;
this.heightnumber = heightnumber;
}creatsnake(map)
//同樣的，陣列也要變為屬性，要不原型物件中找不著
for(let value of this.snake_all))`
}else )`
}//5.將蛇的每一部分均新增到地圖中
//6.為蛇每部分新增類名標識，便於找到遍歷刪除
odiv.classname="snake_parts"
} }
move()
//2. 移動蛇頭，根據按鍵方向來調整蛇頭方向與位置，因此需要先獲取到蛇頭，而且不能寫到最上方，因為蛇頭每次都在變化，必須寫到定時器內
let snakehead = this.snake_all[0]
是因為上方按鍵事件用的es5，this為body，而不是整個建構函式，因此麼有值，蛇頭也動不了，因此換成箭頭函式
switch(this.key)
}inspection(snakefood)
//5.每次移動時都要判斷是否吃到了豆豆(蛇頭x，y與豆豆一樣)，吃到了要變長一截，然後把場上的豆豆刪掉，重新渲染乙個豆豆；
// 700px 400px 7 4 因此要進行判斷，可以先取整再/長度 .即為 7 4 7 4
if(snakehead.x===parseint(snakefood.ofood.style.left)/this.width && snakehead.y===parseint(snakefood.ofood.style.top)/this.height )
switch(this.key)
//將調整好位置的最後一節身軀新增到陣列snake_all中，放到蛇身體裡,利用push方法放到最後，可以一直拿到最後新的數值，即可迴圈起來
this.snake_all.push(newbody)
}//沒有超出邊界預設返回true
return true;
} updata(map,snakefood)
//3.蛇的位置變了，重新渲染蛇的每一部分,仍需要map，可以在上面的方法將其作為建構函式的乙個屬性，建構函式內的所有方法即可使用map
this.creatsnake(map)
}, 500);
}}snakefood.js
//利用物件導向思想建立隨機生成的食物
//注意，這些建立例項均為js操作，寫到script標籤裡；
//建立地圖
let map =
newmap()
//建立食物
let snakefood =
newsnakefood()
;//隨機生成食物並渲染到地圖中，並記住，誰需要就放到哪個方法的引數中去
snakefood.
xuanran
(map)
//建立蛇
let obj =
let snake =
newsnake
(obj)
//建立蛇身體的每個部分並渲染到地圖中。
snake.
creatsnake
(map)
//蛇移動
snake.
updata
(map,snakefood)
script
>
body
>
html
>
原生js 貪吃蛇 詳細版加功能實現
js 塊 var div map 創造地圖的物件 var div food 創造食物的物件 var div foodf var div foodo var div snake 建立蛇的物件 var sum 0 初始化的分數 var time 接收定時器的變數 var div eye 建立眼睛的變數 ...
js 實現貪吃蛇專案
近來在學習js高階，便學習著做個網頁版貪吃蛇專案。map tools.js function window.tools tools food.js function game.prototype.start function function runsnake if heady 0 heady ma...
js貪吃蛇（建構函式）
給大家分享一下這幾天我研究的乙個貪吃蛇，挺簡單的，但是實現起來其實有點繞的，我給大家附上完整 一起分析學習一下，主要用的是建構函式。思想 1 設計蛇 屬性有寬 高 方向 狀態 有多少節 方法 顯示，跑 2 設計食物 屬性寬 高 3 顯示蛇 根據狀態向地圖裡加元素 4 蛇跑起來 下一節到前一節的位置，...