遊戲中有三個對象：地圖（map），食物（food），蛇（snack）
1.先設計地圖，一個簡單的div；
2.設計蛇的屬性：寬，高，方向，狀態（有多少節），方法：顯示，跑；
3.設計食物的屬性：寬，高；
4.顯示蛇：根據狀態向地圖裏加元素
5.蛇動起來：下一節到前一節的位置，蛇頭根據方向變化，刪除原來的蛇，新建蛇；當蛇喫到自己的時候，死亡；
6.食物被喫掉，蛇加一節，去掉原來的食物，生產新的食物
7.添加定時器，綁定按鍵事件；
代碼實現如下：
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script>
/*
* 畫地圖
* */
var map;
var snack;
var food;
var times;
function getMap() {
var instance = null;
function Map() {
this.width = 900;
this.height = 600;
this.bgColor = "#000";
this._map = null;
this.createMap = function () {
if (this._map == null) {
this._map = document.createElement("div");
this._map.style.background = this.bgColor;
this._map.style.position = "relative";
this._map.style.height = this.height + "px";
this._map.style.width = this.width + "px";
document.body.appendChild(this._map);
}
}
}
if (instance == null) {
//實例化
instance = new Map();
}
return instance;
}
function getSnack() {
var instance = null;
function Snack() {
this.width = 30;
this.height = 30;
this._snack = [[3, 1, "red", null], [2, 1, "yellow", null], [1, 1, "yellow", null]];
this.direct = "right";
this.createSnack = function () {
for (var i = 0; i < this._snack.length; i++) {
if (this._snack[i][3] == null) {
this._snack[i][3] = document.createElement("div");
this._snack[i][3].style.width = this.width + "px";
this._snack[i][3].style.height = this.height + "px";
this._snack[i][3].style.position = "absolute";
this._snack[i][3].style.background = this._snack[i][2];
map._map.appendChild(this._snack[i][3]);
}
this._snack[i][3].style.left = this._snack[i][0] * this.width + "px";
this._snack[i][3].style.top = this._snack[i][1] * this.height + "px";
}
}
this.snackMove = function () {
//屬性傳遞
var len = this._snack.length - 1;
for (var i = len; i > 0; i--) {
this._snack[i][0] = this._snack[i - 1][0];
this._snack[i][1] = this._snack[i - 1][1];
}
//蛇頭移動 方向
switch (this.direct) {
case "right":
this._snack[0][0] += 1;
break;
case "left":
this._snack[0][0] -= 1;
break;
case "up":
this._snack[0][1] -= 1;
break;
case "down":
this._snack[0][1] += 1;
break;
}
//判斷蛇有沒有喫到食物
if (this._snack[0][0] == food.x && this._snack[0][1] == food.y) {
food.createfood();
this._snack.push([
this._snack[this._snack.length - 1][0],
this._snack[this._snack.length - 1][1],
"yellow",
null
]);
}
//判斷蛇穿牆
if (this._snack[0][0] >= 30) {
this._snack[0][0] = 0;
}
if (this._snack[0][0] < 0) {
this._snack[0][0] = 29;
}
if (this._snack[0][1] >= 20) {
this._snack[0][1] = 0;
}
if (this._snack[0][1] < 0) {
this._snack[0][1] = 19;
}
//撞自己撞死
for (var i = 1; i < this._snack.length; i++) {
if (this._snack[0][0] == this._snack[i][0] && this._snack[0][1] == this._snack[i][1]) {
clearInterval(times);
alert("GAME OVER!");
return;
}
}
this.createSnack();
}
}
if (instance == null) {
instance = new Snack();
}
return instance;
}
function getFood() {
var instance = null;
function food() {
this.width = 30;
this.height = 30;
this.bgcolor = "green";
this._food = null;
this.x;
this.y;
this.createfood = function () {
this.x = Math.floor(Math.random() * 30);
this.y = Math.floor(Math.random() * 20);
if (this._food == null) {
this._food = document.createElement("div");
this._food.style.position = "absolute";
this._food.style.width = this.width + "px";
this._food.style.height = this.height + "px";
this._food.style.background = this.bgcolor;
map._map.appendChild(this._food);
}
this._food.style.left = this.x * this.width + "px";
this._food.style.top = this.y * this.height + "px";
}
}
if (instance == null) {
instance = new food();
}
return instance;
}
window.onload = function () {
map = getMap();
map.createMap();
snack = getSnack();
snack.createSnack();
food = getFood();
food.createfood();
times = setInterval(function () {
snack.snackMove();
}, 200);
//按鍵
document.body.onkeypress = function (e) {
switch (e.key) {
case "w":
if (snack.direct != "down") {
snack.direct = "up";
}
break;
case "a":
if (snack.direct != "right") {
snack.direct = "left";
}
break;
case "d":
if (snack.direct != "left") {
snack.direct = "right";
}
break;
case "s":
if (snack.direct != "up") {
snack.direct = "down";
}
break;
}
}
}
</script>
</body>
</html>