黑马程序员技术交流社区

标题: html版贪吃蛇 源码分享 [打印本页]

作者: 仰望星空.....    时间: 2014-10-23 21:48
标题: html版贪吃蛇 源码分享
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html>
  4. <head>
  5. <title>Snake web edition</title>

  6. <script type="text/javascript">
  7. var map = null;                    //面板对象
  8. var food = null;          //食物对象
  9. var snake = null; //蛇 对象(null是空指针,可用于声明空对象)
  10. var mytime = null; //定时器对象

  11. //1.制作 操作 面板
  12. function Map(){
  13.         this.width = 800;//面板 宽
  14.         this.height = 400;//面板 高
  15.         this.color = "lightblue";// 面板 背景 颜色
  16.         this.bord = 0;
  17.                 //通过方发绘制 操作面板
  18.         this.showmap = function(){
  19.                         //创建div, 通过div展示面板
  20.                         var ban = document.createElement('div');
  21.                         ban.style.width = this.width+"px";//面板宽
  22.                         ban.style.height = this.height+"px";//高
  23.                         ban.style.backgroundColor = this.color;
  24.                         //对div面板 进行定位
  25.                         ban.style.position = "absolute";//绝对定位
  26.                         ban.style.left = 0;
  27.                         ban.style.top = 0;
  28.                         //把div面板追加到body里面
  29.                         document.body.appendChild(ban);
  30.         }
  31. }

  32. //2.绘制食物
  33. function Food(){//构造 函数
  34.         this.height = 20;//食物高
  35.         this.width = 20;//食物宽
  36.         this.color = "red";
  37.         this.pice = null;
  38.         //food 位置随机
  39.         this.showfood = function(){
  40.                 //创建 一个食物div
  41.                 if( this.pice == undefined){
  42.                         this.pice = document.createElement('div');
  43.                         this.pice.style.width = this.width+"px";//食物 宽
  44.                         this.pice.style.height = this.height + "px";//食物 高
  45.                         this.pice.style.backgroundColor = this.color;// 食物 颜色
  46.                         //定位
  47.                         this.pice.style.position = "absolute";
  48.                         }
  49.                
  50.                
  51.                 //让食物的位置发生变化
  52.                 //食物水平位置0--780px  --->获得随机数 范围0--39
  53.                 //Math.random()产生的随机数 位小数 在0--1之间
  54.                 //Math.floor() 向下取整
  55.                 this.weizhiX = Math.floor(Math.random() * 40 );//取0--39之间随机数
  56.                 this.weizhiY = Math.floor(Math.random() * 20);//取0--19之间随机数
  57.                 this.pice.style.left = this.width* this.weizhiX+"px";
  58.                 this.pice.style.top = this.width * this.weizhiY + "px";
  59.                 //body追加shiwu
  60.                 document.body.appendChild(this.pice);
  61.        
  62.         }
  63. }

  64. //3.绘制 蛇
  65. function Snake(){
  66.         this.range = 20; //每个蛇节的 宽度 和 高度
  67.         // 段 duans的 每个元素就是 一个蛇节的信息
  68.         this.duans = [[0,1,'green',null],[1,1,'green',null],[2,1,'green',null],[3,1,'red',null]];
  69.         this.redirect = "right";//蛇 默认向右走
  70.         //绘制小蛇
  71.         this.showduans = function(){
  72.                 //遍历duans的 数组,获得具体蛇的信息
  73.                 for(var i in this.duans){
  74.                                 //创建 每个蛇段的 div
  75.                                 //判断每个蛇段,之前是否有创建出来,避免创建重复的蛇段
  76.                                 if(this.duans[i][3] == undefined){
  77.                                                 this.duans[i][3] = document.createElement('div');
  78.                                                 this.duans[i][3].style.backgroundColor = this.duans[i][2];
  79.                                                 this.duans[i][3].style.width = this.range+"px";
  80.                                                 this.duans[i][3].style.height = this.range+"px";
  81.                                                 this.duans[i][3].style.position = "absolute";
  82.                                         }
  83.                                
  84.                                
  85.                                
  86.                                 this.duans[i][3].style.left = this.duans[i][0] * this.range+ "px";
  87.                                 this.duans[i][3].style.top = this.duans[i][1] * this.range+ "px";
  88.                                 //展示 每个蛇段
  89.                                 document.body.appendChild(this.duans[i][3]);
  90.                         }
  91.         }
  92.        
  93.         //移动 小蛇



  94.         this.moveduans = function        (){
  95.                         for(var i=0;i< this.duans.length-1;i++){
  96.                                         //当前元素的下标 === 下个元素的下标
  97.                                         this.duans[i][0] = this.duans[i+1][0];//移动x轴坐标
  98.                                         this.duans[i][1] = this.duans[i+1][1];//移动y轴坐标
  99.                                 }
  100.                        
  101.                         //移动蛇头--向右
  102.                         if(this.redirect == "right"){
  103.                                         this.duans[this.duans.length-1][0] += 1;
  104.                                 }
  105.                         //移动蛇头--向 下
  106.                         if(this.redirect == "down"){
  107.                                         this.duans[this.duans.length-1][1] += 1;
  108.                                 }       
  109.                         //移动蛇头--向 左
  110.                         if(this.redirect == "left"){
  111.                                         this.duans[this.duans.length-1][0] -= 1;
  112.                                 }       
  113.                         //移动蛇头--向 上
  114.                         if(this.redirect == "up"){
  115.                                         this.duans[this.duans.length-1][1] -= 1;
  116.                                 }       
  117.                        
  118.                         //判断蛇头 是否越界 --x坐标是否超过39
  119.                         //                                                                                        y坐标是否超过19
  120.                         //                                                                                        x坐标是否 小于0
  121.                         //                                                                                        y坐标是否 小于0
  122.                         if(this.duans[this.duans.length-1][0] > 39 ||
  123.                                         this.duans[this.duans.length-1][0] < 0 ||
  124.                                         this.duans[this.duans.length-1][1] > 19 ||
  125.                                         this.duans[this.duans.length-1][1] < 0
  126.                         ){
  127.                                 //game over---停止定时器
  128.                                 alert("Game over!!");
  129.                                 clearInterval(mytime);
  130.                                 return false; //停止程序执行
  131.                                 }       
  132.                         //判断 蛇 是否吃到自己--即 蛇头部坐标与 某个蛇段坐标是否相等                                                                               
  133.                         var shetouX = this.duans[this.duans.length-1][0];//蛇头X坐标
  134.                         var shetouY = this.duans[this.duans.length-1][1];        //蛇头Y坐标
  135.                         //遍历蛇段
  136.                         for(var i = 0; i< this.duans.length-1; i++){
  137.                                 if(this.duans[i][0] == shetouX && this.duans[i][1]==shetouY){
  138.                                         alert("吃到自己了,Game over!!!");
  139.                                         clearInterval(mytime);
  140.                                         return false; //停止程序执行
  141.                                         }
  142.                                 }                                                                                       
  143.                         //判断蛇头是否碰到食物
  144.                         var snakeX = this.duans[this.duans.length-1][0]        ;
  145.                         var snakeY = this.duans[this.duans.length-1][1];       
  146.                         var fX = food.weizhiX;
  147.                         var fY = food.weizhiY;
  148.                         if(snakeX == fX && snakeY == fY){//蛇头 坐标 和 食物 坐标 相等,则吃上食物
  149.                                 // 吃掉 食物--把一个新段创建出来,新段的坐标 就是最后一个蛇段 的坐标
  150.                                 var newduan = [this.duans[0][0],this.duans[0][1],'green',null];
  151.                                 this.duans.unshift(newduan);
  152.                                 // 重新 生成食物
  153.                                 food.showfood();
  154.                                 }       
  155.                                
  156.                                
  157.                         //蛇段的位置发生变化,重新绘制小蛇
  158.                         this.showduans();
  159.                
  160.                 }
  161.         }
  162.        
  163.        
  164. window.onload = function(){//加载事件
  165.                         //1.绘制面板
  166.                         map = new Map();
  167.                         map.showmap();
  168.                        
  169.                         //2.绘制 食物
  170.                         food = new Food();
  171.                         food.showfood();
  172.                        
  173.                         //3.绘制 小蛇
  174.                         snake = new Snake();
  175.                         snake.showduans();
  176.                        
  177.                         //4.移动 蛇
  178.                         mytime = setInterval("snake.moveduans()",100);//定时器 单位ms
  179.                         //snake.moveduans();
  180.                        
  181.                         //5.给body添加 键盘事件
  182.                         document.body.onkeydown = function(evt){
  183.                                 //console.log(evt.keyCode);//获得键码表 上下左右-- 38 40 37 39
  184.                                 if(evt.keyCode == 38 && snake.redirect!= "down"){
  185.                                                 snake.redirect = "up";
  186.                                         }
  187.                                 if(evt.keyCode == 40 && snake.redirect!= "up"){
  188.                                                 snake.redirect = "down";
  189.                                         }       
  190.                                 if(evt.keyCode == 37 && snake.redirect!= "right"){
  191.                                                 snake.redirect = "left";
  192.                                         }       
  193.                                 if(evt.keyCode == 39 && snake.redirect!= "left"){
  194.                                                 snake.redirect = "right";
  195.                                         }       
  196.                         }
  197.                        
  198. }







  199. </script>





  200. </head>
  201. <body>
  202. hehe
  203. </body>
  204. </html>
复制代码



作者: ifo    时间: 2014-10-23 23:04
威武。。。




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2