前端那些事之原生 js实现贪吃蛇篇
生活随笔
收集整理的這篇文章主要介紹了
前端那些事之原生 js实现贪吃蛇篇
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
2019獨角獸企業(yè)重金招聘Python工程師標準>>>
原生js實現(xiàn)貪吃蛇
<!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.創(chuàng)建基礎(chǔ)* 2.蛇的初始化，實物的初始化（隨機）* 3.開始游戲* 1.鍵盤事件切換* 2.開始之后，判斷是否碰到墻* 3.判斷是否碰到自己* 4.判斷是否吃了實物* 4.游戲結(jié)束* */var scoreDiv = document.querySelector(".score"); //取得分的div對象var score = 0;//得分var rows = 9; //行var cols = 20; //列var snakeArr = []; //存儲所有對象var time = 400; //毫秒var snakebody = []; //定義一個數(shù)組存放蛇身var direction = "right"; //操作蛇移動的方向var changeDir = true; //添加鍵盤事件監(jiān)聽方向鍵來改變蛇的移動方向function createModel(){//創(chuàng)建基礎(chǔ)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";}//創(chuàng)建蛇的初始模型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; //表示直接結(jié)束函數(shù)，后續(xù)代碼不執(zhí)行}//假設(shè)蛇在向右移動，按鍵左右都不起作用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;}//更據(jù)按鍵操作，設(shè)置方向switch(event.keyCode) {case 37:direction = "left"; //方向向左break;case 38:direction = "up";break;case 39:direction = "right";break;case 40:direction = "down";break;}//按鍵后變?yōu)閒alsechangeDir = false;//延遲var delayTime = setTimeout(function() {changeDir = true;clearTimeout(delayTime);}, time);}//蛇的移動偏移量var x = 2;var y = 0;//蛇的移動函數(shù)function snakeMove() {var snameTimer = setInterval(function() {//更據(jù)設(shè)置的方向設(shè)置蛇頭的方向switch(direction) {case "right":x++;break;case "left":x--;break;case "up":y--;break;case "down":y++;break;}//判斷游戲結(jié)束－－碰壁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();//隨機函數(shù)function randomNumber(max) {var ran = Math.floor(Math.random() * max);return ran;}//生成蛋的函數(shù)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>轉(zhuǎn)載于:https://my.oschina.net/yongxinke/blog/852277
總結(jié)
以上是生活随笔為你收集整理的前端那些事之原生 js实现贪吃蛇篇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 年审是当月还是当天_车检是按月份还是日期
- 下一篇： anguler 画面布局适应屏幕大小_前