<!DOCTYPE html><html>? ? <head>? ? ? ? <meta charset="UTF-8">? ? ? ? <title></title>? ? ? ? <style type="text/css">? ? ? ? ? ? h2{? ? ? ? ? ? ? ? text-align: center;? ? ? ? ? ? }? ? ? ? ? ? p{? ? ? ? ? ? ? ? text-align: center;? ? ? ? ? ? }? ? ? ? ? ? #snakeMap{? ? ? ? ? ? ? ? width: 500px;? ? ? ? ? ? ? ? height: 500px;? ? ? ? ? ? ? ? border: 5px solid gold;? ? ? ? ? ? ? ? margin: 0 auto;? ? ? ? ? ? }? ? ? ? ? ? .row{? ? ? ? ? ? ? ? height: 20px;? ? ? ? ? ? ? ? /*border: 1px solid red;*/? ? ? ? ? ? ? ? background: rgb(181,68,52);? ? ? ? ? ? }? ? ? ? ? ? .col{? ? ? ? ? ? ? ? width: 20px;? ? ? ? ? ? ? ? height: 20px;? ? ? ? ? ? ? ? border: 1px solid black;? ? ? ? ? ? ? ? box-sizing: border-box;? ? ? ? ? ? ? ? float: left;? ? ? ? ? ? }? ? ? ? ? ? .activeSnake{? ? ? ? ? ? ? ? background: rgb(178,143,206);? ? ? ? ? ? }? ? ? ? ? ? .food{? ? ? ? ? ? ? ? background: green;? ? ? ? ? ? }? ? ? ? </style>? ? </head>? ? <body>? ? ? ? <div id="wrap">? ? ? ? ? ? <h2>貪吃蛇</h2>? ? ? ? ? ? <p id="score">0</p>? ? ? ? ? ? <div id="snakeMap">? ? ? ? ? ? </div>? ? ? ? </div>? ? </body>? ? <script type="text/javascript">? ? ? ? //獲取分?jǐn)?shù)? ? ? ? var score = document.getElementById('score');? ? ? ? //獲取地圖? ? ? ? var snakeMap = document.getElementById('snakeMap');? ? ? ? //設(shè)置行數(shù)? ? ? ? var rowNumber = 15;? ? ? ? //設(shè)置列數(shù)? ? ? ? var colNumber = 10;? ? ? ? //設(shè)置地圖的寬,高? ? ? ? snakeMap.style.width = colNumber * 20 + 'px';? ? ? ? snakeMap.style.height = rowNumber * 20 + 'px';? ? ? ? var arrMap = [];//記錄地圖中的行? ? ? ? var direction = 'right';// 記錄方向? ? ? ? var changeDir = true ;//設(shè)置點擊按鍵是否改變方向? ? ? ? var timerDelay;//設(shè)置一個延時器? ? ? ? var timerMove;//設(shè)置一個定時器? ? ? ? //定義蛇的位置? ? ? ? var x = 2;? ? ? ? var y = 0;? ? ? ? //食物的坐標(biāo)? ? ? ? var foodX = 0;? ? ? ? var foodY = 0;? ? ? ? var scoreNum = 0;//記錄分?jǐn)?shù)? ? ? ? //設(shè)置地圖中的單元格? ? ? ? for (var i = 0;i < rowNumber;i++) {? ? ? ? ? ? //創(chuàng)建行? ? ? ? ? ? var rowDiv = document.createElement('div');? ? ? ? ? ? //給行添加 class 名? ? ? ? ? ? rowDiv.className = 'row';? ? ? ? ? ? //添加元素節(jié)點? ? ? ? ? ? snakeMap.appendChild(rowDiv);? ? ? ? ? ? var arrRow = [];//記錄行中的每一個單元格? ? ? ? ? ? for (var j = 0; j < colNumber;j++) {? ? ? ? ? ? ? ? var colDiv = document.createElement('div');? ? ? ? ? ? ? ? colDiv.className = 'col';? ? ? ? ? ? ? ? rowDiv.appendChild(colDiv);? ? ? ? ? ? ? ? arrRow.push(colDiv);? ? ? ? ? ? }? ? ? ? ? ? //往數(shù)組里添加元素? ? ? ? ? ? arrMap.push(arrRow);? ? ? ? }? ? ? ? console.log(arrMap)? ? ? ? var snakeBody = [];//定義蛇身? ? ? ? for (var i = 0;i < 3;i++){? ? ? ? ? ? //蛇身設(shè)置顏色? ? ? ? ? ? arrMap[0][i].className = 'col activeSnake';? ? ? ? ? ? snakeBody[i] = arrMap[0][i];? ? ? ? }? ? ? ? //為頁面添加鍵盤事件? ? ? ? document.onkeydown = function (e) {? ? ? ? ? ? //如果 changeDir 值為 false, 則直接跳出鍵盤事件? ? ? ? ? ? if (!changeDir){? ? ? ? ? ? ? ? return;? ? ? ? ? ? }? ? ? ? ? ? var event = window.event|e;? ? ? ? ? ? //如果蛇向右移動,而且點擊左按鍵,則不作任何操作? ? ? ? ? ? if (direction == 'right' && event.keyCode == 37) {? ? ? ? ? ? ? ? return;? ? ? ? ? ? } else if (direction == 'left' && event.keyCode == 39){? ? ? ? ? ? ? ? return;? ? ? ? ? ? }else if (direction == 'top' && event.keyCode == 40){? ? ? ? ? ? ? ? return;? ? ? ? ? ? }else if (direction == 'bottom' && event.keyCode == 38){? ? ? ? ? ? ? ? return;? ? ? ? ? ? }? ? ? ? ? ? //方向鍵控制方向? ? ? ? ? ? switch (event.keyCode) {? ? ? ? ? ? ? ? case 37:{? ? ? ? ? ? ? ? ? ? direction = 'left';? ? ? ? ? ? ? ? ? ? break;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? case 38:{? ? ? ? ? ? ? ? ? ? direction = 'top';? ? ? ? ? ? ? ? ? ? break;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? case 39:{? ? ? ? ? ? ? ? ? ? direction = 'right';? ? ? ? ? ? ? ? ? ? break;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? case 40:{? ? ? ? ? ? ? ? ? ? direction = 'bottom';? ? ? ? ? ? ? ? ? ? break;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? default:{? ? ? ? ? ? ? ? ? ? break;? ? ? ? ? ? ? ? }? ? ? ? ? ? }? ? ? ? ? ? //為了避免快速對此點擊方向按鍵(修改方向)? ? ? ? ? ? //防止出現(xiàn) bug? ? ? ? ? ? changeDir = false;? ? ? ? ? ? //300毫秒后,將bool 的值賦值為 true;? ? ? ? ? ? timerDelay = setTimeout(function () {? ? ? ? ? ? ? ? changeDir = true;? ? ? ? ? ? },100)? ? ? ? }? ? ? ? //蛇的移動? ? ? ? timerMove = setInterval (function(){? ? ? ? ? ? //清除延時器? ? ? ? ? ? clearTimeout(timerDelay);? ? ? ? ? ? //為了防止下次點擊按鍵觸發(fā)事件? ? ? ? ? ? changeDir = true;? ? ? ? ? ? //判斷蛇移動的方向? ? ? ? ? ? switch (direction) {? ? ? ? ? ? ? ? case 'right':{? ? ? ? ? ? ? ? ? ? x++;? ? ? ? ? ? ? ? ? ? break;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? case 'left':{? ? ? ? ? ? ? ? ? ? x--;? ? ? ? ? ? ? ? ? ? break;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? case 'top':{? ? ? ? ? ? ? ? ? ? y--;? ? ? ? ? ? ? ? ? ? break;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? case 'bottom':{? ? ? ? ? ? ? ? ? ? y++;? ? ? ? ? ? ? ? ? ? break;? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? default:{? ? ? ? ? ? ? ? ? ? break;? ? ? ? ? ? ? ? }? ? ? ? ? ? }? ? ? ? ? ? //超出范圍? ? ? ? ? ? if (x >= colNumber||x < 0 || y >= rowNumber || y < 0){? ? ? ? ? ? ? ? alert('game over');? ? ? ? ? ? ? ? clearInterval(timerMove);? ? ? ? ? ? ? ? return;? ? ? ? ? ? }? ? ? ? ? ? //碰到自己? ? ? ? ? ? for (var i = 0;i < snakeBody.length;i++) {? ? ? ? ? ? ? ? //將此時移動之后的蛇頭位置和再次之前的所有蛇身所在的 div 比較,如果相同,則說明吃到蛇身? ? ? ? ? ? ? ? if (snakeBody[i] == arrMap[y][x]) {? ? ? ? ? ? ? ? ? ? alert('game over');? ? ? ? ? ? ? ? ? ? //關(guān)閉蛇移動的定時器? ? ? ? ? ? ? ? ? ? clearInterval (timerMove);? ? ? ? ? ? ? ? ? ? return;// 終止函數(shù)執(zhí)行? ? ? ? ? ? ? ? }? ? ? ? ? ? }? ? ? ? ? ? //判斷前方是否是食物? ? ? ? ? ? if (foodX == x && foodY == y) {? ? ? ? ? ? ? ? arrMap[y][x].className = 'col activeSnake';? ? ? ? ? ? ? ? //添加蛇的長度? ? ? ? ? ? ? ? snakeBody.push(arrMap[y][x]);? ? ? ? ? ? ? ? //加分? ? ? ? ? ? ? ? scoreNum++;? ? ? ? ? ? ? ? score.innerHTML = scoreNum;? ? ? ? ? ? ? ? //隨機(jī)食物? ? ? ? ? ? ? ? ranFood();? ? ? ? ? ? }else {? ? ? ? ? ? ? ? //刪除蛇尾? ? ? ? ? ? ? ? snakeBody[0].className = 'col';? ? ? ? ? ? ? ? snakeBody.shift();? ? ? ? ? ? ? ? //增加蛇頭? ? ? ? ? ? ? ? arrMap[y][x].className = 'col activeSnake';? ? ? ? ? ? ? ? snakeBody.push(arrMap[y][x]);? ? ? ? ? ? }? ? ? ? },300)?? ? ? ? //隨機(jī)數(shù)? ? ? ? function ranNum (min,max) {? ? ? ? ? ? return Math.floor(Math.random() * (max - min + 1) + min);? ? ? ? }? ? ? ? //隨機(jī)食物? ? ? ? function ranFood () {? ? ? ? ? ? foodX = ranNum(0,colNumber - 1);? ? ? ? ? ? foodY = ranNum(0,rowNumber - 1);? ? ? ? ? ? //判斷食物的位置是否與蛇身重合? ? ? ? ? ? if (arrMap[foodY][foodX].className == 'col activeSnake') {? ? ? ? ? ? ? ? ranFood();//繼續(xù)隨機(jī)食物? ? ? ? ? ? } else {? ? ? ? ? ? ? ? //將隨機(jī)出的食物設(shè)置顏色? ? ? ? ? ? ? ? arrMap[foodY][foodX].className = 'food col';? ? ? ? ? ? }? ? ? ? }? ? ? ? ranFood();? ? </script></html>
為什么鍵盤事件不起作用
黑冰客
2016-11-21 21:48:32
