请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
皮皮蛇
  1. <!DOCTYPE html>
  2. <html>

  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>snake</title>
  6.                 <style media="screen">
  7.                         * {
  8.                                 margin: 0;
  9.                                 padding: 0;
  10.                         }
  11.                        
  12.                         table,
  13.                         tr,
  14.                         td {
  15.                                 border: 1px solid #000;
  16.                         }
  17.                        
  18.                         td {
  19.                                 width: 22px;
  20.                                 height: 22px;
  21.                                 border-radius: 3px;
  22.                         }
  23.                        
  24.                         table {
  25.                                 margin: 30px auto;
  26.                         }
  27.                        
  28.                         .red {
  29.                                 background-color: red;
  30.                         }
  31.                        
  32.                         .bule {
  33.                                 background: blue;
  34.                         }
  35.                        
  36.                         p {
  37.                                 width: 100px;
  38.                                 height: 30px;
  39.                                 font-size: 22px;
  40.                                 margin: 0 auto;
  41.                         }
  42.                 </style>
  43.         </head>

  44.         <body>
  45.                 <table id="table">

  46.                 </table>
  47.                 <p>时间 :</p>
  48.                 <p>得分 :</p>

  49.         </body>
  50.         <script type="text/javascript">
  51.                 // 绘制地图
  52.                 var table = document.getElementById("table");
  53.                 var maxTable = 20; //最大表格
  54.                 var tds = []; //把表格都存为二维数组 方便蛇身读取

  55.                 for(var i = 0; i < maxTable; i++) {
  56.                         var tr = document.createElement("tr");
  57.                         // 声明一个空数组,用来存放里面的td
  58.                         var thisrowid = [];
  59.                         for(var j = 0; j < maxTable; j++) {
  60.                                 var td = document.createElement("td");
  61.                                 tr.appendChild(td);
  62.                                 // 把td追加到里面行的数组
  63.                                 thisrowid.push(td);
  64.                         }
  65.                         // console.log(thisrowid);
  66.                         // 把行和列的数组追加到一个新的数组
  67.                         tds.push(thisrowid);
  68.                         table.appendChild(tr);
  69.                 }

  70.                 function Snake() {
  71.                         //随机出现小蛇蛇
  72.                         this.ssj = parseInt(Math.random() * maxTable);
  73.                         this.ssj2 = parseInt(Math.random() * 12 + 4);

  74.                         //          this.fenshu=0;

  75.                         //                        console.log(this.ssj2)
  76.                         this.bodyArr = [{
  77.                                 x: this.ssj,
  78.                                 y: this.ssj2
  79.                         }, {
  80.                                 x: this.ssj,
  81.                                 y: this.ssj2 - 1
  82.                         }, {
  83.                                 x: this.ssj,
  84.                                 y: this.ssj2 - 2
  85.                         }, {
  86.                                 x: this.ssj,
  87.                                 y: this.ssj2 - 3
  88.                         }];

  89.                         this.render();
  90.                         this.bingEvent();

  91.                         this.direction = "right";
  92.                 }

  93.                 Snake.prototype.render = function() {
  94.                         // 每一秒清空所有的className 的名字
  95.                         for(var i = 0; i < maxTable; i++) {
  96.                                 for(var j = 0; j < maxTable; j++) {
  97.                                         tds[i][j].className = "";

  98.                                 }

  99.                         }

  100.                         // 渲染小蛇
  101.                         // 画出一条蛇
  102.                         for(var i = 0; i < this.bodyArr.length; i++) {
  103.                                 tds[this.bodyArr[i].x][this.bodyArr[i].y].className = "red";

  104.                         }

  105.                 }

  106.                 // 让蛇动起来
  107.                 Snake.prototype.move = function() {
  108.                         this.bodyArr.pop(); //删除尾巴
  109.                         this.add();

  110.                         if(this.bodyArr[0].x == food.x && this.bodyArr[0].y == food.y) {
  111.                                 food.chi();
  112.                                 this.add();

  113.                         }

  114.                 }
  115.                 //
  116.                 Snake.prototype.add = function() {
  117.                         switch(this.direction) {
  118.                                 case "right":
  119.                                         if(this.bodyArr[0].y == 19) {
  120.                                                 alert("Game over")
  121.                                                 clearInterval(t)
  122.                                                 p.innerHTML = '时间 :0'
  123.                                                 clearInterval(t1);
  124.                                                 this.p1.innerHTML = "分数  : 0"

  125.                                         }

  126.                                         this.bodyArr.unshift({
  127.                                                 x: this.bodyArr[0].x,
  128.                                                 y: this.bodyArr[0].y + 1

  129.                                         })

  130.                                         break;
  131.                                 case "up":
  132.                                         if(this.bodyArr[0].x == 0) {
  133.                                                 alert("Game over")
  134.                                                 clearInterval(t)
  135.                                                 p.innerHTML = '时间 :0'
  136.                                                 clearInterval(t1);
  137.                                                 this.p1.innerHTML = "分数  : 0"

  138.                                         }
  139.                                         this.bodyArr.unshift({
  140.                                                 x: this.bodyArr[0].x - 1,
  141.                                                 y: this.bodyArr[0].y
  142.                                         })

  143.                                         break;
  144.                                 case "down":
  145.                                         if(this.bodyArr[0].x == 19) {
  146.                                                 alert("Game over")
  147.                                                 clearInterval(t)
  148.                                                 p.innerHTML = '时间 :0'
  149.                                                 clearInterval(t1);
  150.                                                 this.p1.innerHTML = "分数  : 0"

  151.                                         }
  152.                                         this.bodyArr.unshift({
  153.                                                 x: this.bodyArr[0].x + 1,
  154.                                                 y: this.bodyArr[0].y
  155.                                         })

  156.                                         break;
  157.                                 case "left":
  158.                                         if(this.bodyArr[0].y == 0) {
  159.                                                 alert("Game over")
  160.                                                 clearInterval(t);
  161.                                                 p.innerHTML = '时间 :0'
  162.                                                 clearInterval(t1);
  163.                                                 this.p1.innerHTML = "分数  : 0"

  164.                                         }
  165.                                         this.bodyArr.unshift({
  166.                                                 x: this.bodyArr[0].x,
  167.                                                 y: this.bodyArr[0].y - 1
  168.                                         })

  169.                                         break;

  170.                                         console.log(this.bodyArr[0].x)
  171.                                 default:

  172.                         }
  173.                 }
  174.         //按键
  175.                 Snake.prototype.bingEvent = function() {
  176.                         var self = this;
  177.                         document.onkeydown = function(event) {
  178.                                 event = event || window.event;
  179.                                 switch(event.keyCode) {
  180.                                         case 37:
  181.                                                 if(self.direction == "right") {
  182.                                                         return;
  183.                                                 }
  184.                                                 self.direction = "left";
  185.                                                 break;
  186.                                         case 38:
  187.                                                 if(self.direction == "down") {
  188.                                                         return;
  189.                                                 }
  190.                                                 self.direction = "up";
  191.                                                 break;
  192.                                         case 39:
  193.                                                 if(self.direction == "left") {
  194.                                                         return;
  195.                                                 }
  196.                                                 self.direction = "right";
  197.                                                 break;
  198.                                         case 40:
  199.                                                 if(self.direction == "up") {
  200.                                                         return;
  201.                                                 }
  202.                                                 self.direction = "down";
  203.                                                 break;
  204.                                         default:

  205.                                 }

  206.                         }
  207.                 }
  208.                 //食物
  209.                 function Food() {
  210.                         this.x = 0;
  211.                         this.y = 0;
  212.                         this.fenshu = 0;
  213.                         this.p1 = document.getElementsByTagName("p")[1];
  214.                         this.chi();

  215.                 }
  216.                 //渲染食物
  217.                 Food.prototype.render = function() {
  218.                         tds[this.x][this.y].className = "bule"
  219.                 }
  220.                 //吃掉
  221.                 Food.prototype.chi = function() {
  222.                         this.fenshu++;
  223.                         this.p1.innerHTML = "分数  :" + this.fenshu
  224.                         this.x = parseInt(Math.random() * maxTable)
  225.                         this.y = parseInt(Math.random() * maxTable)
  226.                         for(var i = 1; i < Snake.bodyArr; i++) {
  227.                                 if(this.x == Snake.bodyArr[i].x && this.y == Snake.bodyArr[i].y) {
  228.                                         this.chi();
  229.                                         return;
  230.                                 }

  231.                         }
  232.                 }

  233.        
  234.                 var food = new Food();
  235.                 //
  236.                 // 随机绘制一个食物
  237.                 // 蛇吃到食物会加长 然后 食物消失,
  238.                 // 又重新随机出现一个食物
  239.                 // 蛇不能掉头
  240.                 // 不能吃到自己
  241.                 // 不能碰到边界
  242.                 // 食物出现的位置不能在蛇身上
  243.                 // 分数
  244.                 var snake = new Snake();
  245.                 var self = this
  246.                 var t = setInterval(function() {
  247.                         snake.move();
  248.                         snake.render();
  249.                         food.render()
  250.                 }, 200)
  251.                 //时间
  252.                 var time = 60;
  253.                 var p = document.getElementsByTagName("p")[0];

  254.                 function sj() {
  255.                         time--;
  256.                         p.innerHTML = "时间 :" + time
  257.                         if(time < 0) {
  258.                                 time = 60;
  259.                                 p.innerHTML = '时间 :0'
  260.                                 clearInterval(t);
  261.                                 clearInterval(t1)
  262.                                 alert("Game over")
  263.                         }
  264.                 }
  265.                 var t1 = setInterval(sj, 1000)
  266.         </script>

  267. </html>
复制代码


分享至 : QQ空间
收藏

4 个回复

倒序浏览
棒棒的
回复 使用道具 举报
很棒,能吃到自己哦
回复 使用道具 举报
赞赞赞赞赞 好看
回复 使用道具 举报

谢谢............
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册