纯js和css完成贪吃蛇小游戏demo
本文实例为大家分享了js贪吃蛇小游戏demo,纯js和css完成,供大家参考,具体内容如下
<!doctypehtml> <html> <metacharset="utf-8"> <head> <style> *{ margin:0; padding:0; } .content{ position:absolute; width:500px; height:500px; background-color:#212121; } .colo{ width:48px; height:48px; background-color:#E6E6E6; border:1pxsolid#466F85; float:left; } .head{ /*background-color:#49DF85;*/ background-image:url(./img/22.jpg); border-radius:10px; background-size:100%; position:absolute; height:48px; width:48px; } .fruit{ /*background-color:#49DF85;*/ background-image:url(./img/fruit.jpg); background-size:100%; position:absolute; height:48px; width:48px; } .score{ font-family:'黑体'; left:600px; position:absolute; height:50px; width:200px; background-color:#212121; color:#FFF; } .newbody{ position:absolute; width:48px; height:48px; background-image:url(./img/33.jpg); background-size:100%; } .btn{ font-family:'黑体'; left:600px; top:100px; position:absolute; height:50px; width:100px; background-color:#1193FF; color:#FFF; text-align:center; line-height:50px; font-size:20px; cursor:pointer; border-radius:15px; } </style> </head> <body> <divclass="content"id="content"> </div> <divclass="btn"id="stop">停止游戏</div> <divclass="btn"style="top:180px"id="start">开启游戏</div> <divclass="btn"style="top:380px"id="gameWay">游戏状态:</div> <divclass="score"id="score">分数:<p></p></div> <scripttype="text/javascript"> //添加状态 varstop=document.getElementById('stop'); varstart=document.getElementById("start"); vargameWay=document.getElementById('gameWay'); start.onclick=function(){ head.value='2'; incident=setInterval(move,200); } stop.onclick=function(){ clearInterval(incident); } // varcontent=document.getElementById("content"); for(vari=0;i<100;i++){ vardiv=document.createElement("div"); div.className="colo"; content.appendChild(div); } varscoreId=document.getElementById("score"); varscoreNum=0; varscoreCon=document.createElement("p"); //varscoreText=document.createTextNode(scoreNum); //scoreCon.appendChild(scoreText); scoreId.appendChild(scoreCon); varhead=null;//保存蛇头 varfruit=null;//保存果实 vardir=null;//保存蛇的方向 varbody=newArray();//保存蛇身体增加的部分 varbodyNum=0;//记录创建了多少个body //随机创建head和fruit到content里面 functioncreateType(type){ if(type==1){ //创建随机数 varrow=parseInt(Math.random()*6+2); varcol=parseInt(Math.random()*6+2); head=document.createElement("div"); head.className="head"; head.style.top=row*50+"px"; head.style.left=col*50+"px"; content.appendChild(head); //head.style.top=; //head.style.left=; } if(type==2){ //创建随机数 varrow=parseInt(Math.random()*6+2); varcol=parseInt(Math.random()*6+2); fruit=document.createElement("div"); fruit.className="fruit"; fruit.style.width="50"; fruit.style.height="50"; fruit.style.backgroundColor="#EA2000"; fruit.style.top=row*50+"px"; fruit.style.left=col*50+"px"; content.appendChild(fruit); } } //调用创建的道具方法 createType(1); createType(2); //蛇头移动函数 vardirection=newArray;//存每个新建Body的方向 //转换数 varnumss=0; //自动滑动事件 functionmove(){ if(head.value!=""){ switch(head.value){ case'1': head.style.top=head.offsetTop-50+"px"; break; case'2': head.style.top=head.offsetTop+50+"px"; break; case'3': head.style.left=head.offsetLeft-50+"px"; break; case'4': head.style.left=head.offsetLeft+50+"px"; break; } } console.log(head.offsetTop); if(head.offsetTop>500){ alert("超出边界!请重新游戏"); } //if(head==null){ //if(head.style.top<0||head.style.top>500||head.style.left<0||head.style.left>500){ //alert("超出边界!请重新游戏"); //} if(body.length!=0){ for(vari=body.length-1;i>=0;i--){ if(i==0){ body[0].value=head.value; }else{ body[i].value=body[i-1].value; } } } //转换方向 //如果成功吃掉果实后事件 if(head.style.top==fruit.style.top&&head.style.left==fruit.style.left){ varrow=parseInt(Math.random()*6+2); varcol=parseInt(Math.random()*6+2); fruit.style.top=row*50+"px"; fruit.style.left=col*50+"px"; //记录分数 scoreNum=scoreNum+1; document.getElementsByTagName('p')[0].innerText=""; document.getElementsByTagName('p')[0].innerText=scoreNum; //创建body部分 bodyAdd(head.style.top,head.style.left,head.value); } //控制body跟随head运动部分 //有身体的时候要动态改变body的值 if(body.length>0){ varbody01=document.getElementById('body01'); body01.style.top=head.offsetTop+"px"; body01.style.left=head.offsetLeft+"px"; switch(head.value){ case'1': body01.style.top=head.offsetTop+50+"px"; body01.style.left=head.offsetLeft+"px"; break; case'2': body01.style.top=head.offsetTop-50+"px"; body01.style.left=head.offsetLeft+"px"; break; case'3': body01.style.left=head.offsetLeft+50+"px"; body01.style.top=head.offsetTop+"px"; break; case'4': body01.style.left=head.offsetLeft-50+"px"; body01.style.top=head.offsetTop+"px"; break; } } if(body.length>1){ body[bodyNum-1].value=body[bodyNum-2].value; for(vari=1;i<body.length;i++){ varnu=i+1; varbodyId=document.getElementById('body0'+nu); varbody_Id=document.getElementById('body0'+i); bodyId.style.top=body_Id.offsetTop+"px"; bodyId.style.left=body_Id.offsetLeft+"px"; switch(body[bodyNum-(body.length-i)].value){ case'1': bodyId.style.top=body_Id.offsetTop+50+"px"; bodyId.style.left=body_Id.offsetLeft+"px"; break; case'2': bodyId.style.top=body_Id.offsetTop-50+"px"; bodyId.style.left=body_Id.offsetLeft+"px"; break; case'3': bodyId.style.left=body_Id.offsetLeft+50+"px"; bodyId.style.top=body_Id.offsetTop+"px"; break; case'4': bodyId.style.left=body_Id.offsetLeft-50+"px"; bodyId.style.top=body_Id.offsetTop+"px"; break; } } } } //创建按钮时间 document.onkeydown=function(){ varcode=event.keyCode; switch(code){ //向上 case38: head.value='1'; break; //向下 case40: head.value='2'; break; //向左 case37: head.value='3'; break; //向右 case39: head.value='4'; break; console.log(head.value); } } //身体增加事件 functionbodyAdd(top,left,dir){ if(dir!=""){ dir=dir; } else{ dir=head.value; } //首次创建body if(bodyNum==0){ varnewbody=document.createElement('div'); newbody.className="newbody"; newbody.id="body01"; switch(dir){ case'1': newbody.style.top=head.offsetTop-50+'px'; newbody.style.left=head.offsetLeft+"px"; break; case'2': newbody.style.top=head.offsetTop+50+'px'; newbody.style.left=head.offsetLeft+"px"; break; case'3': newbody.style.left=head.offsetLeft-50+'px'; newbody.style.top=head.offsetTop+"px"; break; case'4': newbody.style.left=head.offsetLeft+50+'px'; newbody.style.top=head.offsetTop+"px"; break; } content.appendChild(newbody); bodyNum=bodyNum+1; body.push(newbody); }else{ //第二次及多次创建 varnewbody=document.createElement('div'); newbody.className="newbody"; newbody.id="body0"+(body.length+1); switch(dir){ case'1': newbody.style.top=body[body.length-1].offsetTop-50+'px'; newbody.style.left=body[body.length-1].offsetLeft+"px"; break; case'2': newbody.style.top=body[body.length-1].offsetTop+50+'px'; newbody.style.left=body[body.length-1].offsetLeft+"px"; break; case'3': newbody.style.left=body[body.length-1].offsetLeft-50+'px'; newbody.style.top=body[body.length-1].offsetTop+"px"; break; case'4': newbody.style.left=body[body.length-1].offsetLeft+50+'px'; newbody.style.top=body[body.length-1].offsetTop+"px"; break; } content.appendChild(newbody); bodyNum=bodyNum+1; body.push(newbody); } //body.push(content); } //超出边界,重置信息事件 functioninitialize(){ //重置果实 varrow=parseInt(Math.random()*6+2); varcol=parseInt(Math.random()*6+2); fruit.style.top=row*50+"px"; fruit.style.left=col*50+"px"; //记录分数 document.getElementsByTagName('p')[0].innerText=""; //重置贪食蛇 } varincident; incident=setInterval(move,200); //附加操作 //varbtn=document.getElementById('btn'); //btn.onclick=function(){ //clearInterval(incident); //} // </script> </body> </html>
还在不断完善中,希望对大家的学习有所帮助。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。