欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

純js和css完成貪吃蛇小游戲demo

 更新時間：2016年09月01日 11:32:19   作者：dexing07  
這篇文章主要為大家詳細(xì)介紹了純js和css完成貪吃蛇小游戲，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js貪吃蛇小游戲demo，純js和css完成，供大家參考，具體內(nèi)容如下

<!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">游戲狀態(tài)：</div>
<div class="score" id="score" >分?jǐn)?shù)：<p></p></div>
<script type="text/javascript" >
//添加狀態(tài)
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;  //記錄創(chuàng)建了多少個body
//隨機(jī)創(chuàng)建head和fruit到content里面

function createType(type){
    if(type==1){
      //創(chuàng)建隨機(jī)數(shù)
      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){
      //創(chuàng)建隨機(jī)數(shù)
      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);
    }
  }
//調(diào)用創(chuàng)建的道具方法
createType(1);
createType(2);
//蛇頭移動函數(shù)
var direction=new Array; //存每個新建Body的方向
//轉(zhuǎn)換數(shù)
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;
      }
    }
  }
  //轉(zhuǎn)換方向

  //如果成功吃掉果實后事件
  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";
      //記錄分?jǐn)?shù)
      scoreNum=scoreNum+1;
      document.getElementsByTagName('p')[0].innerText="";
      document.getElementsByTagName('p')[0].innerText=scoreNum;

      //創(chuàng)建body部分
      bodyAdd(head.style.top,head.style.left,head.value);
  }
  //控制body跟隨head運(yùn)動部分

     //有身體的時候要動態(tài)改變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;
      }
    }
   }
}





//創(chuàng)建按鈕時間
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;
  }
  //首次創(chuàng)建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{         
    //第二次及多次創(chuàng)建
    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";
    //記錄分?jǐn)?shù)
    document.getElementsByTagName('p')[0].innerText="";
    //重置貪食蛇


}
var incident;
incident=setInterval(move,200);
//附加操作
// var btn=document.getElementById('btn');
// btn.onclick=function(){
// clearInterval(incident);
// }

//

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

還在不斷完善中，希望對大家的學(xué)習(xí)有所幫助。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • js TextArea的選中區(qū)域處理

    js TextArea的選中區(qū)域處理

    js中對于TextArea的選中區(qū)域后進(jìn)行處理的代碼，需要的朋友可以參考下。
    2010-12-12
  • 深入了解javascript 數(shù)組的sort方法

    深入了解javascript 數(shù)組的sort方法

    在javascript中，數(shù)組對象有一個有趣的方法sort，它接收一個類型為函數(shù)的參數(shù)作為排序的依據(jù)。這意味著開發(fā)者只需要關(guān)注如何比較兩個值的大小，而不用管排序這件事內(nèi)部是如何實現(xiàn)的
    2018-06-06
  • 圖片上傳插件jquery.uploadify詳解

    圖片上傳插件jquery.uploadify詳解

    如果頁面沒有顯示“BROWSE”按鈕，則說明你的'uploader' : '<%=basePath%>images/uploadify.swf'配置不對，檢查下路徑是否正確
    2013-11-11
  • js+css簡單實現(xiàn)網(wǎng)頁換膚效果

    js+css簡單實現(xiàn)網(wǎng)頁換膚效果

    這篇文章主要介紹了js+css簡單實現(xiàn)網(wǎng)頁換膚效果的方法,涉及JavaScript響應(yīng)鼠標(biāo)事件動態(tài)遍歷及修改頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下
    2015-12-12
  • JavaScript刪除有序數(shù)組中的重復(fù)項

    JavaScript刪除有序數(shù)組中的重復(fù)項

    這篇文章主要介紹了JavaScript刪除有序數(shù)組中的重復(fù)項，主要解決有序數(shù)組?nums?，要求原地刪除重復(fù)出現(xiàn)的元素，使每個元素只出現(xiàn)一次，返回刪除后數(shù)組的新長的問題，下面實現(xiàn)操作，需要的小伙伴可以參考一下
    2022-03-03
  • 微信小程序 參數(shù)傳遞實例代碼

    微信小程序 參數(shù)傳遞實例代碼

    這篇文章主要介紹了微信小程序 參數(shù)傳遞實例代碼的相關(guān)資料,需要的朋友可以參考下
    2017-03-03
  • JavaScript實現(xiàn)動態(tài)增刪表格的方法

    JavaScript實現(xiàn)動態(tài)增刪表格的方法

    本篇文章主要介紹了JavaScript實現(xiàn)動態(tài)增刪表格，可以實現(xiàn)表格增加和刪除數(shù)據(jù)的功能，非常具有實用價值，有興趣的可以了解一下
    2017-03-03
  • 理解Javascript的動態(tài)語言特性

    理解Javascript的動態(tài)語言特性

    這篇文章主要介紹了理解Javascript的動態(tài)語言特性,需要的朋友可以參考下
    2015-06-06
  • 基于Bootstrap框架實現(xiàn)圖片切換

    基于Bootstrap框架實現(xiàn)圖片切換

    這篇文章主要介紹了基于Bootstrap框架實現(xiàn)圖片切換的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
    2017-03-03
  • JavaScript跨平臺的開源框架NativeScript

    JavaScript跨平臺的開源框架NativeScript

    本文給大家分享的是一款使用javascript來構(gòu)建跨平臺原生移動應(yīng)用的開源框架--NativeScript，可以使用JavaScript開發(fā)跨平臺、真正原生的iOS, Android 和 Windows 移動App。開發(fā)人員使用NativeScript提供的庫來構(gòu)建應(yīng)用UI，其抽象了各種原生平臺之間的不同。
    2015-03-03

最新評論