IDC资讯中心
javascript写的盒子游戏代码，开源。
[code]
<html>
<head>
<title>盒子游戏</title>
<style type="text/css">
body{font-size:10pt;}
.table_back{width:300px;height:300px;}
.floor{border:1px solid black;cursor:pointer;}
.closed{background-color:#808080;cursor:default;}
.edge{border-color:#dfdfdf;}
.mickey{background:red;cursor:default;}
.spider{background:green;cursor:default;}
</style>
</head>
<body>
<script type="text/javascript">
/*–
标题：盒子游戏
设计：王集鹄
博客：http://blog.csdn.net/zswang
日期：2009年12月5日
–*/
function Box(options) {
options = options || {};
var self = this;
this.rowCount = options.rowCount || 15; // 行数
this.colCount = options.colCount || 15; // 列数
this.closedCount = options.closedCount || 3; // 起始关闭数
this.mickeyCount = options.mickeyCount || 1; // 老鼠的数量
this.parent = options.parent || document.body; // 容器
this.onnewmickey = options.onnewmickey; // 初始化老鼠的事件
this.table_back = document.createElement("table");
this.table_back.className = "table_back";
this.table_back.border = 1;
this.playing = false; // 是否在进行中
this.floors = {}; // 矩阵地板矩阵 [y,x]
for (var i = 0; i < this.rowCount; i++) {
var tr = this.table_back.insertRow(-1);
for (var j = 0; j < this.colCount; j++) {
var td = tr.insertCell(-1);
this.floors[i + "," + j] = new Floor({
td: td
, box: this
, pos: { x: j, y: i }
});
}
}
this.mickeys = []; // 老鼠集合
for (var i = 0; i < this.mickeyCount; i++) {
var mickey = new Mickey({box: this});
mickey.index = i;
if (this.onnewmickey) this.onnewmickey(mickey);
this.mickeys.push(mickey);
}
this.parent.appendChild(this.table_back);
}
// 重新开始
Box.prototype.replay = function () {
this.playing = true;
for (var i = 0; i < this.rowCount; i++) {
for (var j = 0; j < this.colCount; j++) {
this.floors[i + "," + j].setState("blank");
}
}
for (var i = 0; i < this.closedCount; i++) {
this.floors[
Math.floor(this.rowCount * Math.random())
+ "," + Math.floor(this.colCount * Math.random())
].setState("closed");
}
var j = -(this.mickeys.length / 2);
for (var i = 0; i < this.mickeys.length; i++, j++) {
if (this.mickeys.length % 2 == 0 && i == this.mickeys.length / 2)
j++;
this.mickeys[i].move({
x: Math.floor(this.colCount / 2)
, y: Math.floor(this.rowCount / 2 + j)
});
}
}
// 下一个周期
Box.prototype.kick = function() {
if (!this.playing) return;
var count = 0;
var freedom = false;
for (var i = 0; i < this.mickeys.length; i++) {
if (this.mickeys[i].run()) count++;
if (this.mickeys[i].freedom) freedom = true;
}
if (freedom) // 有老鼠跑了
this.gameover();
else if (!count) this.win();
}
// 游戏结束
Box.prototype.gameover = function() {
if (!this.playing) return;
this.playing = false;
if (this.ongameover) this.ongameover();
}
Box.prototype.win = function() {
if (!this.playing) return;
this.playing = false;
if (this.onwin) this.onwin();
}
// 地板
function Floor(options) {
options = options || {};
var self = this;
this.td = options.td || {};
this.td.innerHTML = " ";
this.td.onclick = function() {
if (!self.box.playing) return; // 游戏已经结束
if (self.state != "blank") return;
self.setState("closed");
self.box.kick();
}
this.box = options.box || {};
this.pos = options.pos || {};
this.state = "blank";
this.doChange();
}
// 状态变化
Floor.prototype.doChange = function() {
var className = "floor";
if (this.pos.x * this.pos.y == 0
|| this.pos.x == this.box.colCount – 1
|| this.pos.y == this.box.rowCount – 1) // 边缘
className += " edge";
className += " " + this.state;
if (this.td.className != className)
this.td.className = className;
}
Floor.prototype.setState = function(state) {
if (this.state == state) return;
this.state = state;
if (this.box.next) this.box.next();
this.doChange();
}
// 老鼠类
function Mickey(options) {
options = options || {};
this.box = options.box || {};
this.route = null; // 逃跑路线
this.pos = {}; // 所在位置
this.move(this.pos);
this.freedom = false;
this.name = "mickey";
this.offsets = [ // 移动规则
{x: -1, y: 0}
, {x: 0, y: -1}
, {x: +1, y: 0}
, {x: 0, y: +1}
];
}
// 移动位置
Mickey.prototype.move = function(pos) {
pos = pos || {};
if (pos.x == this.x && pos.y == this.y) return;
if (this.box.floors[this.pos.y + "," + this.pos.x])
this.box.floors[this.pos.y + "," + this.pos.x].setState("blank");
this.pos = pos;
this.box.floors[this.pos.y + "," + this.pos.x].setState(this.name);
this.freedom = this.pos.x == 0 || this.pos.y == 0
|| this.pos.x == this.box.colCount – 1
|| this.pos.y == this.box.rowCount – 1;
}
// 老鼠跑
Mickey.prototype.run = function() {
var directions = { route: [], pos: this.pos };
this.flags = {};
this.route = [];
if (this.search(this.pos, this.route)) {
this.move(this.route.shift());
return true;
}
}
// 搜索逃跑路径
Mickey.prototype.search = function(pos, route) {
if (this.flags[pos.y + "," + pos.x]) return false;
this.flags[pos.y + "," + pos.x] = true; // 标记已经扫描
// 搜索直观的路径
var directions = {}; // 每个方向的路径
var min = -1; // 最短的距离
for (var i = 0; i < this.offsets.length; i++) {
directions[i] = [];
for (var j = 1; ; j++) {
var test = {
x: pos.x + this.offsets[i].x * j
, y: pos.y + this.offsets[i].y * j
};
if (!(test.x >= 0 && test.y >= 0
&& test.x < this.box.colCount && test.y < this.box.rowCount
&& !this.flags[test.y + "," + test.x] // 未搜索过
&& this.box.floors[test.y + "," + test.x].state == "blank")) {
directions[i] = [];
break;
}
directions[i].push(test);
if (test.x == 0 || test.y == 0
|| test.x == this.box.colCount – 1
|| test.y == this.box.rowCount -1) {
if (min < 0 || directions[min].length > directions[i].length) min = i;
break;
}
}
}
if (min >= 0) {
for (var i = 0; i < directions[min].length; i++)
route.push(directions[min][i]);
return true;
}
// 回溯搜索
var k = Math.floor(Math.random() * this.offsets.length);
for (var i = 0; i < this.offsets.length; i++) {
var test = {
x: pos.x + this.offsets[(k + i) % this.offsets.length].x
, y: pos.y + this.offsets[(k + i) % this.offsets.length].y
};
if (test.x >= 0 && test.y >= 0
&& test.x < this.box.colCount && test.y < this.box.rowCount
&& !this.flags[test.y + "," + test.x] // 未搜索过
&& this.box.floors[test.y + "," + test.x].state == "blank") { // 非空地
route.push(test);
if (test.x == 0 || test.y == 0
|| test.x == this.box.colCount – 1
|| test.y == this.box.rowCount -1)
return true;
if (this.search(test, route)) return true;
route.pop();
}
}
return false;
}
var button = document.createElement("input");
button.type = "button";
button.value = "第一关";
button.onclick = function() {
box1.replay();
};
document.body.appendChild(button);
var box1 = new Box();
box1.replay();
var button = document.createElement("input");
button.type = "button";
button.value = "第二关";
button.onclick = function() {
box2.replay();
};
document.body.appendChild(button);
var box2 = new Box({mickeyCount: 2});
box2.replay();
var button = document.createElement("input");
button.type = "button";
button.value = "第三关";
button.onclick = function() {
box3.replay();
};
document.body.appendChild(button);
var box3 = new Box({
onnewmickey: function(mickey) {
mickey.offsets = [
{x: -1, y: 0}
, {x: 0, y: -1}
, {x: +1, y: 0}
, {x: 0, y: +1}
, {x: -1, y: +1}
, {x: -1, y: -1}
, {x: +1, y: -1}
, {x: +1, y: +1}
];
mickey.name = ‘spider’;
}
});
box3.replay();
box1.ongameover = box2.ongameover = box3.ongameover = function() {
alert("跑掉了。o(╯□╰)o");
}
box1.onwin = box2.onwin = box3.onwin = function() {
alert("O(∩_∩)O成功！");
}
</script>
</body>
</html>
[/code]
