共计 5770 个字符,预计需要花费 15 分钟才能阅读完成。
download:Vue3+ElementPlus+Koa2 全栈开发后盾零碎
<!– <!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>JS 贪吃蛇 </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; /* 程度方向方格数 */
this.height = 20; /* 垂直方向方格数 */
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;
};
/* 调速度按钮 */
document.getElementById("selSpeed").onchange = function () {Common.speed = this.value;}
/* 调大小按钮 */
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();
/* 初始化函数,创建表格 */
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("");
};
/* 开始游戏 - 监听键盘、创立食物、刷新界面线程 */
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());
/* 挪动 - 擦除尾部,向前挪动,判断游戏完结 (咬到本人或者移出边界)*/
this.Move = function () {document.getElementById("box_" + this.pos[0].X + "_" + this.pos[0].Y).className = "";
// 所有 向前挪动一步
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;
}
// 从新设置头的地位
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;
// 遍历画蛇,同时判断游戏完结
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;
};
/* 游戏完结 */
this.Over = function () {clearInterval(Common.workThread);
alert("游戏完结!");
location.reload();}
/* 吃食物 */
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);
}
};
/* 管制挪动方向 */
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();
/* 创立食物 - 随机地位创建设 */
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> –>
<!-- ++++++++++++++++++++++++++++++++++++++++ 贪吃蛇精简版,下面为较欠缺版 ++++++++++++++++++++++++++++++++++++++++ -->
<html>
<body>
<canvas id="can" width="400" height="400" style="background:Black"></canvas>
<script>
var sn=[42,41],dz=43,fx=1,n,ctx=document.getElementById("can").getContext("2d");
function draw(t,c){
ctx.fillStyle=c;
ctx.fillRect(t%20*20+1,~~(t/20)*20+1,18,18);
}
document.onkeydown=function(e){fx=sn[1]-sn[0]==(n=[-1,-20,1,20][(e||event).keyCode-37]||fx)?fx:n};
!function(){sn.unshift(n=sn[0]+fx);
if(sn.indexOf(n,1)>0 || n<0||n>399||fx==1&&n%20==0||fx==-1&&n%20==19){return alert("GAME OVER");
refesh();}
draw(n,"Lime");
if(n==dz){while(sn.indexOf(dz=~~(Math.random()*400))>=0);
draw(dz,"Yellow");
}else{draw(sn.pop(),"Black");
}
setTimeout(arguments.callee,130);
}();
function refesh(){location.reload();
}
</script>
</body>
正文完