js écrivant des compétences mini game_javascript 'Snake'-js tutoriel-php.cn

Souvenirs d'enfance de Snake, je viens d'apprendre ça aujourd'hui, donc je viens d'en faire un, donc je l'ai appris aussi, les connaissances que je dois maîtriser :

　1. Maîtrise des fonctions JS,

2. Application du tableau JS,

3. Apprendre une petite partie de JS et AJAX

4. Application des fonctions d'épissure, de décalage et autres dans JS,

C’est essentiellement ça. Voici les points clés :
La page d'accueil peut être mise en page par elle-même. Je fournis ma propre mise en page ici :
.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">                     
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>贪吃蛇</title>
  <link rel="stylesheet" type="text/css" href="./css.css">
  <script type="text/javascript" src="./jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="./js.js"></script>
</head>
<body>
  <div id="info">  
    <div id="score">0</div>
    <form action="" id="form" name="form">
      <input type="radio" name='time' value="500" checked='checked'/>简单
      <input type="radio" name='time' value="300"/>中等
      <input type="radio" name='time' value="150"/>高级
      <input type="radio" name='time' value="50"/>神速
      <input type="button" value="开始" class="button" id="start"/>
      <input type="button" value="重玩" class="button" id="res"/> 
    </form>
     
  </div>
  <div id="main">
    <div id="home">
      <!--<div style="background:url(./images/snake0.png) no-repeat;"></div>
      <div style="background:url(./images/snake1.png) no-repeat; left:20px;"></div>
      <div style="background:url(./images/snake2.png) no-repeat; left:40px;"></div>
      <div style="background:url(./images/snake3.png) no-repeat; left:60px;"></div>-->
    </div>
    <div class="wall left"></div>
    <div class="wall right"></div>
    <div class="wall top"></div>
    <div class="wall bottom"></div>
  </div>                            
</body> 
</html>

Copier après la connexion

Voici le code css :

*{padding: 0px; margin: 0px;font-size: 12px}
body{background: #ccc}
input.button{
  width: 60px;
  cursor: pointer;
}
#info{
  width: 540px;
  height: 30px;
  margin: 30px auto 5px;
  line-height: 30px;
}
#score{
  width: 73px;
  height: 28px;
  padding-left: 64px;
  background: url(./images/score.png) no-repeat;
  float: left;
  font-size: 14px;
  font-weight: 700;
  font-style:italic;
  font-family: '微软雅黑';
}
#form{
  float: right;
}
#form input{
  vertical-align: middle;
  margin-right: 5px;
}
#main{
  width: 540px;
  height: 500px;
  margin: 0 auto;
  position: relative;
  /*background: #71a000*/
 
}
#main div{
  width: 20px;
  height: 20px;
  position: absolute;
}
#main #home{
  width: 500px;
  height: 460px;
  left: 20px;
  top: 20px;
  position: relative;
  background: url(./images/background.jpg) no-repeat;
}
#main #home div{
  position: absolute;
}
#main div.wall{
  width: 540px;
  height: 20px;
  background: url("./images/div.jpg") repeat-x;
  position: absolute;
}
#main div.top{
  left:0px;
  top:0px;
}
 
#main div.bottom{
  left:0px;
  top:480px;
}
#main div.left{
  width: 20px;
  height: 500px;
  background: url(./images/div.jpg) repeat-y;
  left:0px;
  top:0px;
}
#main div.right{
  width: 20px;
  height: 500px;
  background: url(./images/div.jpg) repeat-y;
  left:520px;
  top:0px;
}
 
.l{
  -moz-transform:rotate(0deg);  
  -o-transform:rotate(0deg);
  -webkit-transform:rotate(0deg);
  transform:rotate(0deg);
  /* IE8+ - must be on one line, unfortunately */  
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";   
  /* IE6 and 7 */ 
  filter: progid:DXImageTransform.Microsoft.Matrix(      M11=1,      M12=0,      M21=0,      M22=1,      SizingMethod='auto expand');
}
.t{
  -moz-transform:  rotate(90deg);   -o-transform:   rotate(90deg);   -webkit-transform: rotate(90deg);   transform:     rotate(90deg);
  /* IE8+ - must be on one line, unfortunately */  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1.8369701987210297e-16, M12=-1, M21=1, M22=-1.8369701987210297e-16, SizingMethod='auto expand')";   /* IE6 and 7 */  filter: progid:DXImageTransform.Microsoft.Matrix(      M11=-1.8369701987210297e-16,      M12=-1,      M21=1,      M22=-1.8369701987210297e-16,      SizingMethod='auto expand');
 
}
.r{
  -moz-transform:  rotate(180deg);   -o-transform:   rotate(180deg);   -webkit-transform: rotate(180deg);   transform:     rotate(180deg);
   /* IE8+ - must be on one line, unfortunately */  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=1.2246467991473532e-16, M21=-1.2246467991473532e-16, M22=-1, SizingMethod='auto expand')";   /* IE6 and 7 */  filter: progid:DXImageTransform.Microsoft.Matrix(      M11=-1,      M12=1.2246467991473532e-16,      M21=-1.2246467991473532e-16,      M22=-1,      SizingMethod='auto expand');
 
}
.b{
  -moz-transform:  rotate(270deg);   -o-transform:   rotate(270deg);   -webkit-transform: rotate(270deg);   transform:     rotate(270deg);
  /* IE8+ - must be on one line, unfortunately */  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=6.123233995736766e-17, M12=1, M21=-1, M22=6.123233995736766e-17, SizingMethod='auto expand')";   /* IE6 and 7 */  filter: progid:DXImageTransform.Microsoft.Matrix(      M11=6.123233995736766e-17,      M12=1,      M21=-1,      M22=6.123233995736766e-17,      SizingMethod='auto expand');
   
}

