js+canvas實(shí)現(xiàn)飛機(jī)大戰(zhàn)
本文實(shí)例為大家分享了js canvas實(shí)現(xiàn)飛機(jī)大戰(zhàn)的具體代碼,供大家參考,具體內(nèi)容如下
首先我們繪制一個(gè)canvas區(qū)域,確實(shí)其寬高為480px*852px;水平居中
<!DOCTYPE html> <html lang="en"> ? <head> ? ? <meta charset="UTF-8"> ? ? <meta http-equiv="X-UA-Compatible" content="IE=edge"> ? ? <meta name="viewport" content="width=device-width, initial-scale=1.0"> ? ? <title>Document</title> ? ? <style> ? ? ? ? canvas { ? ? ? ? ? ? position: absolute; ? ? ? ? ? ? left: 0; ? ? ? ? ? ? right: 0; ? ? ? ? ? ? margin: auto; ? ? ? ? ? ? border: #000 solid 1px; ? ? ? ? } ? ? </style> </head> ? <body> ? ? <canvas width="480" height="852"></canvas> </body> ? </html>
然后我們?cè)儆胘s查詢相應(yīng)的canvas,再確定畫筆cex;然后定一個(gè)全局變量state代表游戲狀態(tài)。
其中state=0表示游戲初始化,state=1代表我方飛機(jī)入場(chǎng),state=2代表戰(zhàn)斗過程,state=3代表暫停過程,state=4代表游戲結(jié)束過程。
var canvas = document.getElementsByTagName("canvas")[0]; var cex = canvas.getContext('2d'); var state = 0; //狀態(tài)
再確實(shí)背景圖片,根據(jù)圖片大小確實(shí)背景的的寬高等數(shù)據(jù),再編寫相應(yīng)的函數(shù),最終使用函數(shù)聲明出一個(gè)背景圖片對(duì)象出來。
//背景圖片 var bg = new Image() ? ? ? ? bg.src = 'img/background.png' ? ? ? ? // 背景數(shù)據(jù)對(duì)象 ? ? ? ? var bakgobj = { ? ? ? ? ? ? img: bg, ? ? ? ? ? ? width: 480, ? ? ? ? ? ? height: 852, ? ? ? ? } ? ? ? ? // 背景函數(shù) ? ? ? ? function By(params) { ? ? ? ? ? ? this.width = params.width; ? ? ? ? ? ? this.height = params.height; ? ? ? ? ? ? this.img = params.img; ? ? ? ? ? ? this.x = 0; ? ? ? ? ? ? this.y = 0; ? ? ? ? ? ? this.y1 = -this.height; ? ? ? ? ? ? // 背景繪制 ? ? ? ? ? ? this.paint = function () { ? ? ? ? ? ? ? ? cex.drawImage(this.img, this.x, this.y); ? ? ? ? ? ? ? ? cex.drawImage(this.img, this.x, this.y1) ? ? ? ? ? ? } ? ? ? ? ? ? // 背景運(yùn)動(dòng) ? ? ? ? ? ? this.sprot = function () { ? ? ? ? ? ? ? ? this.y += 3; ? ? ? ? ? ? ? ? this.y1 += 3; ? ? ? ? ? ? ? ? if (this.y >= this.height) { ? ? ? ? ? ? ? ? ? ? this.y = -this.height; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? if (this.y1 >= this.height) { ? ? ? ? ? ? ? ? ? ? this.y1 = -this.height; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? } // 背景對(duì)象 var bakg = new By(bakgobj);
聲明出相應(yīng)的logo圖片與暫停圖片
// logo圖片 var logo = new Image(); ? ? ? ? logo.src = 'img/start.png' // 暫停圖片 var pause = new Image(); ? ? ? ? pause.src = 'img/game_pause_nor.png';
使用相同的思路聲明入場(chǎng)時(shí)的飛機(jī)對(duì)象
// 入場(chǎng)階段 var gamearr = ['img/game_loading1.png', 'img/game_loading2.png', 'img/game_loading3.png', ? ? ? ? ? ? 'img/game_loading4.png' ? ? ? ? ]; ? ? ? ? // 入場(chǎng)圖片對(duì)象 ? ? ? ? var gameArr = []; ? ? ? ? for (var i = 0; i < gamearr.length; i++) { ? ? ? ? ? ? gameArr[i] = new Image(); ? ? ? ? ? ? gameArr[i].src = gamearr[i]; ? ? ? ? } ? ? ? ? // 入場(chǎng)飛機(jī)數(shù)據(jù) ? ? ? ? var gameobj = { ? ? ? ? ? ? img: gameArr, ? ? ? ? ? ? width: 186, ? ? ? ? ? ? height: 38, ? ? ? ? ? ? length: gameArr.length ? ? ? ? } ? ? ? ? // 入場(chǎng)飛機(jī)函數(shù) ? ? ? ? function Game(params) { ? ? ? ? ? ? this.imgs = params.img; ? ? ? ? ? ? this.width = params.width; ? ? ? ? ? ? this.height = params.height; ? ? ? ? ? ? this.length = params.length; ? ? ? ? ? ? this.index = 0; //入場(chǎng)順序圖片下標(biāo) ? ? ? ? ? ? this.thim = 0; ? ? ? ? ? ? this.paint = function () { ? ? ? ? ? ? ? ? cex.drawImage(this.imgs[this.index], 0, bakg.height - this.height); ? ? ? ? ? ? } ? ? ? ? ? ? this.sprot = function () { ? ? ? ? ? ? ? ? this.thim++; ? ? ? ? ? ? ? ? if (this.thim % 3 == 0) { ? ? ? ? ? ? ? ? ? ? this.index++; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? if (this.index == this.length) { ? ? ? ? ? ? ? ? ? ? state = 2; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? } ? ? ? ? } ? ? ? ? // 入場(chǎng)飛機(jī)對(duì)象 ? ? ? ? var game = new Game(gameobj);
再聲明飛機(jī)對(duì)象
// 飛機(jī)圖片 var heroarr = ['img/hero1.png', 'img/hero2.png'] // 飛機(jī)圖片對(duì)象 var heroArr = []; ? ? ? ? for (var i = 0; i < heroarr.length; i++) { ? ? ? ? ? ? heroArr[i] = new Image(); ? ? ? ? ? ? heroArr[i].src = heroarr[i]; ? ? ? ? } ? ? ? ? // 飛機(jī)數(shù)據(jù) ? ? ? ? var heroobj = { ? ? ? ? ? ? img: heroArr, ? ? ? ? ? ? width: 99, ? ? ? ? ? ? height: 124, ? ? ? ? ? ? length: heroArr.length, ? ? ? ? ? ? full:4, //生命 ? ? ? ? ? ? invinc_:50, ? ? //無敵時(shí)間 ? ? ? ? ? ? maga:500, ? //子彈數(shù)量 ? ? ? ? } ? ? ? ? // 飛機(jī)函數(shù) ? ? ? ? function Hero(params) { ? ? ? ? ? ? this.imgs = params.img; ? ? ? ? ? ? this.width = params.width; ? ? ? ? ? ? this.height = params.height; ? ? ? ? ? ? this.length = params.length; ? ? ? ? ? ? this.x = (bakgobj.width - this.width) / 2; ? ? ? ? ? ? this.y = bakgobj.height - this.height; ? ? ? ? ? ? this.index = 0; ? ? ? ? ? ? this.maga=params.maga; ? ? ? ? ? ? this.full=params.full; ? //飛機(jī)生命 ? ? ? ? ? ? this.invinc=0; ?//初始無敵時(shí)間 ? ? ? ? ? ? this.invinc_=params.invinc_; ? ? ? ? ? ? this.frac=0; ? ?//飛機(jī)分?jǐn)?shù); ? ? ? ? ? ? this.cou = 0; //控制子彈發(fā)射速度 ? ? ? ? ? ? this.ene = 0; //控制敵機(jī)出現(xiàn)頻率 ? ? ? ? ? ? this.paint = function () { ? ? ? ? ? ? ? ? if((this.invinc>0 && this.invinc%2==0)||this.invinc<=0){ ? ? ? ? ? ? ? ? ? ? cex.drawImage(this.imgs[this.index], this.x, this.y) ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ?? ? ? ? ? ? ? } ? ? ? ? ? ? this.sprot = function () { ? ? ? ? ? ? ? ? this.index++; ? ? ? ? ? ? ? ? if (this.index == 2) { ? ? ? ? ? ? ? ? ? ? this.index = 0; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? ? ? // 增加射出子彈 ? ? ? ? ? ? this.bullk = function () { ? ? ? ? ? ? ? ? this.cou++; ? ? ? ? ? ? ? ? // 子彈發(fā)射速度 ? ? ? ? ? ? ? ? // if (this.cou % 5 == 0) { ? ? ? ? ? ? ? ? ? ? bullsec.push(new Bull(bullobj)) ? ? ? ? ? ? ? ? // } ? ? ? ? ? ? } ? ? ? ? ? ? // 增加敵機(jī) ? ? ? ? ? ? this.enemysos = function () { ? ? ? ? ? ? ? ? if (this.ene % 20 == 0) { ? ? ? ? ? ? ? ? ? ? var rand = Math.random(); ? ? ? ? ? ? ? ? ? ? if (rand < 0.5) { ? ? ? ? ? ? ? ? ? ? ? ? enemy.push(new Enemy(enemy1obj)) ? ? ? ? ? ? ? ? ? ? } else if (rand < 0.8) { ? ? ? ? ? ? ? ? ? ? ? ? enemy.push(new Enemy(enemy2obj)) ? ? ? ? ? ? ? ? ? ? } else { ? ? ? ? ? ? ? ? ? ? ? ? enemy.push(new Enemy3(enemy3obj)) ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? this.ene++; ? ? ? ? ? ? } ? ? ? ? } var hero = new Hero(heroobj);
子彈對(duì)象與數(shù)組
// 子彈圖像 var bullimg = new Image(); bullimg.src = 'img/bullet1.png'; // 子彈數(shù)據(jù) var bullobj = { ? ? ? ? ? ? img: bullimg, ? ? ? ? ? ? width: 9, ? ? ? ? ? ? height: 21, ? ? ? ? } ? ? ? ? // 子彈函數(shù) ? ? ? ? function Bull(params) { ? ? ? ? ? ? this.img = params.img; ? ? ? ? ? ? this.width = params.width; ? ? ? ? ? ? this.height = params.height; ? ? ? ? ? ? this.x = hero.x + hero.width / 2 - this.width / 2; ? ? ? ? ? ? this.y = hero.y - this.height; ? ? ? ? ? ? this.paint = function () { ? ? ? ? ? ? ? ? cex.drawImage(this.img, this.x, this.y) ? ? ? ? ? ? } ? ? ? ? ? ? this.sprot = function () { ? ? ? ? ? ? ? ? this.y -= 20; //子彈飛行速度 ? ? ? ? ? ? } ? ? ? ? } ? ? ? ? var bull = new Bull(bullobj); ? ? ? ? // 界面上的子彈數(shù)組; ? ? ? ? var bullsec = []; ? ? ? ? ? function bull_paint() { ? ? ? ? ? ? for (var i = 0; i < bullsec.length; i++) { ? ? ? ? ? ? ? ? bullsec[i].paint(); ? ? ? ? ? ? } ? ? ? ? } ? ? ? ? ? function bull_sprot() { ? ? ? ? ? ? for (var i = 0; i < bullsec.length; i++) { ? ? ? ? ? ? ? ? bullsec[i].sprot(); ? ? ? ? ? ? } ? ? ? ? }
敵機(jī)小、中、大對(duì)象與數(shù)組、方法
// 敵機(jī)--小 var enemy1arr = ['img/enemy1.png', 'img/enemy1_down1.png', 'img/enemy1_down2.png', 'img/enemy1_down3.png', ? ? ? ? ? ? 'img/enemy1_down4.png' ? ? ? ? ] ? ? ? ? var enemy1Arr = []; ? ? ? ? for (var i = 0; i < enemy1arr.length; i++) { ? ? ? ? ? ? enemy1Arr[i] = new Image(); ? ? ? ? ? ? enemy1Arr[i].src = enemy1arr[i]; ? ? ? ? } ? ? ? ? //敵機(jī)—-小 ? 數(shù)據(jù) ? ? ? ? var enemy1obj = { ? ? ? ? ? ? img: enemy1Arr, ? ? ? ? ? ? width: 57, ? ? ? ? ? ? height: 51, ? ? ? ? ? ? length: enemy1Arr.length, ? ? ? ? ? ? frac:3, ? ? ? ? ? ? full:1, ? ? ? ? } ? ? ? ? ? // 敵機(jī)--中 ? ? ? ? var enemy2arr = ['img/enemy2.png', 'img/enemy2_down1.png', 'img/enemy2_down2.png', 'img/enemy2_down3.png', ? ? ? ? ? ? 'img/enemy2_down4.png' ? ? ? ? ] ? ? ? ? var enemy2Arr = []; ? ? ? ? for (var i = 0; i < enemy2arr.length; i++) { ? ? ? ? ? ? enemy2Arr[i] = new Image(); ? ? ? ? ? ? enemy2Arr[i].src = enemy2arr[i]; ? ? ? ? } ? ? ? ? //敵機(jī)--中 ? 數(shù)據(jù) ? ? ? ? var enemy2obj = { ? ? ? ? ? ? img: enemy2Arr, ? ? ? ? ? ? width: 69, ? ? ? ? ? ? height: 95, ? ? ? ? ? ? length: enemy2Arr.length, ? ? ? ? ? ? frac:5, ? ? ? ? ? ? full:2, ? ? ? ? } ? ? ? ? ? ?// 敵機(jī)--小、中 函數(shù) ? ? ? ? ?function Enemy(params) { ? ? ? ? ? ? this.imgs = params.img; ? ? ? ? ? ? this.width = params.width; ? ? ? ? ? ? this.height = params.height; ? ? ? ? ? ? this.length = params.length; ? ? ? ? ? ? this.frac=params.frac; ? ? ? ? ? ? this.index = 0; ? ? ? ? ? ? this.buff=Math.random<0.05?true:false; ? //隨機(jī)帶buff ? ? ? ? ? ? this.ext=false;//敵機(jī)是否被擊落 ? ? ? ? ? ? this.full = params.full; //敵機(jī)生命值 ? ? ? ? ? ? this.x = Math.random() * (bakg.width - this.width); ? ? ? ? ? ? this.y = -this.height; ? ? ? ? ? ? this.paint = function () { ? ? ? ? ? ? ? ? cex.drawImage(this.imgs[this.index], this.x, this.y); ? ? ? ? ? ? } ? ? ? ? ? ? this.sprot = function () { ? ? ? ? ? ? ? ? this.y += 5; ? ? ? ? ? ? ? ? if (this.full <= 0) { ? ? ? ? ? ? ? ? ? ? this.index++; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? } ? ? ? ? ? // 敵機(jī)--大 ? ? ? ? ? var enemy3arr = ['img/enemy3_n1.png', 'img/enemy3_n2.png', 'img/enemy3_hit.png', 'img/enemy3_down1.png', ? ? ? ? ? ? 'img/enemy3_down2.png', 'img/enemy3_down3.png', 'img/enemy3_down4.png', 'img/enemy3_down5.png', ? ? ? ? ? ? 'img/enemy3_down6.png' ? ? ? ? ] ? ? ? ? var enemy3Arr = []; ? ? ? ? for (var i = 0; i < enemy3arr.length; i++) { ? ? ? ? ? ? enemy3Arr[i] = new Image(); ? ? ? ? ? ? enemy3Arr[i].src = enemy3arr[i]; ? ? ? ? } ? ? ? ? //敵機(jī)--大 ? 數(shù)據(jù) ? ? ? ? var enemy3obj = { ? ? ? ? ? ? img: enemy3Arr, ? ? ? ? ? ? width: 169, ? ? ? ? ? ? height: 258, ? ? ? ? ? ? length: enemy3Arr.length, ? ? ? ? ? ? frac:10, ? ? ? ? ? ? full:4, ? ? ? ? } ? ? ? ? // 敵機(jī)--大 ? 函數(shù) ? ? ? ? function Enemy3(params) { ? ? ? ? ? ? this.imgs = params.img; ? ? ? ? ? ? this.width = params.width; ? ? ? ? ? ? this.height = params.height; ? ? ? ? ? ? this.length = params.length; ? ? ? ? ? ? this.frac=params.frac; ? ? ? ? ? ? this.index = 0; ? ? ? ? ? ? this.thim = 0; ? ? ? ? ? ? this.buff=Math.random<0.2?true:false; ? //隨機(jī)帶buff ? ? ? ? ? ? this.ext=false;//敵機(jī)是否被擊落 ? ? ? ? ? ? this.full = params.full; ? ? ? ? ? ? this.full_=Math.floor(this.full/2);//戰(zhàn)損 ? ? ? ? ? ? this.x = Math.random() * (bakg.width - this.width); ? ? ? ? ? ? this.y = -this.height; ? ? ? ? ? ? this.paint = function () { ? ? ? ? ? ? ? ? cex.drawImage(this.imgs[this.index], this.x, this.y); ? ? ? ? ? ? } ? ? ? ? ? ? this.sprot = function () { ? ? ? ? ? ? ? ? this.y += 5; ? ? ? ? ? ? ? ? if (this.full <= 0) { ? ? ? ? ? ? ? ? ? ? this.index++; ? ? ? ? ? ? ? ? }else if(this.full>0&&this.full<=this.full_){ ? ? ? ? ? ? ? ? ? ? this.index=2; ? ? ? ? ? ? ? ? }else if (this.thim % 5 == 0) { ? ? ? ? ? ? ? ? ? ? this.index++; ? ? ? ? ? ? ? ? ? ? if (this.index == 2) { ? ? ? ? ? ? ? ? ? ? ? ? this.index = 0; ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? this.thim++; ? ? ? ? ? ? } ? ? ? ? } ? ? ? ? //敵機(jī)數(shù)組 ? ? ? ? var enemy = []; ? ? ? ? // 敵機(jī)繪制 ? ? ? ? function enemy_paint() { ? ? ? ? ? ? for (var i = 0; i < enemy.length; i++) { ? ? ? ? ? ? ? ? enemy[i].paint(); ? ? ? ? ? ? } ? ? ? ? } ? ? ? ? // 敵機(jī)移動(dòng) ? ? ? ? function enemy_sprot() { ? ? ? ? ? ? for (var i = 0; i < enemy.length; i++) { ? ? ? ? ? ? ? ? enemy[i].sprot(); ? ? ? ? ? ? } ? ? ? ? } ? ? ? ? // 敵機(jī)爆炸后刪除 ? ? ? ? function enemy_del(){ ? ? ? ? ? ? for(var i=0;i<enemy.length;i++){ ? ? ? ? ? ? ? ? if(enemy[i].index==enemy[i].length){ ? ? ? ? ? ? ? ? ? ? hero.frac+=enemy[i].frac; ? ? ? ? ? ? ? ? ? ? enemy.splice(i,1); ? ? ? ? ? ? ? ? ? ? i--; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? }
再創(chuàng)建一個(gè)函數(shù)判斷碰撞
// 檢測(cè)敵機(jī)是否產(chǎn)生碰撞 function enemy_bull_hero() { ? ? ? ? ? ? hero.invinc--; ? ? ? ? ? ? for (var i = 0; i < enemy.length; i++) { ? ? ? ? ? ? ? ? if (hero.invinc<=0&&hero.y <= enemy[i].y + enemy[i].height&&hero.y>enemy[i].y-hero.height) { ? ? ? ? ? ? ? ? ? ? if (hero.x > enemy[i].x - hero.width && hero.x < enemy[i].x + enemy[i].width) { ? ? ? ? ? ? ? ? ? ? ?// 飛機(jī)與敵機(jī)碰撞; ? ? ? ? ? ? ? ? ? ? ? ? hero.full--; ? ? ? ? ? ? ? ? ? ? ? ? hero.invinc=hero.invinc_; ? ? ? ? ? ? ? ? ? ? ? ? if(hero.full==0){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? state = 4; ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? for (var n = 0; n < bullsec.length; n++) { ? ? ? ? ? ? ? ? ? ? if (!enemy[i].ext&&bullsec[n].y <= enemy[i].y + enemy[i].height&&bullsec[n].y>enemy[i].y-bullsec[n].height) { ? ? ? ? ? ? ? ? ? ? ? ? if (bullsec[n].x > enemy[i].x - bullsec[n].width && bullsec[n].x < enemy[i].x + enemy[i] ? ? ? ? ? ? ? ? ? ? ? ? ? ? .width) { ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 敵機(jī)與子彈碰撞; ? ? ? ? ? ? ? ? ? ? ? ? ? ? bullsec.splice(n, 1); ? ? ? ? ? ? ? ? ? ? ? ? ? ? n--; ? ? ? ? ? ? ? ? ? ? ? ? ? ? enemy[i].full--; ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(enemy[i].full<=0){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? enemy[i].ext=true; ? ? ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? }
再分別綁定相應(yīng)的事件
//點(diǎn)擊畫布從狀態(tài)0切換到狀態(tài)1; canvas.onclick = function () { ? ? ? ? ? ? if (state == 0) { ? ? ? ? ? ? ? ? state = 1; ? ? ? ? ? ? } ? ? ? ? } ? ? ? ? // 飛機(jī)跟隨鼠標(biāo)移動(dòng) ? ? ? ? canvas.onmousemove = function (e) { ? ? ? ? ? ? if (state == 3) { ? ? ? ? ? ? ? ? state = 2; ? ? ? ? ? ? } ? ? ? ? ? ? if (state == 2) { ? ? ? ? ? ? ? ? var x = e.offsetX; ? ? ? ? ? ? ? ? var y = e.offsetY; ? ? ? ? ? ? ? ? hero.x = x - hero.width / 2; ? ? ? ? ? ? ? ? hero.y = y - hero.height / 2; ? ? ? ? ? ? } ? ? ? ? } ? ? ? ? // 鼠標(biāo)移出暫停 ? ? ? ? canvas.onmouseout = function () { ? ? ? ? ? ? if (state == 2) { ? ? ? ? ? ? ? ? state = 3; ? ? ? ? ? ? } ? ? ? ? } ? ? ? ? // 彈夾子彈發(fā)射 ? ? ? ? document.onkeydown =function(event){ ? ? ? ? ? ? if(state==2){ ? ? ? ? ? ? ? ? if(event.keyCode==32&&hero.maga>0){ ? ? ? ? ? ? ? ? ? ? hero.bullk() //增加界面射出子彈 ? ? ? ? ? ? ? ? ? ? hero.maga--; ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? ? ?? ? ? ? ? };
最終在定時(shí)器中實(shí)時(shí)更新相應(yīng)的畫面
?setInterval(function () { ? ? ? ? ? ? bakg.paint() ? ? ? ? ? ? bakg.sprot() ? ? ? ? ? ? cex.font='40px 微軟雅黑'; ? ? ? ? ? ? cex.fillText('生命:'+hero.full,330,40); ? ? ? ? ? ? cex.fillText('分?jǐn)?shù):'+hero.frac,0,40); ? ? ? ? ? ? cex.fillText('子彈:'+hero.maga,0,80); ? ? ? ? ? ? if (state == 0) { //初始化 ? ? ? ? ? ? ? ? cex.drawImage(logo, 40, 0); ? ? ? ? ? ? } ? ? ? ? ? ? if (state == 1) { //出場(chǎng)動(dòng)畫 ? ? ? ? ? ? ? ? game.paint(); ? ? ? ? ? ? ? ? game.sprot(); ? ? ? ? ? ? } ? ? ? ? ? ? if (state == 2) { //戰(zhàn)斗狀態(tài) ? ? ? ? ? ? ? ? hero.paint() ? ? ? ? ? ? ? ? hero.sprot() ? ? ? ? ? ? ? ? bull_paint() ? ? ? ? ? ? ? ? bull_sprot() ? ? ? ? ? ? ? ? hero.enemysos() //增加敵機(jī)數(shù)量 ? ? ? ? ? ? ? ? enemy_paint() ? ? ? ? ? ? ? ? enemy_sprot() ? ? ? ? ? ? ? ? enemy_bull_hero() //碰撞檢測(cè) ? ? ? ? ? ? ? ? enemy_del(); ? ? ? ? ? ? } ? ? ? ? ? ? if (state == 3) { //暫停狀態(tài) ? ? ? ? ? ? ? ? cex.drawImage(pause, 210, 375) ? ? ? ? ? ? ? ? hero.paint() ? ? ? ? ? ? ? ? bull_paint() ? ? ? ? ? ? ? ? enemy_paint() ? ? ? ? ? ? } ? ? ? ? ? ? if (state == 4) { //游戲結(jié)束狀態(tài) ? ? ? ? ? ? ? ? cex.fillText('菜',bakg.width/2-30,bakg.height/2-90); ? ? ? ? ? ? } ? ? ? ? }, 30)
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JavaScript實(shí)現(xiàn)前端飛機(jī)大戰(zhàn)小游戲
- JavaScript編寫實(shí)現(xiàn)飛機(jī)大戰(zhàn)
- JavaScript實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲
- 用JS實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲
- 原生JS實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲
- js實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲
- JS面向?qū)ο髮?shí)現(xiàn)飛機(jī)大戰(zhàn)
- js實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲
- JavaScript原生編寫《飛機(jī)大戰(zhàn)坦克》游戲完整實(shí)例
- js+css實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲
相關(guān)文章
javascript實(shí)現(xiàn)通過表格繪制顏色填充矩形的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)通過表格繪制顏色填充矩形的方法,涉及javascript操作表格與樣式的相關(guān)技巧,需要的朋友可以參考下2015-04-04Bootstrap文件上傳組件之bootstrap fileinput
這篇文章主要介紹了Bootstrap文件上傳組件之bootstrap fileinput,重點(diǎn)是把界面做得更加友好,更好的增加用戶體驗(yàn)。還有還多注意細(xì)節(jié)大家可以通過本文詳細(xì)了解下2016-11-11js和jquery中循環(huán)的退出和繼續(xù)下一個(gè)循環(huán)
退出循環(huán),使用break;退出當(dāng)前循環(huán)繼續(xù)下一個(gè)循環(huán),使用continue,jquery中使用return false;continue,使用return true2014-09-09一步步教你利用Canvas對(duì)圖片進(jìn)行處理
這篇文章主要給大家介紹了關(guān)于利用Canvas對(duì)圖片進(jìn)行處理的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-09-09使用純JS代碼判斷字符串中有多少漢字的實(shí)現(xiàn)方法(超簡(jiǎn)單實(shí)用)
這篇文章主要給大家介紹了js判斷字符串中有多少漢字的實(shí)現(xiàn)方法然后給大家分享了使用JS判斷輸入字符串長(zhǎng)度的兩種方法,非常不錯(cuò)具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-11-11Bootstrap 實(shí)現(xiàn)表格樣式、表單布局的實(shí)例代碼
這篇文章主要介紹了Bootstrap 實(shí)現(xiàn)表格樣式、表單布局的實(shí)例代碼,需要的朋友可以參考下2018-12-12