<!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"> //获取分数 var score = document.getElementById('score'); //获取地图 var snakeMap = document.getElementById('snakeMap'); //设置行数 var rowNumber = 15; //设置列数 var colNumber = 10; //设置地图的宽,高 snakeMap.style.width = colNumber * 20 + 'px'; snakeMap.style.height = rowNumber * 20 + 'px'; var arrMap = [];//记录地图中的行 var direction = 'right';// 记录方向 var changeDir = true ;//设置点击按键是否改变方向 var timerDelay;//设置一个延时器 var timerMove;//设置一个定时器 //定义蛇的位置 var x = 2; var y = 0; //食物的坐标 var foodX = 0; var foodY = 0; var scoreNum = 0;//记录分数 //设置地图中的单元格 for (var i = 0;i < rowNumber;i++) { //创建行 var rowDiv = document.createElement('div'); //给行添加 class 名 rowDiv.className = 'row'; //添加元素节点 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); } //往数组里添加元素 arrMap.push(arrRow); } console.log(arrMap) var snakeBody = [];//定义蛇身 for (var i = 0;i < 3;i++){ //蛇身设置颜色 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; } } //为了避免快速对此点击方向按键(修改方向) //防止出现 bug changeDir = false; //300毫秒后,将bool 的值赋值为 true; timerDelay = setTimeout(function () { changeDir = true; },100) } //蛇的移动 timerMove = setInterval (function(){ //清除延时器 clearTimeout(timerDelay); //为了防止下次点击按键触发事件 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'); //关闭蛇移动的定时器 clearInterval (timerMove); return;// 终止函数执行 } } //判断前方是否是食物 if (foodX == x && foodY == y) { arrMap[y][x].className = 'col activeSnake'; //添加蛇的长度 snakeBody.push(arrMap[y][x]); //加分 scoreNum++; score.innerHTML = scoreNum; //随机食物 ranFood(); }else { //删除蛇尾 snakeBody[0].className = 'col'; snakeBody.shift(); //增加蛇头 arrMap[y][x].className = 'col activeSnake'; snakeBody.push(arrMap[y][x]); } },300) //随机数 function ranNum (min,max) { return Math.floor(Math.random() * (max - min + 1) + min); } //随机食物 function ranFood () { foodX = ranNum(0,colNumber - 1); foodY = ranNum(0,rowNumber - 1); //判断食物的位置是否与蛇身重合 if (arrMap[foodY][foodX].className == 'col activeSnake') { ranFood();//继续随机食物 } else { //将随机出的食物设置颜色 arrMap[foodY][foodX].className = 'food col'; } } ranFood(); </script></html>
添加回答
举报
0/150
提交
取消