137行JS贪吃蛇

分享一个由137行Javascript完成的贪吃蛇游戏,保存成html文件就能玩。

firefox5.0/ie7,8,9运行正常。

练手成品。还是挺服自己当时那么闲。。。

<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 e = 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 e = 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>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值