纯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>
还在不断完善中，希望对大家的学习有所帮助。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。