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贪吃蛇-练习</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("游戏结束！");
}
/*吃食物*/
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>
复制代码 代码如下:
<!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("游戏结束！");
}
/*吃食物*/
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>
标签：
JS,贪吃蛇,游戏
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“JS写的贪吃蛇游戏(个人练习)”评论...
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。