Copier après la connexion

Fichiers publics JS

var home = $('#home');
  var snakeArr = [];
  var direcation = 'l';
  var speed = 0;
  var timer = '';
  //460/20
  var rows = 23;
  var cols = 25;
  var die = false;      //用于判断是否game over
  var food = [];
  var sorce = 0;       //得分的显示

Copier après la connexion

Tout d'abord, si vous voulez avoir un serpent, vous devez créer un serpent,

for( var i=0; i<4; i++ ){
    //var snakeDiv = document.createElement("div");
    //snakeDiv.style = 'background:url(./images/snake' + i + '.png) no-repeat;';
    var snakeDiv = $('<div style="background:url(./images/snake' + i + '.png) no-repeat;z-index:999"></div>');
    home.append(snakeDiv);
    snakeArr[i] = {r : 10, c : 10 + i, div : snakeDiv, d : direcation};
    setPosition(snakeArr[i]); 
  }

Copier après la connexion

Après qu'il y ait un serpent, il est naturel de bouger :

function move(){
    var timer = setInterval(function(){
    for( var i=snakeArr.length -1; i>0; i-- ){
      snakeArr[i].c = snakeArr[i-1].c;
      snakeArr[i].r = snakeArr[i-1].r;
      snakeArr[i].d = snakeArr[i-1].d;
      }
 
      switch(direcation){
      case 'l' :
        snakeArr[0].c--;
        snakeArr[0].d = 'l';
        break;
 
      case 'r' :
        snakeArr[0].c++;
        snakeArr[0].d = 'r';
        break;
 
      case 't' :
        snakeArr[0].r--;
        snakeArr[0].d = 't';
        break;
 
      case 'b' :
        snakeArr[0].r++;
        snakeArr[0].d = 'b';
        break;
    }
 
    //snake的方向控制
    $(window).keydown(function(event){
      switch(event.keyCode){
        case 37 :
          direcation = 'l';
          break;
 
        case 38 :
          direcation = 't';
          break;
 
        case 39 :
          direcation = 'r';
          break;
 
        case 40 :
          direcation = 'b';
          break;
      }
    });
 
      //snake事故
      //1. snake撞墙
      if( snakeArr[0].c < 0 || snakeArr[0].r < 0 || snakeArr[0].c >= cols || snakeArr[0].r >= rows ){
          clearInterval(timer);
          die = true;
          alert('GAME OVER');
      }
 
      //2. snake撞到自己
      for( var i=1; i<snakeArr.length; i++ ){
        if( snakeArr[0].c == snakeArr[i].c && snakeArr[0].r == snakeArr[i].r ){
           clearInterval(timer);
           die = true;
           alert('GAME OVER');
        }
      }
 
      //snake吃水果
      if( snakeArr[0].c == food[0].c && snakeArr[0].r == food[0].r ){
        food[0].div.css({background : 'url(./images/snake2.png) no-repeat'});
        snakeArr.splice(snakeArr.length - 1, 0, food[0]);
        food.shift();
        sorce += 10;
        $('#score').html(sorce);
      }
 
      //snake产生水果
      if( food.length == 0 ){
        createFood(); 
      }
 
 
      for(var i = 0; i < snakeArr.length; i++){
        setPosition(snakeArr[i]);
      }
    },speed);
 
}

Copier après la connexion

Production de nourriture :

function createFood(){
    var r = parseInt(rows * Math.random());
    var c = parseInt(cols * Math.random());
    var casrsh = false;
     
    //2个水果出现的位置不能一样
    while( food.length == 0 ){
      //判断snake的位置，不能与snake相撞
      for( var i = 0; i < snakeArr.length; i++ ){
        if( r == snakeArr[i].r && c == snakeArr[i].c ){
          casrsh = true;
        }
      }
      //当位置不重叠的时候，产生水果
      if( !casrsh ){
        var i = parseInt(4 * Math.random());
        var foodDiv = $('<div style="background:url(./images/fruit'+ i +'.png);"></div>');
        home.append(foodDiv);
        food.push({r : r, c : c, div : foodDiv});
        setPosition(food[0]);
      }
    }
     
  }

Copier après la connexion

Une autre fonction importante est de réinitialiser le positionnement :

function setPosition(obj){
    obj.div.css({left : obj.c * 20, top : obj.r * 20}); 
    obj.div.removeClass().addClass(obj.d);
  }
  createFood();  //那页面一被加载出来就显示出食物！

Copier après la connexion

J'espère que cet article sera utile à tous ceux qui apprennent la programmation JavaScript.