JS100行代码实现 贪吃蛇 ，快写给你的女朋友
Posted zhenfeishi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS100行代码实现 贪吃蛇 ，快写给你的女朋友相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>贪吃蛇</title> <style> *{ margin: 0; padding: 0; } #root{ width: 100%; font-size: 0; } .block{ display: inline-block; } </style> </head> <body> <div id="root"></div> <script> const BLOCK_LENGTH = 30; //方格边长 const BLOCK_COLOR = "white"; //方格颜色 const FOOD_COLOR = "salmon"; //食物颜色 const HEAD_COLOR = "orchid"; //头部颜色 const BODY_COLOR = "plum"; //身体颜色 let js = 0; //定时器ID let w_size = Math.floor((window.screen.width || 450) / BLOCK_LENGTH), //横向方格数量 h_size = Math.floor((document.documentElement.clientHeight || 450) / BLOCK_LENGTH); //纵向方格数量 //生成地图 start if(true){ let map = ""; for(let i = 0, len = w_size * h_size; i < len; ++i){ map += `<div class=‘block‘ style=‘width:${BLOCK_LENGTH}px;height:${BLOCK_LENGTH}px;background-color:${BLOCK_COLOR};‘></div>`; } document.getElementById(‘root‘).innerHTML = map; } //生成地图 end let snake_list = [0]; //蛇身 let snake_length = 1; //蛇身长度 let block_list = document.getElementsByClassName(‘block‘); //方格列表 function creat_food(){ //生成食物 let sub = 0; if(snake_list.length / (w_size * h_size) < 0.75){ sub = Math.floor(Math.random()*(w_size*h_size)); while(block_list[sub].style.backgroundColor != BLOCK_COLOR){ sub = Math.floor(Math.random()*(w_size*h_size)); } }else{ let block_arr = []; for(let i = 0, len = w_size * h_size; i < len; ++i){ if(block_list[i].style.backgroundColor == BLOCK_COLOR){ block_arr.push(i); } } sub = block_arr[Math.floor(Math.random()*(block_arr.length))]; } block_list[sub].style.backgroundColor = FOOD_COLOR; } let dir = 4; //移动方向(上:1下:2左:3右:4) function move(){ //移动 let handle = function(next){ let max = next > snake_list[snake_length - 1] ? next : snake_list[snake_length - 1]; if( block_list[next] == undefined || block_list[next].style.backgroundColor == BODY_COLOR || ( Math.abs(next - snake_list[snake_length - 1]) == 1 && max % w_size == 0 ) ){ clearInterval(js); alert("得分：" + snake_length); location.reload(); }else if(block_list[next].style.backgroundColor == FOOD_COLOR){ block_list[snake_list[snake_length - 1]].style.backgroundColor = BODY_COLOR; snake_list.push(next); ++snake_length; block_list[next].style.backgroundColor = HEAD_COLOR; creat_food(); }else{ block_list[snake_list[snake_length - 1]].style.backgroundColor = BODY_COLOR; block_list[snake_list[0]].style.backgroundColor = BLOCK_COLOR; snake_list.shift(); snake_list.push(next); block_list[snake_list[snake_length - 1]].style.backgroundColor = HEAD_COLOR; } }; switch(dir){ case 1: handle(snake_list[snake_length - 1] - w_size); break; case 2: handle(snake_list[snake_length - 1] + w_size); break; case 3: handle(snake_list[snake_length - 1] - 1); break; case 4: handle(snake_list[snake_length - 1] + 1); break; default: ; } } document.onkeypress = function(e){ let theEvent = e || window.event; let code = theEvent.keyCode || theEvent.which || theEvent.charCode; switch(code){ case 38: case 119: (dir == 1 || dir == 2) ? void 0 : dir = 1; break; case 37: case 97: (dir == 3 || dir == 4) ? void 0 : dir = 3; break; case 40: case 115: (dir == 1 || dir == 2) ? void 0 : dir = 2; break; case 39: case 100: (dir == 3 || dir == 4) ? void 0 : dir = 4; break; default: ; } }; block_list[snake_list[0]].style.backgroundColor = HEAD_COLOR; creat_food(); js = setInterval(move, 300); </script> </body> </html>
代码易读不用解释，只提一个事，蛇移动的时候，没必要每个部位都动，只处理头尾就可以了，这个应该也是显而易见的
以上是关于JS100行代码实现 贪吃蛇 ，快写给你的女朋友的主要内容，如果未能解决你的问题，请参考以下文章