upgrade2022

分支 (2)

管理

管理

upgrade2022

master

Crivia
/
snake.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table>
<tr>
<td rowspan="3">
<canvas id="x" style="border:1px #f00 solid; height:375px; width:750px"></canvas>
</td>
<td style="width:120px">1</td>
<td style="width:120px;background-color:#eef" onclick="window.ag=3;">2</td>
<td style="width:120px">3</td>
</tr>
<tr>
<td style="width:120px;background-color:#eef" onclick="window.ag=2;">4</td>
<td style="width:120px" onclick="window.isParse=window.isParse==0?1:0;">5</td>
<td style="width:120px;background-color:#eef" onclick="window.ag=0;">6</td>
</tr>
<tr>
<td style="width:120px">7</td>
<td style="width:120px;background-color:#eef" onclick="window.ag=1;">8</td>
<td style="width:120px">9</td>
</tr>
</table>
<script>
function Cell(c,r,t){
	this.c=c;
	this.r=r;
	this.t=t;
}
window.t=[];
window.maxC=27;
window.maxR=17;
for(var c=1;c<=window.maxC;c++){
	window.t[c]=[];
	for(var r=1;r<=window.maxR;r++){
		var e=new Cell(c,r,0);
		window.t[c][r]=e;
	}
}
window.head=new Cell(10,10,1);
window.bodys=[];
function up(){
	var e=new Cell(window.head.c,window.head.r,3);
	window.bodys[window.bodys.length]=e;
}
window.eggs=[];
up();
window.ag=0;
window.isParse=0;
function move(){
	if(!!window.isParse)return;
	if(ag==3){
		if(window.head.r>1){
			pushBody();
			window.head.r--;
		}else{
			window.isDie=true;
		}
	}else if(ag==2){
		if(window.head.c>1){
			pushBody();
			window.head.c--;
		}else{
			window.isDie=true;
		}
	}else if(ag==1){
		if(window.head.r<window.maxR){
			pushBody();
			window.head.r++;
		}else{
			window.isDie=true;
		}
	}else if(ag==0){
		if(window.head.c<window.maxC){
			pushBody();
			window.head.c++;
		}else{
			window.isDie=true;
		}
	}
	for(var k=0;k<window.eggs.length;k++){
		if(!!!window.isDie
		&&window.head.c==window.eggs[k].c
		&&window.head.r==window.eggs[k].r){
			window.isDie=true;
		}
	}
	if(!!!window.isDie
	&&window.food instanceof Cell
	&&window.head.c==window.food.c
	&&window.head.r==window.food.r){
		up();
		createFood();
	}
}
function pushBody(){
	for(var k=window.bodys.length-1;k>0;k--){
		if(window.bodys[k].t==3){
			window.bodys[k].t=2;
			var e=new Cell(window.bodys[k].c,window.bodys[k].r,6);
			window.eggs[window.eggs.length]=e;
		}else if(window.bodys[k].t==2){
			window.bodys[k].c=window.bodys[k-1].c;
			window.bodys[k].r=window.bodys[k-1].r;
		}
	}
	if(window.bodys[0].t==3){
		window.bodys[0].t=2;
	}else if(window.bodys[0].t==2){
		window.bodys[0].c=window.head.c;
		window.bodys[0].r=window.head.r;
	}
}
document.onkeydown=function(e){
	if(' '==e.key){window.isParse=!window.isParse;}
	else if('w'==e.key){
		if(window.ag==3)move();
		else if(window.ag==2||window.ag==0)window.ag=3;
	}else if('a'==e.key){
		if(window.ag==2)move();
		else if(window.ag==3||window.ag==1)window.ag=2;
	}else if('s'==e.key){
		if(window.ag==1)move();
		else if(window.ag==2||window.ag==0)window.ag=1;
	}else if('d'==e.key){
		if(window.ag==0)move();
		else if(window.ag==3||window.ag==1)window.ag=0;
	}
}
function createFood(){
	while((function(){
		if(!window.food||!window.food instanceof Cell)return true;
		if(window.head.c==window.food.c&&window.head.r==window.food.r)return true;
		for(var k=0;k<window.bodys.length;k++){
			if(window.bodys[k].c==window.food.c&&window.bodys[k].r==window.food.r)return true;
		}
		for(var k=0;k<window.eggs.length;k++){
			if(window.eggs[k].c==window.food.c&&window.eggs[k].r==window.food.r)return true;
		}
	})()){
		window.food=new Cell(
				1+window.parseInt(window.maxC*Math.random())
				,1+window.parseInt(window.maxR*Math.random())
				,5);
	}
}
createFood();
window.x=document.getElementById('x');
window.setInterval(function(){
	window.xx=window.x.getContext('2d');
	if(!!window.isDie){
		window.xx.fillStyle='#f00';
		window.xx.fillText('GAME OVER',10,10);
		return;
	}
	window.xx.clearRect(0,0,999,999);
	for(var c=1;c<=window.maxC;c++){
		for(var r=1;r<=window.maxR;r++){
			window.xx.fillStyle='#eee';
			window.xx.fillRect(8*c,8*r,7,7);
		}
	}
	for(var k=0;k<window.bodys.length;k++){
		window.xx.fillStyle='#faa';
		window.xx.fillRect(8*window.bodys[k].c,8*window.bodys[k].r,7,7);
	}
	for(var k=0;k<window.eggs.length;k++){
		window.xx.fillStyle='#777';
		window.xx.fillRect(8*window.eggs[k].c,8*window.eggs[k].r,7,7);
	}
	window.xx.fillStyle='#77f';
	window.xx.fillRect(8*window.food.c,8*window.food.r,7,7);
	window.xx.fillStyle='#f77';
	window.xx.fillRect(8*window.head.c,8*window.head.r,7,7);
},10);
window.setInterval(move,500);
document.getElementById('x').onmousemove=function(e){return;
	var s='X='+e.clientX+'/Y='+e.clientY+';';
	if(e.clientX<370&&e.clientY>150&&e.clientY<230){s+='LEFT';window.ag=2;}
	else if(e.clientX>410&&e.clientY>100&&e.clientY<300){s+='RIGHT';window.ag=0;}
	else if(e.clientY<180&&e.clientX>90&&e.clientX<290){s+='UP';window.ag=3;}
	else if(e.clientY>200&&e.clientX>90&&e.clientX<290){s+='DOWN';window.ag=1;}
	document.getElementById('msg').innerHTML=s+' >>> A='+window.ag;
};
</script>
<br><span id="msg"></span>
</body>
</html>