JavaScript 基於canvas的小遊戲

2021-08-26 12:40:31 字數 3586 閱讀 8780

之前在寫的打小怪獸遊戲總算初步完工了,上**嘍~

//顯示元素

var score = document.queryselectorall(".score");

// 畫布元素

var container = document.getelementbyid('game');

var canvas = document.getelementbyid('canvas');

var context = canvas.getcontext('2d');

//遊戲元素

var plane_img = new image();

plane_img.src = "img/plane.png";

var enemy_img = new image();

enemy_img.src = "img/enemy.png"

var boom_img = new image();

boom_img.src = "img/boom.png"

// 背景**

var audio_menu = document.getelementbyid('menu');

var audio_play = document.getelementbyid('play');

/** * @description 飛機物件

* @constructor

* @param x 表示飛機在畫布上的期望橫座標

* @param direction 表示飛機的移動方向

* @param shoot 表示飛機是否正在射擊

*/function plane(x) ;

plane.prototype.moveleft = function () ;

plane.prototype.moveright = function () ;

plane.prototype.stop = function ()

plane.prototype.shoot = function () ;

/** * @description 子彈物件

* @constructor

* @param x 表示子彈在畫布上的橫座標

* @param y 表示子彈在畫布上的縱座標

*/function bullet(x, y)

bullet.prototype.fly = function () ;

/**

* @description 怪獸物件

* @constructor

* @param x 表示怪獸在畫布上的橫座標

* @param y 表示怪獸在畫布上的縱座標

* @param direction 表示怪獸的移動方向,該屬性由所有怪獸共享

* alive 表示怪獸存活

* boom 表示命中

* die 表示死亡

*/function enemy(x, y) ;

enemy.prototype.direction = "right";

enemy.prototype.move = function () else

};enemy.prototype.boom = function () , 100);

};/**

* 整個遊戲物件

*/var gamewindow = ;

replaybtn[0].onclick = function () ;

replaybtn[1].onclick = function () ;

},/**

* 更新遊戲狀態,分別有以下幾種狀態:

* start 遊戲前

* playing 遊戲中

* failed 遊戲失敗

* success 遊戲成功

*/setstatus: function (status) ,

play: function () ,

fail: function () ,

success: function () ,

};// 初始化

gamewindow.init();

/** * 遊戲實時資料物件

* 包含乙個遊戲初始化方法

*/var game = ,

animate: function () , 500);

return;

}// 更新飛機座標

if (game.plane.direction == "left" && game.plane.x > 30) game.plane.x -= 5;

else

if (game.plane.direction == "right" && game.plane.x < 610) game.plane.x += 5;

// 更新子彈座標

for (var i = 0; i < game.bullets.length; i++)

}// 更新怪獸座標

for (var i = 0; i < game.enemys.length; i++) else

}// 怪獸觸邊檢測

for (var i = 0; i < game.enemys.length; i++)

}break;

} else

if (game.enemys[i].status == "alive" && game.enemys[i].x > 620)

}break;}}

// 子彈命中檢測

for (var i = 0; i < game.enemys.length; i++) }}

// 更新分數

score[0].innerhtml = game.score;

// 擦除畫布

context.clearrect(0, 0, canvas.width, canvas.height);

// 畫出怪獸

for (var i = 0; i < game.enemys.length; i++) else

if (game.enemys[i].status == "boom")

}//畫出子彈

for (var i = 0; i < game.bullets.length; i++)

//畫出飛機

context.drawimage(plane_img, game.plane.x, 475, 60, 100);

requestanimationframe(game.animate);

},createenemys: function (num)

return enemys;

},keydown_listener: function (e) else

if (keynum == 39) else

if (keynum == 32)

return

false; // 禁止螢幕滾動}},

keyup_listener: function (e) else

if (keynum == 39 && game.plane.direction == "right") else

if (keynum == 32)

}};

can例程 ecu 基於CAN匯流排的ECU設計

龍源期刊網 基於can 匯流排的ecu 設計于玲年第期 摘要 為了組建基於 can匯流排的控制單元,本文設計了一款相容標準 核心的mcu 提出總體設計方案,分層去實現各模組的功能。利用流水線的設計技術,對 mcu標準 核進行了精簡和優化,從而提高了產品的綜合處理速度,並減少了成品的設計面積。按照自上...

基於簡單工廠模式的CAN報文解析

所謂工廠模式,就是通過物件建立模式繞開new,來避免物件建立 new 過程中所導致的緊耦合,從而支援物件闖將的穩定。具體實現是通過定義乙個用於建立物件的介面,讓子類例項化哪乙個類,本例中應用的是簡單工廠模式,基類為parse frame,定義了解析can報文的資料結構以及解析的方法,子類為parse...

javascript基於原型的繼承機制

請區分兩個物件 function物件及原型物件 以object為例 每個函式本身就是乙個建構函式 每個函式又對應乙個原型物件 1 當建立乙個變數時 var aa new object 等價於var aa aa.name fjs console.log aa.proto object.prototyp...