求js寫的游戲
簡(jiǎn)單點(diǎn)的就行，難了看不懂
lz498806332
2016-06-30
3 回答
舉報(bào)
0/150
提交
取消
2016-07-01
只是自己寫的js游戲，不懂的問我
<!DOCTYPE html>?
<html xmlns="http://www.w3.org/1999/xhtml">?
<head>?
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />?
<title>JS貪吃蛇-練習(xí)</title>?
<style type="text/css">?
#pannel table {?
border-collapse: collapse;?
}?
#pannel table td {?
border: 1px solid #808080;?
width: 10px;?
height: 10px;?
font-size: 0;?
line-height: 0;?
overflow: hidden;?
}?
#pannel table .snake {?
background-color: green;?
}?
#pannel table .food {?
background-color: blue;?
}?
</style>?
<script type="text/javascript">?
var Direction = new function () {?
this.UP = 38;?
this.RIGHT = 39;?
this.DOWN = 40;?
this.LEFT = 37;?
};?
var Common = new function () {?
this.width = 20; /*水平方向方格數(shù)*/?
this.height = 20; /*垂直方向方格數(shù)*/?
this.speed = 250; /*速度 值越小越快*/?
this.workThread = null;?
};?
var Main = new function () {?
var control = new Control();?
window.onload = function () {?
control.Init("pannel");?
/*開始按鈕*/?
document.getElementById("btnStart").onclick = function () {?
control.Start();?
this.disabled = true;?
document.getElementById("selSpeed").disabled = true;?
document.getElementById("selSize").disabled = true;?
};?
/*調(diào)速度按鈕*/?
document.getElementById("selSpeed").onchange = function () {?
Common.speed = this.value;?
}?
/*調(diào)大小按鈕*/?
document.getElementById("selSize").onchange = function () {?
Common.width = this.value;?
Common.height = this.value;?
control.Init("pannel");?
}?
};?
};?
/*控制器*/?
function Control() {?
this.snake = new Snake();?
this.food = new Food();?
/*初始化函數(shù)，創(chuàng)建表格*/?
this.Init = function (pid) {?
var html = [];?
html.push("<table>");?
for (var y = 0; y < Common.height; y++) {?
html.push("<tr>");?
for (var x = 0; x < Common.width; x++) {?
html.push('<td id="box_' + x + "_" + y + '"> </td>');?
}?
html.push("</tr>");?
}?
html.push("</table>");?
this.pannel = document.getElementById(pid);?
this.pannel.innerHTML = html.join("");?
};?
/*開始游戲 - 監(jiān)聽鍵盤、創(chuàng)建食物、刷新界面線程*/?
this.Start = function () {?
var me = this;?
this.MoveSnake = function (ev) {?
var evt = window.event || ev;?
me.snake.SetDir(evt.keyCode);?
};?
try {?
document.attachEvent("onkeydown", this.MoveSnake);?
} catch (e) {?
document.addEventListener("keydown", this.MoveSnake, false);?
}?
this.food.Create();?
Common.workThread = setInterval(function () {?
me.snake.Eat(me.food); me.snake.Move();?
}, Common.speed);?
};?
}?
/*蛇*/?
function Snake() {?
this.isDone = false;?
this.dir = Direction.RIGHT;?
this.pos = new Array(new Position());?
/*移動(dòng) - 擦除尾部，向前移動(dòng)，判斷游戲結(jié)束(咬到自己或者移出邊界)*/?
this.Move = function () {?
document.getElementById("box_" + this.pos[0].X + "_" + this.pos[0].Y).className = "";?
//所有 向前移動(dòng)一步?
for (var i = 0; i < this.pos.length - 1; i++) {?
this.pos[i].X = this.pos[i + 1].X;?
this.pos[i].Y = this.pos[i + 1].Y;?
}?
//重新設(shè)置頭的位置?
var head = this.pos[this.pos.length - 1];?
switch (this.dir) {?
case Direction.UP:?
head.Y--;?
break;?
case Direction.RIGHT:?
head.X++;?
break;?
case Direction.DOWN:?
head.Y++;?
break;?
case Direction.LEFT:?
head.X--;?
break;?
}?
this.pos[this.pos.length - 1] = head;?
//遍歷畫蛇，同時(shí)判斷游戲結(jié)束?
for (var i = 0; i < this.pos.length; i++) {?
var isExits = false;?
for (var j = i + 1; j < this.pos.length; j++)?
if (this.pos[j].X == this.pos[i].X && this.pos[j].Y == this.pos[i].Y) {?
isExits = true;?
break;?
}?
if (isExits) { this.Over();/*咬自己*/ break; }?
var obj = document.getElementById("box_" + this.pos[i].X + "_" + this.pos[i].Y);?
if (obj) obj.className = "snake"; else { this.Over();/*移出邊界*/ break; }?
}?
this.isDone = true;?
};?
/*游戲結(jié)束*/?
this.Over = function () {?
clearInterval(Common.workThread);?
alert("游戲結(jié)束！");?
}?
/*吃食物*/?
this.Eat = function (food) {?
var head = this.pos[this.pos.length - 1];?
var isEat = false;?
switch (this.dir) {?
case Direction.UP:?
if (head.X == food.pos.X && head.Y == food.pos.Y + 1) isEat = true;?
break;?
case Direction.RIGHT:?
if (head.Y == food.pos.Y && head.X == food.pos.X - 1) isEat = true;?
break;?
case Direction.DOWN:?
if (head.X == food.pos.X && head.Y == food.pos.Y - 1) isEat = true;?
break;?
case Direction.LEFT:?
if (head.Y == food.pos.Y && head.X == food.pos.X + 1) isEat = true;?
break;?
}?
if (isEat) {?
this.pos[this.pos.length] = new Position(food.pos.X, food.pos.Y);?
food.Create(this.pos);?
}?
};?
/*控制移動(dòng)方向*/?
this.SetDir = function (dir) {?
switch (dir) {?
case Direction.UP:?
if (this.isDone && this.dir != Direction.DOWN) { this.dir = dir; this.isDone = false; }?
break;?
case Direction.RIGHT:?
if (this.isDone && this.dir != Direction.LEFT) { this.dir = dir; this.isDone = false; }?
break;?
case Direction.DOWN:?
if (this.isDone && this.dir != Direction.UP) { this.dir = dir; this.isDone = false; }?
break;?
case Direction.LEFT:?
if (this.isDone && this.dir != Direction.RIGHT) { this.dir = dir; this.isDone = false; }?
break;?
}?
};?
}?
/*食物*/?
function Food() {?
this.pos = new Position();?
/*創(chuàng)建食物 - 隨機(jī)位置創(chuàng)建立*/?
this.Create = function (pos) {?
document.getElementById("box_" + this.pos.X + "_" + this.pos.Y).className = "";?
var x = 0, y = 0, isCover = false;?
/*排除蛇的位置*/?
do {?
x = parseInt(Math.random() * (Common.width - 1));?
y = parseInt(Math.random() * (Common.height - 1));?
isCover = false;?
if (pos instanceof Array) {?
for (var i = 0; i < pos.length; i++) {?
if (x == pos[i].X && y == pos[i].Y) {?
isCover = true;?
break;?
}?
}?
}?
} while (isCover);?
this.pos = new Position(x, y);?
document.getElementById("box_" + x + "_" + y).className = "food";?
};?
}?
function Position(x, y) {?
this.X = 0;?
this.Y = 0;?
if (arguments.length >= 1) this.X = x;?
if (arguments.length >= 2) this.Y = y;?
}?
</script>?
</head>?
<body>?
<div id="pannel" style="margin-bottom: 10px;"></div>?
<select id="selSize">?
<option value="20">20*20</option>?
<option value="30">30*30</option>?
<option value="40">40*40</option>?
</select>?
<select id="selSpeed">?
<option value="500">速度-慢</option>?
<option value="250" selected="selected">速度-中</option>?
<option value="100">速度-快</option>?
</select>?
<input type="button" id="btnStart" value="開始" />?
</body>?
</html>?
2020-03-24
好玩！
2018-03-15
賊棒！