全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>贪吃蛇</title>
<style type="text/css">
table{
border-collapse: collapse;
background-image: url('img/3.jpeg');
background-repeat: no-repeat;
background-size: 100%;
}
td{
height: 20px;
width: 20px;
border: 1px ;
}
.red{
background-color: blue;
}
.green{
background-color: yellow;
}
</style>
</head>
<body>
<table id="tb1" align="center">
</table>
<p style="text-align: center;">按↑,←,→开始游戏</p>
<p style="text-align: center;">按 空格 暂停</p>
<script src="js/jquery-3.6.3.js" type="text/javascript"></script>
<script type="text/javascript">
//init a space to active
var x=20;
var y=20;
for(var i=0;i<x;i++){
var tr="<tr>";
for(var j=0;j<y;j++){
tr+="<td></td>";
}
tr+="</tr>";
$("#tb1").append(tr);
}
//init a snack
var arr=[[13,10],[12,10],[11,10],[10,10]];
var render=function(){
$("td").removeClass("red");
$.each(arr,function(i,v){
var x1=v[0];
var y1=v[1];
$("tr:eq("+x1+") td:eq("+y1+")").addClass("red");
});
};
var self =function(a,b){
$.each(arr,function(i,v){
if(v[0]===a&&v[1]===b){
if(confirm("game over")){
window.location.reload();
}
}
});
}
setInterval(render,100);
var f=0;
var move=function(){
if(f==39){
arr.splice(0,1);
var l=arr.length;
if(arr[l-1][1]===19){
if(confirm("game over")){
window.location.reload();
}
}
self(arr[l-1][0],arr[l-1][1]+1);
if(arr[l-1][0]===randomx&&arr[l-1][1]===randomy){
arr.splice(l,0,[randomx,randomy+1]);
$("tr:eq("+randomx+") td:eq("+randomy+")").removeClass("green");
random();
}
arr[arr.length]=[arr[l-1][0],arr[l-1][1]+1];
}
else if(f==40){
arr.splice(0,1);
var l=arr.length;
if(arr[l-1][0]===19){
if(confirm("game over")){
window.location.reload();
}
}
self(arr[l-1][0]+1,arr[l-1][1]);
if(arr[l-1][0]===randomx&&arr[l-1][1]===randomy){
arr.splice(l,0,[randomx+1,randomy]);
$("tr:eq("+randomx+") td:eq("+randomy+")").removeClass("green");
random();
}
arr[arr.length]=[arr[l-1][0]+1,arr[l-1][1]];
}
else if(f==38){
arr.splice(0,1);
var l=arr.length;
if(arr[l-1][0]===0){
if(confirm("game over")){
window.location.reload();
}
}
self(arr[l-1][0]-1,arr[l-1][1]);
if(arr[l-1][0]===randomx&&arr[l-1][1]===randomy){
arr.splice(l,0,[randomx-1,randomy]);
$("tr:eq("+randomx+") td:eq("+randomy+")").removeClass("green");
random();
}
arr[arr.length]=[arr[l-1][0]-1,arr[l-1][1]];
}
else if(f==37){
arr.splice(0,1);
var l=arr.length;
if(arr[l-1][1]===0){
if(confirm("game over")){
window.location.reload();
}
}
self(arr[l-1][0],arr[l-1][1]-1);
if(arr[l-1][0]===randomx&&arr[l-1][1]===randomy){
arr.splice(l,0,[randomx,randomy-1]);
$("tr:eq("+randomx+") td:eq("+randomy+")").removeClass("green");
random();
}
arr[arr.length]=[arr[l-1][0],arr[l-1][1]-1];
}
}
setInterval(move,200);
var randomx = parseInt (Math.random( )*20) ;
var randomy = parseInt (Math.random( )*20) ;
$("tr:eq("+randomx+") td:eq("+randomy+")").addClass("green");
var random=function(){
randomx = parseInt (Math.random( )*20) ;
randomy = parseInt (Math.random( )*20) ;
$("tr:eq("+randomx+") td:eq("+randomy+")").addClass("green");}
$("body").on("keydown",function(e){
if(e.keyCode===37&&f!=39){//left
f=e.keyCode;
}else if(e.keyCode===38&&f!=40){//up
f=e.keyCode;
}else if(e.keyCode===39&&f!=39){//right
f=e.keyCode;
}else if(e.keyCode===40&&f!=38&&f!=0){//down
f=e.keyCode;
}else if(e.keyCode===32&&f!=0){//parse
f=e.keyCode;
}
});
</script>
</body>
</html>