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

网络编程 2024/11/9 佚名

3 2 1

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

<!doctype html>
<html>
<meta charset="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: 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;
  }
</style>
</head>

<body>
<div class="content" id="content">


</div>
<div class="btn" id="stop">停止游戏</div>
<div class="btn" style="top:180px" id="start">开启游戏</div>
<div class="btn" style="top:380px" id="gameWay">游戏状态：</div>
<div class="score" id="score" >分数：<p></p></div>
<script type="text/javascript" >
//添加状态
var stop=document.getElementById('stop');
var start=document.getElementById("start");
var gameWay=document.getElementById('gameWay');
start.onclick=function(){
  head.value='2';
  incident=setInterval(move,200);
}
stop.onclick=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<body.length;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.onkeydown=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.onclick=function(){
// clearInterval(incident);
// }

//

</script>
 </body>
</html>

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

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

js,贪吃蛇,小游戏

标签：

js,贪吃蛇,小游戏

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“纯js和css完成贪吃蛇小游戏demo”

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

暂无“纯js和css完成贪吃蛇小游戏demo”评论...

www.imxmx.com 杰晶网络

8,675无损音乐

1,324高清电影

213破解软件

120,141站长资源

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

js,贪吃蛇,小游戏

js实现文字超出部分用省略号代替实例代码

在web中js实现类似excel的表格控件

评论“纯js和css完成贪吃蛇小游戏demo”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

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

js,贪吃蛇,小游戏

js实现文字超出部分用省略号代替实例代码

在web中js实现类似excel的表格控件

评论“纯js和css完成贪吃蛇小游戏demo”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存