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

2024-10-06 21:35:55

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

　　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 贪吃蛇(详细注释版)

贪吃蛇 Snake v1.0 body{ } table{ border-collapse: collapse; border:solid #333 1px; } td{ height: 10px; width: 10px; font-size: 0px; } .filled{ background-color:blue; } function $(id){return document.getElementById(id);} /** * javascript贪吃蛇 v1.0 * author
javascript 实现的多浏览器支持的贪吃蛇webgame

写的太累了 ,写了3个小时!大家可以玩玩看界面不美,尽管批 www.jb51.net 我们贪吃蛇 //获取新生元素位置 var bucunzai=true;//记录新元素是不是移动 var xinkx; var xinky; //页面载入后k元素定位 function lo(){ var objectp=document.getElementById("k") objectp.style.left="250px" objectp.style.top="
js贪吃蛇游戏实现思路和源码

本文实例为大家分享了js贪吃蛇游戏的相关代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇小游戏</title> <style> *{margin:0; padding:0;} header { display: block; margin: 0 auto;
javascript编写贪吃蛇游戏

代码很简单,这里就不多BB了,小伙伴们直接看示例吧 <!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"> <head> <meta
javascript实现简单的贪吃蛇游戏

javascript实现简单的贪吃蛇游戏,功能很简单,代码也很实用,就不多废话了,小伙伴们参考注释吧. <html> <head> <meta http-equiv='content-type' content='text/html;charset=utf-8'> <title>贪吃蛇</title> <script type="text/javascript"> var map; //地图 var snake;
原生js实现的贪吃蛇网页版游戏完整实例

本文实例讲述了原生js实现的贪吃蛇网页版游戏.分享给大家供大家参考.具体实现方法如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生js写的贪吃蛇网页版游戏</title> </head> <body> </body> <sc
javascript贪吃蛇完整版(源码)

javascript贪吃蛇完整版注释完整,面向对象复制代码代码如下: <html><head> <title>贪吃蛇 Snake v2.4</title><style> body{ font-size:9pt; } table{ border-collapse: collapse; border:solid #333 1px; } td{ heigh
javascript 贪吃蛇实现代码

在习作的过程中尝试着贪吃蛇游戏用JS实现了.竟然成功了. 思路:使用10px*10px的div层担当"像素",然后使用40*40矩阵160个"像素"构成了游戏的界面. 下面是代码: 复制代码代码如下: // JavaScript Document alert("键盘的方向键控制方向,空格键暂停.\nLIFE制作\nhttp://blog.csdn.net/anhulife"); // 添加基本的图形块,即160个10 * 10的层组成的二维矩阵
20行js代码实现的贪吃蛇小游戏

前言最近在csdn上看到一位大神用20行代码就写出了一个贪吃蛇的小游戏,感觉被惊艳到了,就试着读了一下这段代码,阅读过程中不断为作者写法的巧妙而叫绝,其中我发现自己对运算符优先级和一些js的技巧不是很清楚,所以看完之后决定把思路分享出来,方便和我一样的小白学习. 我对代码稍稍做了些修改,并添加了一些注释,方便理解. 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="
JS写的贪吃蛇游戏(个人练习)

JS贪吃蛇游戏,个人练习之用,放在这备份一下, 复制代码代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS贪吃蛇-练习</t

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

相关推荐

随机推荐