33,010
社区成员
发帖
与我相关
我的任务
分享
<!doctype html><html><head><title>贪吃蛇</title>
<style type='text/css'>
html, body, *{ font-family:"微软雅黑", "宋体"; font-size:13px;}
input{ width:60px; }
#map{ margin-top:20px;}
#map table caption{ line-height:30px; height:30px; text-align:center; font-weight:bold; }
#map table{ border-collapse:collapse; border:1px solid #069; }
#map table td {border:1px solid #069; width:30px; height:30px; }
#map table .sel {background:#069; color:#fff; }
#map table td div{ line-height:30px; text-align:center;}
</style>
<script type="text/javascript">
var dft = [ [7, 0, 4,18],
[4, 0, 1, 1],
[15,7,11,-1],
[0,12,-2, 0]];
var row, col, data, start, end, delay = 100;
function $(id){
return document.getElementById(id);
}
function create(){
row = parseInt($("row").value);
col = parseInt($("col").value);
var html = ["<h3></h3><table cellpadding='0' cellspacing='0' border='1'><caption></caption>"];
html.push( new Array(row+1).join("<tr>" + new Array(col+1).join("<td><div contenteditable='true'></div></td>") + "</tr>") )
html.push("</table>");
$("map").innerHTML = html.join("");
if(row == 4 && col == 4){
var div = $("map").getElementsByTagName("div");
for(var i = 0; i < div.length; i++){
div[i].innerHTML = dft[parseInt(i/4)][i%4];
}
}
}
function getData(){
var div = $("map").getElementsByTagName("div");
table = $("map").getElementsByTagName("table")[0];
data = [], start = [], end = [];
for(var i = 0; i < row; i++){
data[i] = [];
for(var j = 0; j < col; j++){
data[i][j] = {value: parseInt(div[i*col+j].innerHTML), flag: 0};
if(data[i][j].value == -1) start = [i, j];
if(data[i][j].value == -2) end = [i, j];
}
}
if(start.length == 0 || end.length == 0){
alert("未设置起点或终点!"); return false;
}
return true;
}
function search(){
if(!getData()) return;
var result = [], max = 0, len = 0, path = [];
(function snake(i, j){
//检测是否结束
if(data[i][j].value == -2){
if(len > max){
max = len;
for(var n = 0; n < path.length; n++){
result[n] = path[n].slice(0);
}
result.push([i, j]);
}
}else{
path.push([i, j]);
data[i][j].flag = 1;
if(data[i][j].value > 0){
len += data[i][j].value;
}
if(i > 0 && data[i-1][j].value != 0 && data[i-1][j].flag == 0){ //上
snake(i-1, j);
}
if(i + 1 < row && data[i+1][j].value != 0 && data[i+1][j].flag == 0){ //下
snake(i+1, j);
}
if(j > 0 && data[i][j-1].value != 0 && data[i][j-1].flag == 0){ //左
snake(i, j-1);
}
if(j + 1 < col && data[i][j+1].value != 0 && data[i][j+1].flag == 0){ //右
snake(i, j+1);
}
data[i][j].flag = 0;
path.pop();
if(data[i][j].value > 0){
len -= data[i][j].value;
}
}
})(start[0], start[1]);
table.getElementsByTagName("caption")[0].innerHTML = max;
(function show(i){
table.rows[result[i][0]].cells[result[i][1]].className = "sel";
if(i + 1 < result.length){
setTimeout(function(){ show(i+1) }, delay);
}
})(0);
}
</script></head><body>
行:<input type="text" value='4' id="row" /> 列:<input type="text" value='4' id="col" />
<input type="button" value="建图" onclick="create()" /> <input type="button" value="搜索" onclick="search()" />
<div id="map"></div>
</body></html>