自己来写了一遍原生js的贪吃蛇，素材没找好长得有点丑，功能上满足了，还有一点小bug，转向不能按太快容易出bug，加锁应该可以解决，有时间再加可变难度，背景素材，功能反正先实现到这；
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>贪吃蛇</title> 6 <link rel="stylesheet" href="css/css.css"> 7 </head> 8 <body> 9 <div class="box"> 10 <div id="wrapper"></div> 11 <div> 12 13 <input type="button" id="button" value="开始游戏"> 14 <span id="score">分数：</span> 15 </div> 16 </div> 17 <script src="js/demo.js" type="text/javascript"></script> 18 </body> 19 </html>
1 * { 2 margin: 0; 3 padding: 0; 4 5 } 6 .box { 7 width: 1190px; 8 margin: 10px auto; 9 position: relative; 10 } 11 12 #wrapper { 13 width: 800px; 14 height: 600px; 15 position: relative; 16 border: 1px solid red; 17 left: 50%; 18 margin-left: -400px; 19 margin-top: 30px; 20 } 21 #wrapper .body { 22 background: #00ff80; 23 border-radius: 6px; 24 } 25 #wrapper .food { 26 background: #ff8000; 27 border-radius: 6px; 28 } 29 30 #wrapper .head { 31 border-radius: 6px; 32 background: transparent; 33 } 34 #wrapper .head::after { 35 content: ""; 36 width: 0; 37 height: 2px; 38 left: 8px; 39 top: -1px; 40 border-radius: 6px; 41 position: absolute; 42 border: 10px solid transparent; 43 border-left:10px solid #00ff80; 44 } 45 #wrapper .head::before { 46 content: ""; 47 width: 0; 48 height: 4px; 49 left: 0px; 50 top: -2px; 51 border-radius: 6px; 52 position: absolute; 53 border: 10px solid transparent; 54 border-left:10px solid #00ff80; 55 } 56 57 #button { 58 position: relative; 59 left: 22%; 60 margin-top: 20px; 61 transform: translateX(-50%); 62 padding: 0 10px; 63 height: 50px; 64 line-height: 50px; 65 text-align: center; 66 font-size: 30px; 67 font-weight: bold; 68 background: #ff8000; 69 color: #ffffff; 70 border-radius: 5px; 71 border: 0; 72 cursor: pointer; 73 } 74 #score { 75 position: relative; 76 left: 20%; 77 margin-top: 20px; 78 top: 1px; 79 transform: translateX(-50%); 80 padding:5px; 81 height: 50px; 82 line-height: 50px; 83 text-align: center; 84 font-size: 30px; 85 font-weight: bold; 86 background: #00ff00; 87 color: #ffffff; 88 border-radius: 5px; 89 border: 0; 90 cursor: pointer; 91 }
1 // 思路 ： 2 // 1、初始化：棋盘，蛇，食物； 3 // 2、蛇动起来，上下左右四个方向； 4 // 3、判断：蛇头的位置：等于食物蛇+1，等于四周或者等于自身位置，游戏结束； 5 6 7 // 初始化 8 window.onload = function(){ 9 var wrapper = document.getElementById("wrapper"); 10 var wrapperWidth = wrapper.offsetWidth; 11 var wrapperheight = wrapper.offsetHeight; 12 // var wrapperleft = wrapper.offsetLeft; 13 // var wrappertop = wrapper.offsetTop; 14 var snake = [[3,1,"head"],[2,1,"body"],[1,1,"body"]]; 15 var width = 20; // 元素所占宽度 16 var aspect = 39; // 键盘反应keyCode 17 var foodLeft,foodTop;// 食物位置 18 var time ; // 定时器 19 var score = document.getElementById("score"); 20 var bool = true; // 方向锁 21 22 23 function init() { 24 createSnake(); 25 createFood(); 26 // snakeMove("right"); 27 28 }; 29 30 // 判断结束 31 function isOver(){ 32 if(snake[0][0] < 0 || snake[0][0] > wrapperWidth/20 - 1 || snake[0][1] < 0 || snake[0][1] > wrapperheight/20 - 1){ 33 return true; 34 }else { 35 for (var i = 1; i < snake.length ; i ++){ 36 if (snake[0][0] == snake[i][0] && snake[0][1] == snake[i][1]){ 37 return true; 38 } 39 } 40 } 41 return false; 42 } 43 // 移动 44 function snakeMove(){ 45 for (var i = snake.length - 1; i > 0; i --){ 46 snake[i][0] = snake[i-1][0]; 47 snake[i][1] = snake[i-1][1]; 48 } 49 switch (aspect) { 50 case 39:{ 51 snake[0][0] += 1; 52 document.getElementsByClassName("head")[0].style.transform = 'rotate(0deg)'; 53 } 54 break; 55 case 37:{ 56 snake[0][0] -= 1; 57 document.getElementsByClassName("head")[0].style.transform = 'rotate(180deg)'; 58 } 59 break; 60 case 38:{ 61 snake[0][1] -= 1; 62 document.getElementsByClassName("head")[0].style.transform = 'rotate(270deg)'; 63 } 64 break; 65 case 40:{ 66 snake[0][1] += 1; 67 document.getElementsByClassName("head")[0].style.transform = 'rotate(90deg)'; 68 } 69 break; 70 default: 71 break; 72 } 73 if(isOver()){ 74 console.log("over!"); 75 clearInterval(time); 76 }else { 77 for (var i = 0; i < snake.length ; i ++){ 78 wrapper.children[i].style.left = snake[i][0] * width + 'px'; 79 wrapper.children[i].style.top = snake[i][1] * width + 'px'; 80 } 81 } 82 // 改变方向 83 document.onkeydown = function(event) { 84 e = event || window.event; 85 if (aspect%2 != e.keyCode%2){ 86 aspect = e.keyCode; 87 } 88 } 89 if(snake[0][0] == foodLeft && snake[0][1] == foodTop){ 90 var arr = [snake[2][0],snake[2][1],"body"]; 91 snake.push(arr); 92 wrapper.innerHTML = ""; 93 createSnake(); 94 createFood(); 95 } 96 } 97 // 判断食物位置是否为空位 98 function isEmpty(){ 99 for (var i = 0; i < snake.length ; i ++){ 100 if (foodLeft == snake[i][0] && foodTop == snake[i][1]){ 101 return false; 102 } 103 } 104 return true; 105 } 106 // 创建食物 107 function createFood(){ 108 for(;;){ 109 foodLeft = Math.floor(Math.random() * (wrapperWidth/20 - 1)); 110 foodTop = Math.floor(Math.random() * (wrapperheight/20 - 1)); 111 if(isEmpty()){ 112 var food = createSquare(foodLeft,foodTop,"food"); 113 wrapper.appendChild(food); 114 return; 115 } 116 117 118 } 119 } 120 // 创建块方法 121 function createSquare(left,top,style) { 122 var square = document.createElement("div"); 123 square.style.position = "absolute"; 124 square.style.width = width - 1 + 'px'; 125 square.style.height = width - 1 + 'px'; 126 square.style.top = top * width + 'px'; 127 square.style.left = left * width + 'px'; 128 square.classList.add(style); 129 return square; 130 } 131 // 创建蛇 132 function createSnake(){ 133 for(var i = 0 ;i < snake.length; i++){ 134 var temp = createSquare(snake[i][0],snake[i][1],snake[i][2]); 135 wrapper.appendChild(temp); 136 } 137 } 138 // 显示分数 139 function showScore(){ 140 score.innerText = "分数： " + (snake.length - 3); 141 } 142 init(); 143 144 var click = document.getElementById("button"); 145 click.onclick = function(){ 146 time = setInterval(function(){ 147 snakeMove("right"); 148 showScore(); 149 },500) 150 } 151 }