<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>---贪吃蛇---</title> <style type="text/css"> * { margin: 0; padding: 0; } .wrap { width: 600px; margin: 0 auto; position: relative; } p { position: absolute; left: 65%; top: 10%; } h1 { text-align: center; margin-bottom: 20px; } #score { text-align: center; font-size: 20px; } #snake_map { margin: 0 auto; border: 1px solid skyblue; } /*行样式*/ .row { height: 20px; } /*列样式*/ .col { height: 20px; width: 20px; box-sizing: border-box; border: 1px solid lightgray; background: rgb(250, 250, 250); float: left; } .activeSnake { background: black; } .food { background: red; } #Pause { margin-left: 18%; border: 1px solid skyblue; color: white; background: skyblue; width: 50px; height: 30px; margin-bottom: 10px; border-radius: 5px; } #Start,#Refresh,#Speed { border: 1px solid skyblue; background: skyblue; color: white; width: 50px; height: 30px; border-radius: 5px; margin-left: 15px; } </style> </head> <body> <div class="wrap"> <h1>贪吃蛇游戏</h1> <!-- 记录吃了多少个蛋 --> <p style="font-size:20px;color:red"> snakeScore:<span id="score" style="color:black">0</span> </p> <!-- 暂停按钮 --> <input id="Pause" type="button" name="name" value="Pause"> <!-- 开始按钮 --> <input id="Start" type="button" name="name" value="Start"> <!-- 刷新(重新开始游戏) --> <input id="Refresh" type="button" name="name" value="Refresh"> <!-- 加速按钮 --> <input id="Speed" type="button" name="name" value="Speed"> <!-- 贪吃蛇的行走路径地图 --> <div id="snake_map"> </div> </div> </body> <script type="text/javascript" language="JavaScript"> //获取分数标签 var score = document.getElementById('score'); // 获取路径地图标签 var map = document.getElementById('snake_map'); // 为了灵活的设置地图的大小,以下设置两个变量 // 用于存储行数和列数(即方格的个数) var rowNumber = 25;// 行数 var columnNumber = 20;// 列数; var mapWidth = columnNumber * 20 + 'px';// 地图的宽 var mapHeight = rowNumber * 20 + 'px';// 地图的高 map.style.width = mapWidth; map.style.height = mapHeight;// 设置地图宽高 // 创建一个二维数组,用来记录地图上的所有div的位置 var snakeDIVPosition = []; // 通过双层for循环来创建地图元素 for ( var i = 0; i < rowNumber; i++) { // 创建行div var rowDIV = document.createElement('div'); // 设置div样式 rowDIV.className = 'row'; // 将行div添加到路径地图map中 map.appendChild(rowDIV); // 创建一个行级数组,用来存储当前行中的每个方块div var rowArray = []; for ( var j = 0; j < columnNumber; j++) { // 创建每一行中的方块div var columnDIV = document.createElement('div'); // 设置css样式 columnDIV.className = 'col'; // 将方块DIV添加到当前行中 rowDIV.appendChild(columnDIV); // 同时将方块添加到行数组中 rowArray.push(columnDIV); } // 当前内层循环结束,将行数组添加到二维数组中 snakeDIVPosition.push(rowArray); } //创建一个蛇,用数组来存储蛇本身所占的div var snake = []; //设置蛇的长度 for (var i = 0; i < 3; i++) { //给蛇设置了颜色 snakeDIVPosition[0][i].className = 'col activeSnake'; //颜色设置完后,放在蛇身数组中 snake[i] = snakeDIVPosition[0][i]; } //控制蛇的变量 var snakeX = 2; var snakeY = 0; //蛇的初始位置 var snakeScore = 0; //分数 var foodX = 0; var foodY = 0;//食物的初始位置 var isSnakeDir = true;// true表示改变蛇的方向 var snakeDirection = 'right';//蛇的初始移动向左 var delayTimer = null;//延迟定时器 //添加键盘事件监听方向来改变蛇的移动方向 document.onkeydown = function (event) { //刚开始,蛇自动行走,也就是不改变方向 if (!isSnakeDir) { return; } event = event || window.event; //当用户输入后,蛇的逻辑 if (snakeDirection == 'up' && event.keyCode == 40) { return; } if (snakeDirection == 'down' && event.keyCode == 38) { return; } if (snakeDirection == 'left' && event.keyCode == 39) { return; } if (snakeDirection == 'right' && event.keyCode == 37) { return; } switch (event.keyCode) { case 37: snakeDirection = 'left'; break; case 38: snakeDirection = 'up'; break; case 39: snakeDirection = 'right'; break; case 40: snakeDirection = 'down'; break; } isSnakeDir = false; delayTimer = setTimeout(function () { isSnakeDir = true; }, 300); } //蛇移动坐标 function snakeMove() { //根据上面的设置来设置蛇头的位置 switch (snakeDirection) { case 'left': snakeX--; break; case 'right': snakeX++; break; case 'up': snakeY--; break; case 'down': snakeY++; break; } //判断游戏是否结束 if(snakeX < 0 || snakeY < 0 || snakeX >= columnNumber || snakeY >= rowNumber) { alert("游戏结束!"); //结束蛇移动的定时器 clearInterval(moveTimer); return; } //如果蛇吃到自己,游戏也结束 for(var i = 0; i < snake.length; i++ ) { if(snake[i] == snakeDIVPosition[snakeY][snakeX]) { alert("蛇吃到自己,游戏结束!!"); clearInterval(moveTimer); return; } } //判断是否吃到食物 if(foodX == snakeX && foodY == snakeY) { snakeDIVPosition[foodY][foodX].className = 'col activeSnake'; snake.push(snakeDIVPosition[foodY][foodX]); //蛇身体变长 snakeScore++; //分数加一 score.innerHTML = snakeScore; createNewFood(); } //蛇没有吃到食物 else { snake[0].className = 'col'; snake.shift(); snakeDIVPosition[snakeY][snakeX].className = 'col activeSnake'; snake.push(snakeDIVPosition[snakeY][snakeX]); } } var moveTimer = setInterval('snakeMove()', 300); //定义一个生成Min,Max之间的随机数 function random(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); }; function createNewFood() { //随机出现新的食物的坐标 foodX = random(0, columnNumber - 1); foodY = random(0, rowNumber - 1); //加个判断,如果随机产生的食物和蛇的身体重合,就重新产生一个食物 if(snakeDIVPosition[foodY][foodX].className == 'col activeSnake') { createNewFood(); //重新产生一个食物,这里用了递归 } else { snakeDIVPosition[foodY][foodX].className = 'col food'; } } createNewFood(); //在游戏开始的时候生成新的食物 var pause = document.getElementById('Pause'); var start = document.getElementById('Start'); var refresh = document.getElementById('Refresh'); var speed = document.getElementById('Speed'); //添加暂停按钮 pause.onclick = function () { clearInterval(moveTimer); } //添加开始按钮 start.onclick = function () { clearInterval(moveTimer); moveTimer = setInterval('snakeMove()', speed1); } //添加刷新按钮 refresh.onclick = function () { window.location.reload(); } //添加加速按钮 var speed1 = 300; speed.onclick = function () { speed -= 20; clearInterval(moveTimer); moveTimer = setInterval('snakeMove()', speed1); } </script> </html>
js----贪吃蛇游戏
猜你喜欢
转载自blog.csdn.net/qq_36818386/article/details/80207450
今日推荐
周排行