«

js编写“贪吃蛇”的小游戏

时间：2024-3-2 03:06     作者：韩俊     分类： Javascript

贪吃蛇儿时的回忆，今天刚好学习到这了，就刚好做了一个，也是学习了吧，需要掌握的知识：

　　1、JS函数的熟练掌握，

　　2、JS数组的应用，

　　3、JS小部分AJAX的学习

　　4、JS中的splice、shift等一些函数的应用，

基本上就这些吧，下面提重点部分：
前端的页面，这里可自行布局，我这边提供一个我自己的布局：

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

这里是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');

}

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

首先要想有snake就必须创造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]); 
 }

有snake之后，自然就是移动了（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);

}

食物的产生：

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

 }

还有一个重要的功能就是重新设置定位：

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

小编还为大家准备了精彩的专题：javascript经典小游戏汇总

希望本文所述对大家学习javascript程序设计有所帮助。

标签: javascript

热门推荐

1 jquery文字填写自动高度的实现方法
2 阿里巴巴技术文章分享 Javascript继承机制的实现
3 MQTT.js入门使用的方法是什么
4 深入理解JavaScript内置函数
5 JSON简介以及用法汇总
6 js函数在frame中的相互调用详解
7 Nodejs关于gzip/deflate压缩详解
8 经常用到的JavasScript事件的翻译
9 jQuery插件实现文件上传功能（支持拖拽）
10 深入理解javascript中return的作用

日历

标签

hbase maven eclipse sybase PostgreSQL spring emcache oracle mongodb redis nginx golang java vue android ios mysql linux 微信小程序 css html php教程 javascript python php

搜索

最新文章

热门文章