原生JavaScript实现贪吃蛇游戏

2023-07-12 20:31:05 191

本文实例为大家分享了JavaScript实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下

1.HTML部分，东西很少






贪吃蛇

2.JavaScript部分

vararrayBox=newArray();//存放单元格
vararraySnake=newArray();//存放蛇
varfood;//食物
varsnakeHead;//蛇头
varkey=true;//判断页面是否需要初始化
vartimekey;//运动定时器常量

functionnewGame(){
bgInit();
arrayBoxInit();
initSnake();
randomFood();
}

newGame();
document.onclick=function(){
if(key){
gameStart(arraySnake);
key=false;
}
}



//记录的单元格数组初始化
functionarrayBoxInit(){
for(vary=0;y<20;y++){
arrayBox[y]=newArray();
for(varx=0;x<20;x++){
arrayBox[y][x]=0;
}
}
}

//背景初始化
functionbgInit(){
vartable=document.createElement("table");
table.style="border-spacing:0px;border:1pxsolid#3c3c3c;margin:10%auto";
for(vary=0;y<20;y++){
vartr=document.createElement("tr");
for(varx=0;x<20;x++){
vartd="";
tr.innerHTML+=td;
}
table.appendChild(tr);
}
document.body.insertBefore(table,document.getElementsByTagName("script")[0]);
}

//初始化蛇
functioninitSnake(){
varx=Math.floor(Math.random()*20);
vary=Math.floor(Math.random()*20);
varinitA=document.getElementsByClassName("box-"+y+"-"+x)[0];
snakeHead=initA;//蛇头
varb=initBFn(x,y);
varinitB=document.getElementsByClassName(b)[0];
arraySnake.push(initB);
arraySnake.push(initA);
initA.style.backgroundColor="#9c9c9c";
initB.style.backgroundColor="#9c9c9c";
arrayBox[y][x]=1;
arrayBox[b.split("-")[1]][b.split("-")[2]]=1;
}

//初始化蛇身
functioninitBFn(x,y){
if(x!=19&&x!=0){
if(y!=19&&y!=0){
if(Math.random()>0.5){
if(Math.random()>0.5){
return"box-"+y+"-"+(x+1);
}else{
return"box-"+y+"-"+(x-1);
}
}else{
if(Math.random()>0.5){
return"box-"+(y+1)+"-"+x;
}else{
return"box-"+(y-1)+"-"+x;
}
}
}elseif(y==0){
if(Math.random()>0.5){
return"box-0-"+(x+1);
}else{
return"box-0-"+(x-1);
}
}elseif(y==19){
if(Math.random()>0.5){
return"box-19-"+(x+1);
}else{
return"box-19-"+(x-1);
}
}
}elseif(x==0){
if(y!=19&&y!=0){
if(Math.random()>0.5){
return"box-"+(y+1)+"-0";
}else{
return"box-"+(y-1)+"-0";
}
}elseif(y==0){
if(Math.random()>0.5){
return"box-1-0";
}else{
return"box-0-1";
}
}elseif(y==19){
if(Math.random()>0.5){
return"box-18-0";
}else{
return"box-19-1";
}
}
}elseif(x==19){
if(y!=19&&y!=0){
if(Math.random()>0.5){
return"box-"+(y+1)+"-19";

}else{
return"box-"+(y-1)+"-19";
}
}elseif(y==0){
if(Math.random()>0.5){
return"box-1-19";
}else{
return"box-0-18";
}
}elseif(y==19){
if(Math.random()>0.5){
return"box-18-19";
}else{
return"box-19-18";
}
}
}
}

//随机产生食物食物
functionrandomFood(){
varx=Math.floor(Math.random()*20);
vary=Math.floor(Math.random()*20);
if(!arrayBox[y][x]){
document.getElementsByClassName("box-"+y+"-"+x)[0].style="background-color:#9c9c9c;border-radius:50%";
arrayBox[y][x]=1;
food=document.getElementsByClassName("box-"+y+"-"+x)[0];
}else{
addSnakeLength();
}
}

//开始游戏
functiongameStart(arraySnake){
varAx=arraySnake[1].className.split("-")[2];
varAy=arraySnake[1].className.split("-")[1];
varBx=arraySnake[0].className.split("-")[2];
varBy=arraySnake[0].className.split("-")[1];
if(Ay==By){
if(Ax>Bx){
moveRight();
}else{
moveLeft()
}
}else{
if(Ay>By){
moveDown()
}else{
moveUp()
}
}
}


