【软件分享】貌似这两天围堵游戏挺受欢迎，升级为自定义关卡版本。

Question

有谁设计的关卡不错来分享一下。收集经典的关卡：http://www.renrousousuo.com/Rounded.aspx
自定义关卡：http://www.renrousousuo.com/Scripts/Rounded.html/*--
标题：围堵
设计：王集鹄
博客：http://blog.csdn.net/zswang
日期：2009年12月5日
--*///2009年12月6日 王集鹄 添加 地图参数、马和象的走法、操作次数、图像样式的兼容 function Box(options) {
options = options || {};
var self = this;
this.rowCount = options.rowCount || 15; // 行数
this.colCount = options.colCount || 15; // 列数
this.kickCount = options.kickCount || 1; // 玩家操作多少次一个周期
this.parent = options.parent || document.body; // 容器
this.caption = options.caption || "Replay"; // 标题
this.map = (options.map || "").replace(/\s+/g, ""); // 地图数据

this.button = document.createElement("input");
this.button.type = "button";
this.button.value = this.caption;
this.button.onclick = function() { 
self.replay(); 
};
this.parent.appendChild(this.button); this.table_back = document.createElement("table");
this.table_back.className = "table_back";
this.table_back.cellPadding = "0px";
this.table_back.cellSpacing = "0px";
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.parent.appendChild(this.table_back);
this.replay();
}// 重新开始
Box.prototype.replay = function() {
this.playing = true;
this.mickeys = [];
this.step = 0;
var k = 0;
for (var i = 0; i < this.rowCount; i++) {
for (var j = 0; j < this.colCount; j++) {
var name = this.map.substr(k++, 1);
switch(name) {
case "1": case "x": case "w": case "c":
this.floors[i + "," + j].setState("closed");
break;
case "r": case "b": case "n": case "q":
var mickey = new Mickey({name: name, box: this, pos: {x: j, y: i}});
this.mickeys.push(mickey);
break;
default:
this.floors[i + "," + j].setState("blank");
break;
}
}
}
};// 下一个周期
Box.prototype.kick = function() {
if (!this.playing) return;
this.step++;
if (this.step % this.kickCount != 0) 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();
else alert(this.caption + "跑掉了。o(╯□╰)o");
};Box.prototype.win = function() {
if (!this.playing) return;
this.playing = false;
if (this.onwin) 
this.onwin();
else alert(this.caption + "O(∩_∩)O成功！");
};// 地板
function Floor(options) {
options = options || {};
var self = this;
this.td = options.td || {};
this.td.innerHTML = "&nbsp;";
this.td.onclick = function() {
if (!self.box.playing) return; // 游戏已经结束
if (self.state != "blank") return;
self.setState("closed");
self.box.kick();
if (typeof playSound == "function") playSound("move"); // 播放声音
}
this.box = options.box || {};
this.pos = options.pos || {};
this.state = "blank";
this.doChange();
}// 状态变化
Floor.prototype.doChange = function() {
var className = "floor";
if (this.state == "blank" && (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 (typeof this.arrow != "undefined") 
className += " " + this.state + this.arrow;
if (this.td.className != className)
this.td.className = className;
};Floor.prototype.setState = function(state, arrow) {
if (this.state == state) return;
this.state = state;
this.arrow = arrow;
this.doChange();
};// 老鼠类
function Mickey(options) {
options = options || {};
this.box = options.box || {};
this.pos = options.pos || {}; // 所在位置
this.name = options.name || "rook"; 
if (this.name.length == 1)
this.name = { "n": "knight", "q": "queen", "r": "rook", "b": "bishop" }[this.name];
this.route = []; // 逃跑路线
this.freedom = false; // 是否获得自由
this.move(this.pos);
this.offsets = this.types[this.name].offsets;
}Mickey.prototype.types = {
"knight": {
caption: "♞"
, offsets: [
{ x: -2, y: -1 }
, { x: -1, y: -2 }
, { x: +2, y: -1 }
, { x: +1, y: -2 }
, { x: +2, y: +1 }
, { x: +1, y: +2 }
, { x: -2, y: +1 }
, { x: -1, y: +2 }
]
}
, "queen": {
caption: "♛"
, offsets: [
{x: 0, y: -1}
, {x: +1, y: 0}
, {x: 0, y: +1}
, {x: -1, y: 0}
, {x: -1, y: -1}
, {x: +1, y: -1}
, {x: +1, y: +1}
, {x: -1, y: +1}
]
}
, "rook": {
caption: "♜"
, offsets: [
{x: 0, y: -1}
, {x: +1, y: 0}
, {x: 0, y: +1}
, {x: -1, y: 0}
]
}
, "bishop": {
caption: "♝"
, offsets: [
{x: -1, y: -1}
, {x: +1, y: -1}
, {x: +1, y: +1}
, {x: -1, 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.arrow);
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() {
this.flags = {};
this.route = [];
if (this.search(this.pos, this.route)) {
var item = this.route.shift();
this.arrow = item.arrow;
this.move(item.pos);
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({pos: directions[min][i], arrow: min});
return true;
} // 回溯搜索
var k = Math.floor(Math.random() * this.offsets.length);
for (var i = 0; i < this.offsets.length; i++) {
var j = (k + i) % this.offsets.length;
var test = {
x: pos.x + this.offsets[j].x
, y: pos.y + this.offsets[j].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({pos: test, arrow: j});
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;
};调用示例：
new Box({
caption: "第一关(堵車)"
, rowCount: 7
, colCount: 7
, map: "\
0000000\
0000000\
0000000\
000r000\
0000000\
0000000\
0000000\
"});本作品受wujinjian2008n帖子的启发【散分】花了一晚上写了个JavaScript小游戏 

Answer 1

勉强支持换肤功能无图版
.table_back{width:320px;height:320px;}
.floor{border:1px solid black;cursor:pointer;}
.closed{background-color:#808080;cursor:default;}
.edge{border-color:#dfdfdf;}
.rook{background:yellow;cursor:default;}
.bishop{background:blue;cursor:default;}
.queen{background:green;cursor:default;}
.knight{background:#ff00ff;cursor:default;}图片 甲虫版。
.table_back{background:url(/Images/rounded_back.gif);}
.floor{background:url(/Images/rounded.gif);cursor:pointer;width:32px;height:32px;}
.closed{background-position:-96px 0;cursor:default;}
.edge{background-position:-64px 0;}
.rook{background-position:0 -32px;cursor:default;}
.rook0{background-position:0 -32px;cursor:default;}
.rook1{background-position:-32px -32px;cursor:default;}
.rook2{background-position:-64px -32px;cursor:default;}
.rook3{background-position:-96px -32px;cursor:default;}.bishop{background-position:-128px 0;cursor:default;}
.bishop0{background-position:-128px 0;cursor:default;}
.bishop1{background-position:-160px 0;cursor:default;}
.bishop2{background-position:-192px 0;cursor:default;}
.bishop3{background-position:-224px 0;cursor:default;}.queen{background-position:0 -64px;cursor:default;}
.queen0{background-position:0 -64px;cursor:default;}
.queen1{background-position:-32px -64px;cursor:default;}
.queen2{background-position:-64px -64px;cursor:default;}
.queen3{background-position:-96px -64px;cursor:default;}.queen4{background-position:-128px -64px;cursor:default;}
.queen5{background-position:-160px -64px;cursor:default;}
.queen6{background-position:-192px -64px;cursor:default;}
.queen7{background-position:-224px -64px;cursor:default;}.knight{background-position:-128px -32px;cursor:default;}
.knight0{background-position:-128px -32px;cursor:default;}
.knight1{background-position:-128px -32px;cursor:default;}
.knight2{background-position:-160px -32px;cursor:default;}
.knight3{background-position:-160px -32px;cursor:default;}
.knight4{background-position:-192px -32px;cursor:default;}
.knight5{background-position:-192px -32px;cursor:default;}
.knight6{background-position:-224px -32px;cursor:default;}
.knight7{background-position:-224px -32px;cursor:default;}

Answer 2

不错，貌似最近js游戏很火呀，我也写过一个俄罗斯方块，最近想到一个更简洁的算法，可惜一直没时间去实现，等这个周末搞个更简洁的出来。
http://topic.csdn.net/u/20090810/10/34063f92-9156-4a68-b37c-0973ca5eafb3.html

Answer 3

路过..
强大..
但是 CSDN告诉我
每天回帖即可获得10分可用分!

Answer 4

顶楼贴的就是。这就是调用的Demohttp://www.renrousousuo.com/Scripts/Rounded.html是纯网页，浏览器右键查看源代码就能看到。

Answer 5

.bishop{background-position:-128px 0;cursor:default;}
.bishop0{background-position:-128px 0;cursor:default;}
.bishop1{background-position:-160px 0;cursor:default;}
.bishop2{background-position:-192px 0;cursor:default;}
.bishop3{background-position:-224px 0;cursor:default;}.queen{background-position:0 -64px;cursor:default;}
.queen0{background-position:0 -64px;cursor:default;}
.queen1{background-position:-32px -64px;cursor:default;}
.queen2{background-position:-64px -64px;cursor:default;}
.queen3{background-position:-96px -64px;cursor:default;}