键盘事件

  1.     // document.onkeydown=function(){
  2.         //     console.log('keydown');
  3.         //     //不抬起按键会一直触发
  4.         // }
  5.         // document.onkeyup=function() {
  6.         //     console.log('keyup')
  7.         // }
  8.         // document.onkeypress=function() {
  9.         //     console.log('keypress');
  10.         // }
  11.         //keydown->keypress->keyup
  14.         //所有按键都可以触发
  15.         document.onkeydown=function(e){
  16.             console.log(e);
  17.             console.log(e.charCode)//0 无数字
  18.             console.log(e.keyCode)//键盘顺位码 
  19.             //keyCode有上下左右
  20.         }
  22.         //只能触发字符类按键，上下左右不行
  23.          document.onkeypress=function(e) {
  24.             console.log(e);
  25.             console.log(e.charCode)//1 有数字 ascii码
  26.             console.log(e.keyCode);//一样 有
  28.             var str=String.fromCharCode(e.charCode)
  29.             console.log(str);
  30.             //能得到大写的G、H、L，keyCode不行
  31.             //只能触发字符类，别的不行，shift、上下左右
  32.             //keyCode没有上下左右
  34.         }

keyCode表

1.png2.png3.png

例子

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title></title>
  9.     <style>
  10.         .box {
  11.             position: absolute;
  12.             top: 0;
  13.             left: 0;
  14.             width: 100px;
  15.             height: 100px;
  16.             background-color: green;
  17.         }
  18.     </style>
  19. </head>
  21. <body>
  22.     <div class="box"></div>
  23.     <script src="./js/utils.js"></script>
  24.     <script>
  25.         var box = document.getElementsByClassName('box')[0];
  26.         document.onkeydown = function (e) {
  27.             var e = e || window.event,
  28.                 code = e.keyCode,
  29.                 bLeft = getStyles(box, 'left'),
  30.                 bTop = getStyles(box, 'top');
  31.             switch (code) {
  32.                 case 37:
  33.                     box.style.left = bLeft - 5 + 'px';
  34.                     break;
  35.                 case 39:
  36.                     box.style.left = bLeft + 5 + 'px';
  37.                     break;
  38.                 case 38:
  39.                     box.style.top = bTop -5 + 'px';
  40.                     break;
  42.                 case 40:
  43.                     box.style.top = bTop + 5 + 'px';
  44.                     break;
  45.                 default:
  46.                     break;
  48.             }
  49.         }
  50.     </script>
  51. </body>
  53. </html>

