2019独角兽企业重金招聘Python工程师标准>>> 
原生js实现贪吃蛇
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>贪吃蛇游戏</title><style>body, div, img {margin: 0 auto;padding: 0;}body{background-color: #fff;color:#b35208;}.wrapper{width: 800px;height: 400px;background: url("./images/bg.png") no-repeat center center;padding: 80px;}.score{margin: 10px auto;text-align: center;font-size: 30px;font-weight: 900;}.col{width: 40px;height: 40px;float: left;display: inline-block;}.row{}.snake{background: url("./images/box.png") no-repeat center center;background-size: 100% 100%;}.egg{background: url("./images/circle.png") no-repeat center center;background-size: 100% 100%;}.gameover{position: fixed;top: 50%;left: 50%;width: 408px;height: 90px;margin-top: -90px;margin-left:-204px;background: url("./images/gameover.png") no-repeat center center;opacity:0;transform: scale(0);transition: all .5s;z-index: -1;}.show{opacity:1;transform: scale(1);z-index: 1;}</style>
</head>
<body>
<div class="gameover" id="gameover"></div>
<div class="score">得分:0</div>
<div class="wrapper"><!--<div class="row">--><!--<div class="col snake"></div>--><!--<div class="col"></div>--><!--<div class="col egg"></div>--><!--</div>-->
</div>
<script>/** 1.创建基础* 2.蛇的初始化，实物的初始化（随机）* 3.开始游戏* 1.键盘事件切换* 2.开始之后，判断是否碰到墙* 3.判断是否碰到自己* 4.判断是否吃了实物* 4.游戏结束* */var scoreDiv = document.querySelector(".score"); //取得分的div对象var score = 0;//得分var rows = 9; //行var cols = 20; //列var snakeArr = []; //存储所有对象var time = 400; //毫秒var snakebody = []; //定义一个数组存放蛇身var direction = "right"; //操作蛇移动的方向var changeDir = true; //添加键盘事件监听方向键来改变蛇的移动方向function createModel(){//创建基础var wrapperDiv = document.querySelector(".wrapper");for(var i = 0; i < rows; i++) {var rowDiv = document.createElement("div");var rowArry = [];for(var j = 0; j < cols; j++) {var colDiv = document.createElement("div");colDiv.className = "col";rowArry.push(colDiv);rowDiv.appendChild(colDiv);}snakeArr.push(rowArry);wrapperDiv.appendChild(rowDiv);}wrapperDiv.style.width = cols * 40 + "px";wrapperDiv.style.margin = "auto";}//创建蛇的初始模型function snake() {for(var i = 0; i < 3; i++) {snakeArr[0][i].className = "col snake";snakebody.push(snakeArr[0][i]);}}createModel();snake();document.onkeydown = function(event) {event = event || window.event; //判断是否需要改变方向，true表示需要 false不需要if(!changeDir) {return; //表示直接结束函数，后续代码不执行}//假设蛇在向右移动，按键左右都不起作用if(direction == "right" && event.keyCode == "37") {return;}if(direction == "left" && event.keyCode == "39") {return;}if(direction == "down" && event.keyCode == "38") {return;}if(direction == "up" && event.keyCode == "40") {return;}//更据按键操作，设置方向switch(event.keyCode) {case 37:direction = "left"; //方向向左break;case 38:direction = "up";break;case 39:direction = "right";break;case 40:direction = "down";break;}//按键后变为falsechangeDir = false;//延迟var delayTime = setTimeout(function() {changeDir = true;clearTimeout(delayTime);}, time);}//蛇的移动偏移量var x = 2;var y = 0;//蛇的移动函数function snakeMove() {var snameTimer = setInterval(function() {//更据设置的方向设置蛇头的方向switch(direction) {case "right":x++;break;case "left":x--;break;case "up":y--;break;case "down":y++;break;}//判断游戏结束－－碰壁if(x < 0 || x >= cols || y < 0 || y >= rows) {document.getElementById("gameover").style.display = "block";clearInterval(snameTimer);return;}//判断蛇吃到自己for(var i = 0; i < snakebody.length; i++) {if(snakebody[i] == snakeArr[y][x]) {document.getElementById("gameover").style.display = "block";clearInterval(snameTimer);return;}}//判断蛇头移动的位置是否有蛋if(eggX == x && eggY == y) {snakeArr[eggY][eggX].className = "col snake";snakebody.push(snakeArr[eggY][eggX]);//加入到蛇身score++;scoreDiv.innerHTML = "得分:" + score;food();} else {snakebody[0].className = "col";snakebody.shift();snakeArr[y][x].className = "col snake";snakebody.push(snakeArr[y][x]);}}, time);}snakeMove();//随机函数function randomNumber(max) {var ran = Math.floor(Math.random() * max);return ran;}//生成蛋的函数var eggX = 0;var eggY = 0;function food() {//随机出新的egg的下标的x和yeggX = randomNumber(cols);eggY = randomNumber(rows);//如果即将生蛋的位置和蛇身重合if(snakeArr[eggY][eggX].className == "col snake") {food(); //重新生成} else {//否则 新生生蛋的位置并改样式snakeArr[eggY][eggX].className = "col egg";}}food();
</script>
</body>
</html>
![【Foreign】采蘑菇 [点分治]](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