//初始化运动，（方向：右左上下）
functionmoveRight(){
timekey=setInterval(function(){
varnextBox=document.getElementsByClassName("box-"+arraySnake[arraySnake.length-1].className.split("-")[1]+"-"+(parseInt(arraySnake[arraySnake.length-1].className.split("-")[2])+1))[0];
if(nextBox){
arrayBox[arraySnake[arraySnake.length-1].className.split("-")[1]][(parseInt(arraySnake[arraySnake.length-1].className.split("-")[2])+1)]=1;
nextBox.style.backgroundColor="#9c9c9c";
arraySnake.push(nextBox);
arrayBox[arraySnake[0].className.split("-")[1]][arraySnake[0].className.split("-")[2]]=0;
arraySnake[0].style.backgroundColor="#fff";
arraySnake.shift();
eatFood();
}
},200);
}

functionmoveLeft(){
timekey=setInterval(function(){
varnextBox=document.getElementsByClassName("box-"+arraySnake[arraySnake.length-1].className.split("-")[1]+"-"+(parseInt(arraySnake[arraySnake.length-1].className.split("-")[2])-1))[0];
if(nextBox){
arrayBox[arraySnake[arraySnake.length-1].className.split("-")[1]][(parseInt(arraySnake[arraySnake.length-1].className.split("-")[2])-1)]=1;
nextBox.style.backgroundColor="#9c9c9c";
arraySnake.push(nextBox);
arrayBox[arraySnake[0].className.split("-")[1]][arraySnake[0].className.split("-")[2]]=0;
arraySnake[0].style.backgroundColor="#fff";
arraySnake.shift();
eatFood();
}
},200);
}

functionmoveUp(){
timekey=setInterval(function(){
varnextBox=document.getElementsByClassName("box-"+(parseInt(arraySnake[arraySnake.length-1].className.split("-")[1])-1)+"-"+arraySnake[arraySnake.length-1].className.split("-")[2])[0];
if(nextBox){
arrayBox[(parseInt(arraySnake[arraySnake.length-1].className.split("-")[1])-1)][arraySnake[arraySnake.length-1].className.split("-")[2]]=1;
nextBox.style.backgroundColor="#9c9c9c";
arraySnake.push(nextBox);
arrayBox[arraySnake[0].className.split("-")[1]][arraySnake[0].className.split("-")[2]]=0;
arraySnake[0].style.backgroundColor="#fff";
arraySnake.shift();
eatFood();
}
},200);
}

functionmoveDown(){
timekey=setInterval(function(){
varnextBox=document.getElementsByClassName("box-"+(parseInt(arraySnake[arraySnake.length-1].className.split("-")[1])+1)+"-"+arraySnake[arraySnake.length-1].className.split("-")[2])[0];
if(nextBox){
arrayBox[(parseInt(arraySnake[arraySnake.length-1].className.split("-")[1])+1)][arraySnake[arraySnake.length-1].className.split("-")[2]]=1;
nextBox.style.backgroundColor="#9c9c9c";
arraySnake.push(nextBox);
arrayBox[arraySnake[0].className.split("-")[1]][arraySnake[0].className.split("-")[2]]=0;
arraySnake[0].style.backgroundColor="#fff";
arraySnake.shift();
eatFood();
}
},200);
}

//键盘操作拐弯
document.addEventListener("keydown",function(e){
if(e.code=="ArrowDown"){
turnDown();
}elseif(e.code=="ArrowUp"){
turnUp();
}elseif(e.code=="ArrowLeft"){
turnLeft();
}elseif(e.code=="ArrowRight"){
turnRight();
}
},false);

//下拐
functionturnDown(){
if(arraySnake[arraySnake.length-1].className.split("-")[1]==arraySnake[arraySnake.length-2].className.split("-")[1]){
clearInterval(timekey);
moveDown();
}
}
//下拐
functionturnUp(){
if(arraySnake[arraySnake.length-1].className.split("-")[1]==arraySnake[arraySnake.length-2].className.split("-")[1]){
clearInterval(timekey);
moveUp();
}
}
//左拐
functionturnLeft(){
if(arraySnake[arraySnake.length-1].className.split("-")[2]==arraySnake[arraySnake.length-2].className.split("-")[2]){
clearInterval(timekey);
moveLeft();
}
}
//右拐
functionturnRight(){
if(arraySnake[arraySnake.length-1].className.split("-")[2]==arraySnake[arraySnake.length-2].className.split("-")[2]){
clearInterval(timekey);
moveRight();
}
}
//蛇吃食物
functioneatFood(){
vartemp=food;
if(arrayBox[food.className.split("-")[1]][food.className.split("-")[2]]==0){
randomFood();
addSnakeLength(temp);
}
}
//增加长度在蛇尾
functionaddSnakeLength(temp){
arraySnake.unshift(temp);
}

全程独自敲下来，敲了两个多小时，基本功能都实现了，由于没有参考任何东西，所以有很多很多需要优化的地方，点个赞吧

更多有趣的经典小游戏实现专题，分享给大家：

C++经典小游戏汇总

python经典小游戏汇总

python俄罗斯方块游戏集合

JavaScript经典游戏玩不停

java经典小游戏汇总

javascript经典小游戏汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

原生JavaScript实现贪吃蛇游戏

热门推荐

随机推荐