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>
方法（而非New Message）獲得一個Message對象的好處)
![python編程中的if __name__ == 'main': 的作用和原理[2]](http://pic.xiahunao.cn/python編程中的if __name__ == 'main': 的作用和原理[2])
![【Foreign】采蘑菇 [點分治]](http://pic.xiahunao.cn/【Foreign】采蘑菇 [點分治])