贪吃蛇

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .wrap{
  10.             position: relative;
  11.             width: 500px;
  12.             height: 500px;
  13.             margin: 50px auto;
  14.             background-color: #000;
  15.             overflow: hidden;
  16.         }
  17.         .round{
  18.             display: block;
  19.             position: absolute;
  20.             width: 20px;
  21.             height: 20px;
  22.             border-radius: 50%;
  23.             background-color: green;
  24.             z-index: 1;
  25.         }
  26.         .round.head{
  27.             background-color: red;
  28.         }
  29.         .food{
  30.             display: block;
  31.             position: absolute;
  32.             width: 20px;
  33.             height: 20px;
  34.             border-radius: 50%;
  35.             background-color: yellow;
  36.             z-index: 2;
  37.         }
  38.     </style>
  39. </head>
  40. <body>
  41.     <div class="wrap"></div>
  42.     <script src="./js/untils.js"></script>
  43.     <script src="./js/index.js"></script>
  44. </body>
  45. </html>
  1. window.onload = function () {
  2.     init();
  3. }
  5. function init() {
  6.     initGame();
  7. }
  9. var initGame = (function () {
  10.     var wrap = document.getElementsByClassName('wrap')[0],
  12.         wrapW = getStyles(wrap, 'width'),
  13.         wrapH = getStyles(wrap, 'height'),
  14.         t = null;
  15.     var Snake = function () {
  16.         this.bodyArr = [{
  17.                 x: 0,
  18.                 y: 0
  19.             },
  20.             {
  21.                 x: 0,
  22.                 y: 20
  23.             },
  24.             {
  25.                 x: 0,
  26.                 y: 40
  27.             },
  28.             {
  29.                 x: 0,
  30.                 y: 60
  31.             },
  32.             {
  33.                 x: 0,
  34.                 y: 80
  35.             },
  36.             {
  37.                 x: 0,
  38.                 y: 100
  39.             }
  40.         ];
  41.         this.dir = 'DOWN'
  42.     }
  43.     Snake.prototype = {
  44.         init: function () {
  45.             this.bindEvent();
  46.             this.createFood();
  47.             this.initSnake();
  48.             this.run();
  49.         },
  50.         bindEvent: function () {
  51.             var _self = this;
  52.             addEvent(document, 'keydown', function () {
  53.                 _self.changeDir();
  54.             });
  55.         },
  56.         initSnake: function () {
  57.             var arr = this.bodyArr,
  58.                 len = arr.length,
  59.                 frag = document.createDocumentFragment(),
  60.                 item;
  61.             for (var i = 0; i < len; i++) {
  62.                 item = arr[i];
  63.                 var round = document.createElement('i'); //i标签
  64.                 // console.log(round); 
  65.                 // 此处i是循坏中的i 查找数组中最后一项
  66.                 round.className = i === len - 1 ? 'round head' : 'round';
  68.                 round.style.left = item.x + 'px';
  69.                 round.style.top = item.y + 'px';
  70.                 frag.appendChild(round);
  71.             }
  72.             wrap.appendChild(frag);
  73.         },
  74.         run: function () {
  75.             var _self = this
  76.             t = setInterval(function () {
  77.                 _self.move();
  78.             }, 500);
  79.         },
  80.         move: function () {
  81.             var arr = this.bodyArr,
  82.                 len = arr.length;
  84.             for (var i = 0; i < len; i++) {
  85.                 if (i === len - 1) {
  86.                     this.setHeadXY(arr);
  87.                 } else {
  88.                     arr[i].x = arr[i + 1].x;
  89.                     arr[i].y = arr[i + 1].y;
  90.                 }
  91.             }
  92.             this.eatFood(arr);
  93.             this.removeSnake();
  94.             this.initSnake();
  95.             this.headInBody(arr);
  96.         },
  97.         setHeadXY: function (arr) {
  98.             var head = arr[arr.length - 1];
  99.             switch (this.dir) {
  100.                 case 'LEFT':
  101.                     if (head.x <= 0) {
  102.                         head.x = wrapW - 20;
  103.                     } else {
  104.                         head.x -= 20;
  105.                     }
  106.                     break;
  107.                 case 'RIGHT':
  108.                     if (head.x >= wrapW - 20) {
  109.                         head.x = 0;
  110.                     } else {
  111.                         head.x += 20;
  112.                     }
  113.                     break;
  114.                 case 'UP':
  115.                     if (head.y <= 0) {
  116.                         head.y = wrapH - 20;
  117.                     } else {
  118.                         head.y -= 20;
  119.                     }
  120.                     break;
  121.                 case 'DOWN':
  122.                     if (head.y >= wrapH - 20) {
  123.                         head.y = 0;
  124.                     } else {
  125.                         head.y += 20;
  126.                     }
  127.                     break;
  128.                 default:
  129.                     break;
  130.             }
  131.         },
  132.         headInBody: function (arr) {
  133.             var headX = arr[arr.length - 1].x,
  134.                 headY = arr[arr.length - 1].y;
  135.             for (var i = 0; i < arr.length - 2; i++) {
  136.                 item = arr[i];
  137.                 if (headX === item.x && headY === item.y) {
  138.                     var _self = this;
  139.                     setTimeout(function () {
  140.                         alert('游戏结束');
  141.                         clearInterval(t);
  142.                         _self.removeSnake();
  143.                         _self.removeFood();
  144.                     }, 100)
  145.                 }
  146.             }
  147.         },
  148.         removeSnake: function () {
  149.             var bodys = document.getElementsByClassName('round');
  150.             while (bodys.length > 0) {
  151.                 bodys[0].remove();
  152.             }
  153.         },
  154.         changeDir: function () {
  155.             var e = e || window.event;
  156.             code = e.keyCode;
  157.             this.setDir(code);
  158.         },
  159.         setDir: function () {
  160.             switch (code) {
  161.                 case 37:
  162.                     if (this.dir !== 'RIGHT' && this.dir !== 'LEFT') {
  163.                         this.dir = 'LEFT';
  164.                     }
  165.                     break;
  166.                 case 39:
  167.                     if (this.dir !== 'RIGHT' && this.dir !== 'LEFT') {
  168.                         this.dir = 'RIGHT';
  169.                     }
  170.                     break;
  171.                 case 38:
  172.                     if (this.dir !== 'UP' && this.dir !== 'DOWN') {
  173.                         this.dir = 'UP';
  174.                     }
  175.                     break;
  176.                 case 40:
  177.                     if (this.dir !== 'UP' && this.dir !== 'DOWN') {
  178.                         this.dir = 'DOWN';
  179.                     }
  180.                     break;
  181.                 default:
  182.                     break;
  183.             }
  184.         },
  185.         createFood: function () {
  186.             var food = document.createElement('i');
  187.             food.className = 'food';
  188.             food.style.left = this.setRandomPos(wrapW) * 20 + 'px';
  189.             food.style.top = this.setRandomPos(wrapH) * 20 + 'px';
  190.             wrap.appendChild(food);
  191.         },
  192.         setRandomPos: function (size) {
  193.             return Math.floor(Math.random() * (size / 20))
  194.         },
  195.         eatFood: function (arr) {
  196.             var food = document.getElementsByClassName('food')[0],
  197.                 foodX = getStyles(food, 'left'),
  198.                 foodY = getStyles(food, 'top'),
  199.                 headX = arr[arr.length - 1].x,
  200.                 headY = arr[arr.length - 1].y,
  201.                 x,
  202.                 y;
  204.             if (headX === foodX && headY === foodY) {
  205.                 this.removeFood();
  206.                 this.createFood();
  207.                 if (arr[0].x == arr[1].x) {
  208.                     x = arr[0].x;
  209.                     if (arr[0].y > arr[1].y) {
  210.                         y = arr[0].y + 20;
  211.                     } else if (arr[0].y < arr[1].y) {
  212.                         y = arr[0].y - 20;
  213.                     }
  215.                 } else if (arr[0].y === arr[1].y) {
  216.                     y = arr[0].y;
  217.                     if (arr[0].x > arr[1].x) {
  218.                         x = arr[0].x + 20;
  219.                     } else if (arr[0].x < arr[1].x) {
  220.                         x = arr[0].x - 20;
  221.                     }
  222.                 }
  223.                 arr.unshift({
  224.                     x,
  225.                     y
  226.                 })
  227.             }
  228.         },
  229.         removeFood: function () {
  230.             var food = document.getElementsByClassName('food')[0];
  231.             food.remove();
  232.         }
  233.     }
  234.     return new Snake().init();
  235. });