當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

createjs打飞机

發布時間：2023/12/14 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 createjs打飞机小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

此文章代碼來源于createjs打飛機
我只是將他教程代碼，一步步寫出來了而已
下面給出完整代碼，其中有一張雪碧圖和音效資源，包含在源文章中，這里沒有

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="js/easeljs.js"></script><script src="js/soundjs.js"></script><script src="js/preloadjs.js"></script><script src="js/tweenjs.js"></script><script src="js/jquery-2.1.4.min.js"></script><title>Document</title> </head><body><canvas id="game" width="500" height="700" style="background-color: black"></canvas><div id="btn"></div><script>var stage;var starArr = [];const ARROW_KEY_LEFT = 37; //鍵盤左鍵const ARROW_KEY_RIGHT = 39; //鍵盤右鍵const SPACE_KEY = 32; //鍵盤空格var leftKeyDown = false,rightKeyDown = false; // 左右按鍵的狀態var fireAble = true; // 被摧毀// 剩余戰機var lives = 24;// 得分var score = 0;// 敵機var enemyClip = [];// 復制后的敵機var enemy = [];// 戰機var player;// 戰機移動速度var speed = 5;// 子彈var fires = [];// c重新開始breakAble = true;function init() {//1.導入資源，并在資源加載完成后調用處理函數handleComplete//2.創建舞臺stagestage = new createjs.Stage('game');sWidth = stage.canvas.width;sHeight = stage.canvas.height;queue = new createjs.LoadQueue(true);createjs.Sound.registerPlugins([createjs.HTMLAudioPlugin]);queue.installPlugin(createjs.Sound);queue.on("complete", handleComplete);queue.loadFile({id: "shot",src: "music/aa.mp3"});queue.loadManifest([{id: "sprite",src: "./img/sprites.png"},// { id: "shot", src: "music/aa.mp3" },//{id:"explosion", src:"music/explosion.mp3"}]);}init();var instance = null;function handleComplete() {console.log(queue.getResult('shot'));queue.getResult('shot').setAttribute('webkit-playsinline', 'true');queue.getResult('shot').setAttribute('playsinline', 'true');$('#btn').click(function () {var instance = createjs.Sound.play("shot");});$('#btn').click();// instance.paused = true;// instance.on("complete", audioComplete, this);// buildGame(); //3.創建游戲界面，星空，玩家飛機，敵機，計分版等// setControl(); //4.設置按鍵控制，讓玩家可以左右移動并發射子彈// startGame(); //5.進入游戲循環，使用tick事件實現游戲的變化，發展}function audioComplete(e) {console.log('d');console.log(e);}function buildGame() {buildMsg(); //計分，和玩家剩余的飛機數buildPlayer(); //創建玩家的飛機buildEnemy(); //創建敵機buildSpace(); //星空背景，因為我沒有找到星空圖片}function updateGame() {updateStar();updatePlayer();updateFire();updateEnemy();updateMsg();}// 背景function buildSpace() {var i, star, w, h, alpha;// 容器starSky = new createjs.Container();for (i = 0; i < 200; i++) {// 畫布star = new createjs.Shape();w = Math.floor(Math.random() * stage.canvas.width);h = Math.floor(Math.random() * stage.canvas.height);alpha = Math.random();star.graphics.beginFill("#FFF").drawCircle(0, 0, 1);star.x = w;star.y = h;star.alpha = alpha;starSky.addChild(star);starArr.push(star);stage.addChild(starSky);}}// 創建玩家的飛機function buildPlayer() {var data = {images: [queue.getResult("sprite")],frames: [[0, 0, 37, 42],[37, 0, 42, 42],[79, 0, 37, 42],[116, 0, 42, 42],[158, 0, 37, 42],[0, 70, 64, 64],[64, 70, 64, 64],[128, 70, 64, 64],[192, 70, 64, 64],[256, 70, 64, 64],[320, 70, 64, 64],[384, 70, 64, 64],[448, 70, 64, 64],[512, 70, 64, 64],[576, 70, 64, 64],[640, 70, 64, 64],[704, 70, 64, 64],[768, 70, 64, 64]],animations: {ship: 0,enemy1: 1,enemy2: 2,enemy3: 3,enemy4: 4,exp: {frames: [5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],speed: .5}}};spriteSheet = new createjs.SpriteSheet(data);// createjs.Sound.registerSound("./music/explosion.mp3", explosion);player = new createjs.Sprite(spriteSheet, "ship");player.x = sWidth / 2;player.y = sHeight - player.getBounds().height;stage.addChildAt(player, 0);}function setControl() {window.onkeydown = handleKeyDown;window.onkeyup = handleKeyUp;}// 按下function handleKeyDown(e) {e = !e ? window.event : e;switch (e.keyCode) {case ARROW_KEY_LEFT:leftKeyDown = true;break;case ARROW_KEY_RIGHT:rightKeyDown = true;break;}}// 鍵盤抬起function handleKeyUp(e) {e = !e ? window.event : e;switch (e.keyCode) {case ARROW_KEY_LEFT:leftKeyDown = false;break;case ARROW_KEY_RIGHT:rightKeyDown = false;break;case SPACE_KEY:playFire();}}// 發射子彈播放聲音function playFire() {if (fireAble) {var fire = new createjs.Shape();fire.graphics.beginFill("#FF0").drawRect(0, 0, 2, 5).endFill();fire.x = player.x + 18;fire.y = 658;createjs.Sound.play("shot");fires.push(fire);stage.addChild(fire);}}// 創建文字function buildMsg() {livesTxt = new createjs.Text("lives:" + lives, "20px Times", "#FFF");livesTxt.y = 5;livesTxt.x = 10;stage.addChild(livesTxt);scoreTxt = new createjs.Text("score:" + score, "20px Times", "#FFF");scoreTxt.y = 5;scoreTxt.x = sWidth - 100;stage.addChild(scoreTxt);}// 創建飛機function buildEnemy() {var i, e1, e2, e3, e4;e1 = new createjs.Sprite(spriteSheet, "enemy1");e2 = new createjs.Sprite(spriteSheet, "enemy2");e3 = new createjs.Sprite(spriteSheet, "enemy3");e4 = new createjs.Sprite(spriteSheet, "enemy4");enemyClip.push(e1, e2, e3, e4);console.log(enemyClip);buildEnemis();}function buildEnemis() {var i, j = 0,en, en1;var k = 0; for (i = 0; i < 4; i++) {en = enemyClip[i].clone();for (j = 0; j < 6; j++) {k++;en1 = en.clone();enemy.push(en1);createjs.Tween.get(en1).wait(5000 * k).to({x: 300,y: 800}, 5000, createjs.Ease.sineInOut(-2))stage.addChild(en1);}}console.log(enemy);}//更新星星function updateStar() {var i, star, yPos;for (i = 0; i < 200; i++) {star = starArr[i];yPos = star.y + 5 * star.alpha;if (yPos >= stage.canvas.height) {yPos = 0;}star.y = yPos;}}//根據按鍵來更新戰機的位置function updatePlayer() {var nextX = player.x;if (leftKeyDown) {nextX = player.x - speed;if (nextX < 0) {nextX = 0;}} else if (rightKeyDown) {nextX = player.x + speed;if (nextX > (sWidth - 37)) {nextX = sWidth - 37;}}player.x = nextX;}//更新戰機發射的子彈function updateFire() {var i, nextY, fire;for (i = 0; i < fires.length; i++) {fire = fires[i];nextY = fire.y - 10;if (nextY == 0) { //如果子彈飛出屏幕，在子彈數組中去掉，并在stage中刪除元素fires.splice(i, 1)stage.removeChild(fire);continue;}fire.y = nextY;}}//敵機與子彈的碰撞檢測function updateEnemy() {var i, j, fire, enemy1;for (i = 0; i < fires.length; i++) {for (j = 0; j < enemy.length; j++) {fire = fires[i];enemy1 = enemy[j];var fx = fire && fire.x;var fy = fire && fire.y;var ex = enemy1.x;var ey = enemy1.y;var ew = enemy1.getBounds().width;var eh = enemy1.getBounds().height;// 敵機超出屏幕了就清除掉if (ey >= 800 || ex >= 600) {enemy.splice(j, 1);stage.removeChild(enemy1);}// 碰撞檢測if (fy < ey + eh && fy > ey && fx > ex && fx < ex + ew && ey > 0) {// 分數score += 10;fires.splice(i, 1);enemy.splice(j, 1);stage.removeChild(fire);stage.removeChild(enemy1);createjs.Sound.play("explosion");var exp1 = new createjs.Sprite(spriteSheet, "exp");exp1.x = ex;exp1.y = ey;exp1.addEventListener('animationend', function(e) {stage.removeChild(e.target);});stage.addChild(exp1);}}}}//更新分數和剩余生命值function updateMsg() {scoreTxt.text = "score:" + score;livesTxt.text = "lives:" + lives;}// 檢查游戲運行狀態function checkGame() {var i, en, pl;if (enemy.length == 0) {buildEnemis();}pl = player;plx = player.x;ply = player.y;plw = player.getBounds().width;plh = player.getBounds().height;for (i = 0; i < enemy.length; i++) {en = enemy[i];enx = en.x;eny = en.y;enw = en.getBounds().width;enh = en.getBounds().height;if (eny + enh < 800 && eny + enh > ply && enx > plx && enx < plx + plw && breakAble) {stage.removeChild(player);pl = null;player = null;fireAble = false;breakAble = false;setTime = setTimeout(newPlayer, 10);break;}}}function newPlayer() {clearTimeout(setTime);player = new createjs.Sprite(spriteSheet, "ship");player.x = sWidth / 2;player.y = sHeight - player.getBounds().height;player.alpha = 0;createjs.Tween.get(player).to({alpha: 1}, 1000, createjs.Ease.getPowIn(1)).call(function() {lives--;fireAble = true;breakAble = true;});stage.addChildAt(player, 0);}function startGame(event) {createjs.Ticker.setFPS(60);createjs.Ticker.addEventListener('tick', function() {updateGame(); //6.更新游戲元素的位置，更新分數等checkGame();//7.檢查游戲中的元素是否發生碰撞，敵機被擊落，還是飛出屏幕等等stage.update();});}</script> </body></html>

總結

以上是生活随笔為你收集整理的createjs打飞机的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： python 02 --python从
下一篇：项目依赖包文件生成requirement