137行的贪吃蛇JS代码
2012-03-15 17:50 javaspring 阅读(212) 评论(0) 编辑 收藏 举报
<title>SNAKE</title>
<style>div{margin :1px;width:19px;height:19px;position:absolute;}
p{color:red}#fo{background:#00FF00;}</style>
<script language="javascript" type="text/javascript">
var times = 5;
var state = 0; //0=stop;1=start;2=pause;3=dead;
var STEP = 20; //常量:移动步长
var dir = "R"; //U=up;R=right;D=down;L=left移动方向 默认向右
var height = 400;
var width = 300;
var nodes = new Array();
var ids = new Array();
var ft;
var fo,loc,info,head,sta;
function tCheck(d, nodes) { //touchCheck
var x = parseInt(d.style.left);
var y = parseInt(d.style.top);
var r=20;
if(x<10)return true;
if(x>width-70)return true;
if(y<10)return true;
if(y>height-70)return true;
for ( var i = 0; i < nodes.length; i++) {
var xx = nodes[i][0];var yy = nodes[i][1];
if(((x<xx&&x+r>xx)||(x>xx&&x<xx+r))&&((y<yy&&y+r>yy)||(y>yy&&y<yy+r)))
return true;
}
}
function eCheck(){
var r = 20; //方块大小
var x = parseInt(head.style.left);
var y = parseInt(head.style.top);
var xx = parseInt(fo.style.left);
var yy = parseInt(fo.style.top);
if(((x<xx&&x+r>xx)||(x>xx&&x<xx+r))&&((y<yy&&y+r>yy)||(y>yy&&y<yy+r)))
return true;
return false;
}
function doMove() {
var left = parseInt(head.style.left);
var top = parseInt(head.style.top);
dir=="U"?(head.style.top=top - STEP):dir=="D"?(head.style.top=top + STEP):dir=="R"?(head.style.left=left + STEP):dir=="L"?(head.style.left=left - STEP):true;
if (tCheck(head, nodes)) { //发生碰撞
aoClear();clearTimeout(ft);
state = 3;
info.style.fontSize="65";
sta.innerHTML = "F5:REPLAY";
info.innerHTML="OVER";
}
nodes[0]=[top,left];
if(eCheck()){
var n = document.createElement("div");
n.id="node"+nodes.length;
loc.appendChild(n);
n.style.backgroundColor="gray";
n.style.left=left; n.style.top=top;
nodes[nodes.length]=[top,left];
info.innerHTML="Level:"+parseInt((nodes.length+10)/10)+" Score:"+nodes.length*100;
clearTimeout(ft);
showFood();
}
for(var n = nodes.length-1; n>0; n--){
nodes[n][0]=nodes[n-1][0];
nodes[n][1]=nodes[n-1][1];
var no = document.getElementById("node"+n);
no.style.top = nodes[n][0];
no.style.left = nodes[n][1];
}
}
function doMain(keyCode) {
if (state ==0 && keyCode == 13) { //enter
sta.innerHTML = "Playing.Space:PAUSE";
state = 1;showFood();aoRun();
} else if (state == 1 && keyCode == 32) { //space暂停
sta.innerHTML = "Pausing.Space:START.";
state = 2;
} else if (state == 2 && keyCode == 32) { //开始
sta.innerHTML = "Playing.Space:PAUSE";
state = 1;
} else if (state != 0 && keyCode == 27) { //esc
state = 0;aoClear();
sta.innerHTML = "F5:REPLAY";
} else if (state == 0) {
sta.innerHTML = "Enter:START";
return;
}
if (state == 1) {
dir = keyCode=="37"?"L":keyCode=="39"?"R":keyCode=="38"?"U":keyCode=="40"?"D":dir;
doMove();
}
}
function showFood() {
clearTimeout(ft);
fo.style.top = ran(height-100)+50;
fo.style.left = ran(width-100)+50;
ft = setTimeout(showFood,5000);
}
function aoRun(){
var top = parseInt(head.style.top);
var left = parseInt(head.style.left);
times = dir=="U"?parseInt(top/STEP)+1:dir=="R"?parseInt((width-left)/STEP)+1:dir=="D"?parseInt((height-top)/STEP)+1:dir=="L"?parseInt(left/STEP)+1:5;
var interval = parseInt((nodes.length+10)/10); //分流5级 。500-N*95
for ( var i = 0; i < times; i++)
ids[i] = setTimeout("if(state==1)doMove()", (500-interval*95)*i); //500=0.5s run a time [0.025<X]
}
function aoClear(){
for ( var i = 0; i < times; i++)
clearTimeout(ids[i]);
}
function ran(range) {
return parseInt(Math.random() * range);
}
window.onload = function() {
height = document.body.clientHeight;
width = document.body.clientWidth;
document.body.innerHTML = "<div id='loc' style='background-color:black;height:"+(height-40)+"px;width:"+(width-40)
+"px;top:10;left:10;border: 5px ridge blue;'><p id='state'>Enter:START</p><p id='info'>Level:1 Score:100</p>"
+ "<div id='fo'></div><div id='head' style='background-color:white;left:100px;top:100px'></div></div>";
nodes[0]=[100,100];
fo = document.getElementById("fo");
loc = document.getElementById("loc");
info = document.getElementById("info");
head = document.getElementById("head");
sta = document.getElementById("state");
}
document.onkeyup = function(e){
var ee = e || event;
var keyCode = e.keyCode ? e.keyCode : e.which;
if(state==1 && (keyCode==37||keyCode==38||keyCode==39||keyCode==40||keyCode==32))aoRun();
}
document.onkeydown = function keyContent(e) {
var ee = e || event;
var keyCode = e.keyCode ? e.keyCode : e.which;
if(keyCode==37||keyCode==38||keyCode==39||keyCode==40||keyCode==32)aoClear();
doMain(keyCode);
}
</script>
<style>div{margin :1px;width:19px;height:19px;position:absolute;}
p{color:red}#fo{background:#00FF00;}</style>
<script language="javascript" type="text/javascript">
var times = 5;
var state = 0; //0=stop;1=start;2=pause;3=dead;
var STEP = 20; //常量:移动步长
var dir = "R"; //U=up;R=right;D=down;L=left移动方向 默认向右
var height = 400;
var width = 300;
var nodes = new Array();
var ids = new Array();
var ft;
var fo,loc,info,head,sta;
function tCheck(d, nodes) { //touchCheck
var x = parseInt(d.style.left);
var y = parseInt(d.style.top);
var r=20;
if(x<10)return true;
if(x>width-70)return true;
if(y<10)return true;
if(y>height-70)return true;
for ( var i = 0; i < nodes.length; i++) {
var xx = nodes[i][0];var yy = nodes[i][1];
if(((x<xx&&x+r>xx)||(x>xx&&x<xx+r))&&((y<yy&&y+r>yy)||(y>yy&&y<yy+r)))
return true;
}
}
function eCheck(){
var r = 20; //方块大小
var x = parseInt(head.style.left);
var y = parseInt(head.style.top);
var xx = parseInt(fo.style.left);
var yy = parseInt(fo.style.top);
if(((x<xx&&x+r>xx)||(x>xx&&x<xx+r))&&((y<yy&&y+r>yy)||(y>yy&&y<yy+r)))
return true;
return false;
}
function doMove() {
var left = parseInt(head.style.left);
var top = parseInt(head.style.top);
dir=="U"?(head.style.top=top - STEP):dir=="D"?(head.style.top=top + STEP):dir=="R"?(head.style.left=left + STEP):dir=="L"?(head.style.left=left - STEP):true;
if (tCheck(head, nodes)) { //发生碰撞
aoClear();clearTimeout(ft);
state = 3;
info.style.fontSize="65";
sta.innerHTML = "F5:REPLAY";
info.innerHTML="OVER";
}
nodes[0]=[top,left];
if(eCheck()){
var n = document.createElement("div");
n.id="node"+nodes.length;
loc.appendChild(n);
n.style.backgroundColor="gray";
n.style.left=left; n.style.top=top;
nodes[nodes.length]=[top,left];
info.innerHTML="Level:"+parseInt((nodes.length+10)/10)+" Score:"+nodes.length*100;
clearTimeout(ft);
showFood();
}
for(var n = nodes.length-1; n>0; n--){
nodes[n][0]=nodes[n-1][0];
nodes[n][1]=nodes[n-1][1];
var no = document.getElementById("node"+n);
no.style.top = nodes[n][0];
no.style.left = nodes[n][1];
}
}
function doMain(keyCode) {
if (state ==0 && keyCode == 13) { //enter
sta.innerHTML = "Playing.Space:PAUSE";
state = 1;showFood();aoRun();
} else if (state == 1 && keyCode == 32) { //space暂停
sta.innerHTML = "Pausing.Space:START.";
state = 2;
} else if (state == 2 && keyCode == 32) { //开始
sta.innerHTML = "Playing.Space:PAUSE";
state = 1;
} else if (state != 0 && keyCode == 27) { //esc
state = 0;aoClear();
sta.innerHTML = "F5:REPLAY";
} else if (state == 0) {
sta.innerHTML = "Enter:START";
return;
}
if (state == 1) {
dir = keyCode=="37"?"L":keyCode=="39"?"R":keyCode=="38"?"U":keyCode=="40"?"D":dir;
doMove();
}
}
function showFood() {
clearTimeout(ft);
fo.style.top = ran(height-100)+50;
fo.style.left = ran(width-100)+50;
ft = setTimeout(showFood,5000);
}
function aoRun(){
var top = parseInt(head.style.top);
var left = parseInt(head.style.left);
times = dir=="U"?parseInt(top/STEP)+1:dir=="R"?parseInt((width-left)/STEP)+1:dir=="D"?parseInt((height-top)/STEP)+1:dir=="L"?parseInt(left/STEP)+1:5;
var interval = parseInt((nodes.length+10)/10); //分流5级 。500-N*95
for ( var i = 0; i < times; i++)
ids[i] = setTimeout("if(state==1)doMove()", (500-interval*95)*i); //500=0.5s run a time [0.025<X]
}
function aoClear(){
for ( var i = 0; i < times; i++)
clearTimeout(ids[i]);
}
function ran(range) {
return parseInt(Math.random() * range);
}
window.onload = function() {
height = document.body.clientHeight;
width = document.body.clientWidth;
document.body.innerHTML = "<div id='loc' style='background-color:black;height:"+(height-40)+"px;width:"+(width-40)
+"px;top:10;left:10;border: 5px ridge blue;'><p id='state'>Enter:START</p><p id='info'>Level:1 Score:100</p>"
+ "<div id='fo'></div><div id='head' style='background-color:white;left:100px;top:100px'></div></div>";
nodes[0]=[100,100];
fo = document.getElementById("fo");
loc = document.getElementById("loc");
info = document.getElementById("info");
head = document.getElementById("head");
sta = document.getElementById("state");
}
document.onkeyup = function(e){
var ee = e || event;
var keyCode = e.keyCode ? e.keyCode : e.which;
if(state==1 && (keyCode==37||keyCode==38||keyCode==39||keyCode==40||keyCode==32))aoRun();
}
document.onkeydown = function keyContent(e) {
var ee = e || event;
var keyCode = e.keyCode ? e.keyCode : e.which;
if(keyCode==37||keyCode==38||keyCode==39||keyCode==40||keyCode==32)aoClear();
doMain(keyCode);
}
</script>