当自己用代码实贪吃蛇游戏时，是很有成就感的一件事情。同时在写的过程中也是自己对javascript基本语法的复习与体会。
以下就是代码以及一些代码注释：（bug是有的，浏览器的兼容性，本人的能力无法解决）
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
div {
border: 1px solid #0094ff;
width: 20px;
height: 20px;
background-color: yellow;
}
table {
margin: 10px auto;
}
</style>
<script type="text/javascript">
//全局变量
var colCount = 12; //12列
var rowCount = 14; //14行
//--------------window.onload在这里-------------
window.onload=function () {
//画小方块12x14
for (var i = 0; i < rowCount; i++) {
var createtr = document.createElement("tr");
for (var j = 0; j < colCount; j++) {
var createtd = document.createElement("td");
createtd.appendChild(CreateDiv(i, j));
createtr.appendChild(createtd);
}
document.getElementById("tabMain").appendChild(createtr);
}
//游戏逻辑方法
GameController();
}
//--------------封装的方法以及自定义的类---------------
//获得指定rowIndex和colIndex的div
function GetDiv(rowIndex, colIndex) {
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
if (divs[i].getAttribute("rowIndex") == rowIndex && divs[i].getAttribute("colIndex") == colIndex) {
return divs[i];
}
}
return undefined;
}
//生成小方块的方法
function CreateDiv(rowIndex, colIndex) {
var xdiv = document.createElement("div");
//添加自定义属性，为每个单元格做标记.
xdiv.setAttribute("rowIndex", rowIndex);
xdiv.setAttribute("colIndex",colIndex);
xdiv.setAttribute("food", false);
return xdiv;
}
//单元格
var Unit = {
colIndex: 0,
rowIndex: 0,
//单元格方向
dir: "Left",
olddir: "Left",
Draw: function (rowIndex, colIndex) {
GetDiv(rowIndex, colIndex).style.backgroundColor = "red";
},
Wipe: function (rowIndex, colIndex) {
GetDiv(rowIndex, colIndex).style.backgroundColor = "yellow";
},
MoveLeft: function () {
this.colIndex--;
},
MoveRight: function () {
this.colIndex++;
},
MoveUp: function () {
this.rowIndex--;
},
MoveDown: function () {
this.rowIndex++;
}
}
//存放单元格集合类
var UnitList = {
//存放单元格的数组
body: new Array(),
//添加三个单元格到数组，这里代码写的不好，本想每次吃到食物就调用AddBody方法的，后来就把这个方法写死了。
AddBody: function () {
var unit = Object.create(Unit);
unit.rowIndex = 8;
unit.colIndex = 8;
this.body[this.body.length] = unit;
//测试代码
var unit2 = Object.create(Unit);
unit2.rowIndex = 8;
unit2.colIndex = 9;
this.body[this.body.length] = unit2;
var unit3 = Object.create(Unit);
unit3.rowIndex = 8;
unit3.colIndex = 10;
this.body[this.body.length] = unit3;
},
Draw: function () {
for (var i = 0; i < this.body.length; i++) {
this.body[i].Draw(this.body[i].rowIndex, this.body[i].colIndex);
}
},
Wipe: function () {
for (var i = 0; i < this.body.length; i++) {
this.body[i].Wipe(this.body[i].rowIndex, this.body[i].colIndex);
}
},
AutoMoveTo: function () {
//先擦除
this.Wipe();
//移动
for (var i = 0; i < this.body.length; i++) {
switch (this.body[i].dir) {
case "Left":
this.body[i].MoveLeft();
break;
case "Right":
this.body[i].MoveRight();
break;
case "Down":
this.body[i].MoveDown();
break;
case "Up":
this.body[i].MoveUp();
break;
}
this.body[i].olddir = this.body[i].dir;
if (this.body[i - 1] != undefined) {
this.body[i].dir = this.body[i - 1].olddir;
}
}
//重画
this.Draw();
}
}
//----------------游戏逻辑方法-------------
function GameController() {
var U = Object.create(UnitList);
U.AddBody();
U.Draw();
AddFood();
var set = window.setInterval(function () { MoveMove() }, 500);
//移动方法
function MoveMove() {
//判断是否能移动
if (IsAbleMove()) {
//判断是否吃到自己
if (IsEatMySelf()) {
window.clearInterval(set);
alert("吃到自己了");
}
//判断是否吃到食物
if (IsEatFood()) {
//新增一个unit
var newU = Object.create(Unit);
newU.rowIndex = U.body[U.body.length - 1].rowIndex;
newU.colIndex = parseInt(U.body[U.body.length - 1].colIndex) + 1;
U.body[U.body.length] = newU;
//新增一个食物
AddFood();
}
U.AutoMoveTo();
}
else {
// 关闭setInterval
window.clearInterval(set);
alert("结束");
}
}
//判断越界
function IsAbleMove() {
var rowIndex = U.body[0].rowIndex;
var colIndex = U.body[0].colIndex;
switch (U.body[0].dir) {
case "Left":
colIndex--;
break;
case "Right":
colIndex++;
break;
case "Down":
rowIndex++;
break;
case "Up":
rowIndex--;
break;
}
if (rowIndex < 0 || colIndex < 0 || rowIndex > 13 || colIndex > 11) {
return false;
}
return true;
}
//生成食物
function AddFood() {
var rowIndex;
var colIndex;
random();
function random() {
rowIndex = parseInt(Math.random() * 14);
colIndex = parseInt(Math.random() * 12);
for (var i = 0; i < U.body.length; i++) {
if (rowIndex == U.body[i].rowIndex && colIndex == U.body[i].colIndex) {
// alert("haha");
random();
}
}
};
GetDiv(rowIndex, colIndex).style.backgroundColor = "green";
GetDiv(rowIndex, colIndex).setAttribute("food", true);
}
//是否吃到食物
function IsEatFood() {
if (GetDiv(U.body[0].rowIndex, U.body[0].colIndex).getAttribute("food") == "true") {
GetDiv(U.body[0].rowIndex, U.body[0].colIndex).setAttribute("food", false);
return true;
}
return false;
}
//是否吃到自己
function IsEatMySelf() {
var rowIndex = U.body[0].rowIndex;
var colIndex = U.body[0].colIndex;
for (var i = 1; i < U.body.length; i++) {
if (U.body[i].rowIndex == rowIndex && U.body[i].colIndex == colIndex) {
return true;
}
}
return false;
}
//监听键盘事件
window.onkeydown = function () {
switch (event.keyCode) {
case 37:
//alert("你按了左方向键");
if (U.body[0].dir != "Right") {
U.body[0].dir = "Left";
}
break;
case 38:
//alert("你按了上");
if (U.body[0].dir != "Down") {
U.body[0].dir = "Up";
}
break;
case 39:
//alert("你按了右方向键");
if (U.body[0].dir != "Left") {
U.body[0].dir = "Right";
}
break;
case 40:
//alert("你按了下方向键");
if (U.body[0].dir != "Up") {
U.body[0].dir = "Down";
}
break;
}
}
}
</script>
</head>
<body>
<table id="tabMain">
</table>
</body>
</html>
时间： 2024-10-13 16:23:22