zoukankan      html  css  js  c++  java
  • 贪食蛇

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <title>贪吃蛇</title>
     <style>
      body {
       display: flex;
       height: 500px;
       margin: 0;
       padding: 0;
       justify-content: center;
       align-items: center;
      }
     </style>
    </head>
    <body>
     <canvas id="can" width="400" height="400" style="background-color: black">对不起,您的浏览器不支持canvas</canvas>
     <script>
      
      var snake = [41, 40],  //snake队列表示蛇身,初始节点存在但不显示
       direction = 1,   //1表示向右,-1表示向左,20表示向下,-20表示向上
       food = 43,    //食物的位置
       n,      //与下次移动的位置有关
       box = document.getElementById('can').getContext('2d');
             //从0到399表示box里[0~19]*[0~19]的所有节点,每20px一个节点
      function draw(seat, color) {
       box.fillStyle = color;
       box.fillRect(seat % 20 *20 + 1, ~~(seat / 20) * 20 + 1, 18, 18);
             //用color填充一个矩形,以前两个参数为x,y坐标,后两个参数为宽和高。
      }
      document.onkeydown = function(evt) { 
             //当键盘上下左右键摁下的时候改变direction
       direction = snake[1] - snake[0] == (n = [-1, -20, 1, 20][(evt || event).keyCode - 37] || direction) ? direction : n;
      };
      !function() {
       snake.unshift(n = snake[0] + direction); 
             //此时的n为下次蛇头出现的位置,n进入队列
       if(snake.indexOf(n, 1) > 0 || n < 0 || n > 399 || direction == 1 && n % 20 == 0 || direction == -1 && n % 20 == 19) {
             //if语句判断贪吃蛇是否撞到自己或者墙壁,碰到时返回,结束程序
        return alert("GAME OVER!");
       }
       draw(n, "lime");  //画出蛇头下次出现的位置
       if(n == food) {   //如果吃到食物时,产生一个蛇身以外的随机的点,不会去掉蛇尾
        while (snake.indexOf(food = ~~(Math.random() * 400)) > 0);
        draw(food, "yellow");
       } else {    //没有吃到食物时正常移动,蛇尾出队列
        draw(snake.pop(),"black");
       }
       setTimeout(arguments.callee, 300);  
             //每隔0.15秒执行函数一次,可以调节蛇的速度
      }();
     </script>
    </body>
    </html>
  • 相关阅读:
    数字音乐均衡器
    移植x264到vs2008之二
    无线连接频繁掉线,解决方法之telnet命令突破ddwrt端口最大数连接限制分析
    最新开发的消费平台开发过程 持续更新(二)
    .net 4.0 下请求验证模式变化 应对方法
    DDWRT无线参数解读
    利用 Application_Error 捕获所有异常
    location.reload() 和 location.replace()的区别和应用
    纯CSS 实现组织架构图,学习
    Syslog架设windows日志服务器
  • 原文地址:https://www.cnblogs.com/tuziling/p/10074442.html
Copyright © 2011-2022 走看看