HTML css js 贪吃蛇小游戏,纯js和css完成贪吃蛇小游戏demo

本文实例为大家分享了js贪吃蛇小游戏demo，纯js和css完成，供大家参考，具体内容如下

*{

margin: 0;

padding:0;

}

.content{

position: absolute;

width: 500px;

height: 500px;

background-color: #212121;

}

.colo{

width: 48px;

height: 48px;

background-color: #E6E6E6;

border: 1px solid #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;

}

停止游戏

开启游戏

游戏状态：

分数：

//添加状态

var stop=document.getElementById('stop');

var start=document.getElementById("start");

var gameWay=document.getElementById('gameWay');

start.οnclick=function(){

head.value='2';

incident=setInterval(move,200);

}

stop.οnclick=function(){

clearInterval(incident);

}

//

var content=document.getElementById("content");

for(var i=0;i<100;i++){

var div=document.createElement("div");

div.className="colo";

content.appendChild(div);

}

var scoreId=document.getElementById("score");

var scoreNum=0;

var scoreCon=document.createElement("p");

// var scoreText=document.createTextNode(scoreNum);

// scoreCon.appendChild(scoreText);

scoreId.appendChild(scoreCon);

var head=null; //保存蛇头

var fruit=null; //保存果实

var dir=null; //保存蛇的方向

var body=new Array(); //保存蛇身体增加的部分

var bodyNum=0; //记录创建了多少个body

//随机创建head和fruit到content里面

function createType(type){

if(type==1){

//创建随机数

var row = parseInt(Math.random() * 6 +2);

var col = 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){

//创建随机数

var row = parseInt(Math.random() * 6 +2);

var col = 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);

//蛇头移动函数

var direction=new Array; //存每个新建Body的方向

//转换数

var numss=0;

//自动滑动事件

function move(){

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(var i=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){

var row = parseInt(Math.random() * 6 +2);

var col = 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){

var body01=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(var i=1;i

var nu=i+1;

var bodyId=document.getElementById('body0'+nu);

var body_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.οnkeydοwn=function(){

var code=event.keyCode;

switch (code){

//向上

case 38:

head.value='1';

break;

//向下

case 40:

head.value='2';

break;

//向左

case 37:

head.value='3';

break;

//向右

case 39:

head.value='4';

break;

console.log(head.value);

}

}

//身体增加事件

function bodyAdd(top,left,dir){

if(dir!=""){

dir=dir;

}

else{

dir=head.value;

}

//首次创建body

if(bodyNum==0){

var newbody=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{

//第二次及多次创建

var newbody=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);

}

//超出边界，重置信息事件

function initialize(){

//重置果实

var row = parseInt(Math.random() * 6 +2);

var col = parseInt(Math.random() * 6 +2);

fruit.style.top=row*50+"px";

fruit.style.left=col*50+"px";

//记录分数

document.getElementsByTagName('p')[0].innerText="";

//重置贪食蛇

}

var incident;

incident=setInterval(move,200);

//附加操作

// var btn=document.getElementById('btn');

// btn.οnclick=function(){

// clearInterval(incident);

// }

//

还在不断完善中，希望对大家的学习有所帮助。

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