search

Home >Web Front-end >JS Tutorial >js writing 'Snake' mini game_javascript skills

js writing 'Snake' mini game_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:25:451763browse

Memories of Snake's childhood, I just learned this today, so I just made one, so I learned it too, the knowledge I need to master:

　1. Proficiency in JS functions,

2. Application of JS array,

3. Learning a small part of JS and AJAX

4. Application of splice, shift and other functions in JS,

That’s basically it. Here are the key points:
The front-end page can be laid out by itself. I provide my own layout here: 

<!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>

Here is the css code: 

*{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');
   
}

JS public files

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;       //得分的显示

First of all, if you want to have a snake, you must create a snake, 

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]); 
  }

After there is a snake, it is natural to move: 

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);
 
}

Production of food: 

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]);
      }
    }
     
  }

Another important function is to reset the positioning: 

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

I hope this article will be helpful to everyone in learning javascript programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Example analysis of four methods of parameter transfer between html pages using javascript_javascript skillsNext article：Example analysis of four methods of parameter transfer between html pages using javascript_javascript skills

Related articles

See more