標籤：注釋 timer lang 檢測 ack lap classname att enter
這是一個特別簡單的用原生js實現的一個小鳥遊戲，比較簡單，適合新手練習
這是html結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="game">
<div id="bird"></div>
</div>
<script src="flappybird.js"></script>
<script src="animate.js"></script>
</body>
</html>
整個案例結構並不多，下面是css樣式
body { margin: 0; padding: 0; } #game { width: 800px; height: 600px; border: 1px solid #000; background: url(images/sky.png); overflow: hidden; position: relative; } #game .pipeD { background: url(images/pipe1.png) top center; position: absolute; } #game .pipeU { background: url(images/pipe2.png) bottom center; position: absolute; } #bird { width: 34px; height: 25px; /*border-radius: 10px;*/ /*background-color: red;*/ position: absolute; top: 100px; left: 100px; background: url(images/birds.png) -8px -10px no-repeat; }
下面就是原生js代碼了，這個小案例還運用了自己前期封裝的一個小的動畫方法
function animate(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function () { var flag = true; for (var k in json) { if (k === "opacity") { var leader = getStyle(obj, k) * 100; var target = json[k] * 100; var step = (target - leader) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); leader = leader + step; obj.style[k] = leader / 100; } else if (k === "zIndex") { obj.style.zIndex = json[k]; } else { var leader = parseInt(getStyle(obj, k)) || 0; var target = json[k]; var step = (target - leader) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); leader = leader + step; obj.style[k] = leader + "px"; } if (leader !== target) { flag = false; } } if (flag) { clearInterval(obj.timer); if (fn) { fn(); } } }, 15);}function getStyle(obj, attr) { if (window.getComputedStyle) { return window.getComputedStyle(obj)[attr]; } else { return obj.currentStyle[attr]; }}
下面就是控制遊戲的js代碼了
var birdElement = document.getElementById("bird");var game = document.getElementById("game");var gameover = false;var g = 1;var i = 0;var timer=null;var bird = { x: birdElement.offsetLeft, y: birdElement.offsetTop, speedX: 5, speedY: 0, entity: birdElement};var sky = { x: 0};//var timer=setInterval(function(){// birdElement.style.backgroundPositionX=-52*i+"px";// i++;// if(i===3){// i=0;// }//},100);setInterval(function () { //遊戲沒有結束的時候運行代碼 if (!gameover) { //整個遊戲背景x軸移動的距離 sky.x = sky.x - bird.speedX; game.style.backgroundPositionX = sky.x + "px"; //小鳥下落時y軸的座標 bird.speedY = bird.speedY + g; //設定一個變數用來接收小鳥下落時y軸的座標，用來設定小鳥下降時的速度 var step = bird.speedY; bird.y = bird.y + step; //用一個變數來設定小鳥下落的最低高度，用來 判斷遊戲是否結束 var overY = game.offsetHeight - birdElement.offsetHeight; //小鳥的y軸座標大於最低高度，所以遊戲停止 if (bird.y > overY) { bird.y = overY; stop(); } //小鳥的y軸座標小於0，說明碰到頂部邊框，所以遊戲結束 if (bird.y < 0) { bird.y = 0; stop(); } //設定遊戲開始時小鳥出現的位置 bird.entity.style.top = bird.y + "px"; }}, 25);//添加鍵盤事件，實現鍵盤上下鍵控制小鳥document.onkeyup = function (e) { if (e.keyCode === 38) { bird.speedY = -10; }}function Pipe(positonX) { //管子的座標 this.x = positonX; this.upPipeY = 0; this.width = 52; this.upPipeH = parseInt(Math.random() * 175 + 100); this.downPipeY = this.upPipeH + 200; this.downPipeH = game.offsetHeight - this.downPipeY; // 動態添加管子 var divUp = document.createElement("div"); divUp.className = "pipeU"; divUp.style.width = this.width + "px"; divUp.style.height = this.upPipeH + "px"; divUp.style.left = this.x + "px"; divUp.style.top = this.upPipeY + "px"; game.appendChild(divUp); var divDown = document.createElement("div"); divDown.className = "pipeD"; divDown.style.width = this.width + "px"; divDown.style.height = this.downPipeH + "px"; divDown.style.left = this.x + "px"; divDown.style.top = this.downPipeY + "px"; game.appendChild(divDown); //因為定時器會混亂this的指向問題，所以提前儲存this的指向，這裡的this指向調用該方法的執行個體 var that = this; // 設定定時器讓管子向後移動 this.timer=setInterval(function () { that.x = that.x - 1; //簡單實現管子無縫滾動 if (that.x < -52) { that.x = 800; } if (!gameover) { divUp.style.left = that.x + "px"; divDown.style.left = that.x + "px"; } // 設定變數，進行遊戲碰撞檢測，並停止遊戲 var downCrash = (bird.x + 34 > that.x) && (bird.x < that.x + 52) && (bird.y + 25 > that.downPipeY); var upCrash = (bird.x + 34 > that.x) && (bird.x < that.x + 52) && (bird.y < that.upPipeH); if (downCrash || upCrash) { //gameover = true; stop(); } }, 10);}//執行上面的函數方法var arr=[];for (var i = 0; i < 4; i++) { arr[i]=new Pipe(i * 200 + 400);}//封裝一個用來停止遊戲的方法，function stop(){ gameover=true; clearInterval(timer); for(var i=0;i<arr.length;i++){ clearInterval(arr[i].timer); }}
注釋都寫在了了代碼裡，一個簡單小遊戲就完成了
一個簡單用原生js實現的小遊戲----FlappyBird
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
