航空機戦争ゲームを実装するためのJavaScript
|
この記事では、キャンバスとjsを使用して簡単な飛行機戦争を実装する方法を参考までに紹介します。具体的な内容は次のとおりです。 プレビュー画像:
コード：
<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="UTF-8">
<meta http-equiv="X-UA-compatible" content="IE=edge">
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
<title>ドキュメント</title>
<スタイル>
キャンバス {
表示: ブロック;
マージン: 0 自動;
境界線: 1px実線 #000;
}
</スタイル>
</head>
<本文>
<キャンバス></キャンバス>
<スクリプト>
// キャンバス要素を取得します。var canvas = document.getElementsByTagName('canvas')[0];
// ブラシを取得します var ctx = canvas.getContext('2d');
// キャンバス情報 var canvasParam = {
幅: 480,
高さ: 852
}
キャンバスの幅 = キャンバスの幅;
キャンバスの高さ = キャンバスの高さ;
// ゲーム ステータスを初期化します var ready = 0; // 準備中 var loading = 1; // ロード中 var running = 2; // ゲーム中 var pause = 3; // 一時停止 var gameOver = 4; // 終了 // 現在のゲーム ステータスを決定します var gameState = ready;
// ライフ値を初期化します var life = 3;
// ゲームスコアを初期化します var score = 0;
// 背景/
// 背景画像を作成します var bgSrc = new Image();
bgSrc.src = 'img/background.png';
// 背景画像情報 var bgParam = {
bgSrc: bgSrc,
x: 0,
y: 0,
幅: 480,
高さ: 852
}
// コンストラクタ: 背景関数 Bg(param) {
this.bgSrc = param.bgSrc;
パラメータx = this.x;
パラメータyを次のように変更します。
パラメータy1を次のように変更します。
パラメータwidthは、次の式で定義されます。
高さをパラメータに設定します。
// 交互画像座標 this.y1 = -this.height;
// 背景画像を描画する this.paint = function() {
ctx.drawImage(this.bgSrc、this.x、this.y、this.width、this.height);
ctx.drawImage(this.bgSrc、this.x、this.y1、this.width、this.height);
}
// 背景画像が交互に動きます this.sport = function() {
y = 5;
y1 += 5; となります。
（this.y >= this.height）の場合{
this.y = -this.height;
}
（this.y1 >= this.height）の場合{
this.y1 = -this.height;
}
}
}
// 背景画像をインスタンス化します var bgObj = new Bg(bgParam);
// ロゴを作成する
var logoSrc = 新しい画像();
ロゴSrc.src = 'img/start.png';
//ロゴ情報 var logoParam = {
ロゴSrc: ロゴSrc、
x: 0,
y: 0,
幅: 480,
高さ: 852
}
// コンストラクターのロゴ
関数Logo(param) {
パラメータ:
パラメータx = this.x;
パラメータyを次のように変更します。
パラメータwidthは、次の式で定義されます。
高さをパラメータに設定します。
// ロゴを描く
this.paint = 関数() {
ctx.drawImage(this.logoObj、this.x、this.y、this.width、this.height);
}
}
// ロゴオブジェクトをインスタンス化します。 var logoObj = new Logo(logoParam);
// キャンバスをクリックして読み込みの次の段階に入ります
キャンバス.onclick = 関数() {
ゲーム状態が準備完了の場合
ゲーム状態 = ロード中;
}
}
// ゲーム読み込みフェーズ読み込み
// 航空機が接近中 // 航空機が接近中の写真 var loadImgArr = ['img/game_loading1.png', 'img/game_loading2.png', 'img/game_loading3.png', 'img/game_loading4.png']
// 接近する航空機の写真を保存するための空の配列 var loadingImg = [];
// 航空機の進入写真を作成し、配列loadingImgに格納するループ for (var i = 0; i < loadImgArr.length; i++) {
loadImg[i] = 新しい画像();
読み込みImg[i].src = loadImgArr[i];
}
// 航空機進入画像情報 var loadingParam = {
読み込み中画像: 読み込み中画像、
x: 0,
幅: 186,
高さ: 38
}
// コンストラクター: 航空機進入情報関数 Loading(param) {
this.loadingImg = loadingImg;
パラメータwidthは、次の式で定義されます。
高さをパラメータに設定します。
パラメータx = this.x;
this.y = canvasParam.height - param.height;
// 読み込み画像のインデックスを定義します。this.index = 0;
// タイマーの実行回数を決定するために num を定義します。this.num = 0;
// 読み込み画像を描画する this.paint = function() {
ctx.drawImage(this.loadingImg[this.index], this.x, this.y, this.width, this.height);
}
// 読み込み画像を変更する this.sport = function() {
this.num++;
if (this.num % 5 == 0) {
this.index++;
if (this.index === this.loadingImg.length) {
ゲーム状態 = 実行中;
}
}
}
}
// 積載中の航空機オブジェクトをインスタンス化します。var loadingObj = new Loading(loadingParam);
//私たちの飛行機///
// さまざまな状態の航空機の写真 var heroImgs = [
'img/hero1.png',
'img/hero2.png',
'img/hero1.png',
'img/hero_blowup_n1.png',
'img/hero_blowup_n2.png',
'img/hero_blowup_n3.png',
'img/hero_blowup_n4.png'
]
// さまざまな状態の航空機の写真を保存するための空の配列を作成します var heroRunning = [];
// ループして航空機の画像を作成し、配列 heroRunning に格納します。for (var i = 0; i < heroImgs.length; i++) {
heroRunning[i] = 新しいイメージ();
heroRunning[i].src = heroImgs[i];
}
// 航空機情報 var heroParam = {
haroRunning: heroRunning、
幅: 99,
高さ: 124
}
// 航空機コンストラクタ関数 Hero(param) {
this.heroRunning = heroRunning;
this.x = canvasParam.width / 2 - param.width / 2;
this.y = canvasParam.height - param.height * 1.2;
パラメータwidthは、次の式で定義されます。
高さ = param.height;
// 航空機画像の添え字 this.index = 0;
// 飛行機が衝突したかどうかを判定します this.down = false;
// 間隔トリガー this.num = 0;
// 平面を描画します this.paint = function() {
ctx.drawImage(this.heroRunning[this.index], this.x, this.y, this.width, this.height);
}
// 実行時に航空機の画像を交互に描画します this.sport = function() {
もし (!this.down) {
this.num++;
// タイマーが3回実行されるたびに、飛行機の飛行画像が切り替わります if (this.num % 3 === 0) {
（this.index === 0）の場合{
this.index = 1;
} それ以外 {
this.index = 0;
}
}
} それ以外 {
// 飛行機が撃たれた this.index++; // 画像配列のインデックス + 1、撃たれた画像を表示 if (this.index === this.heroRunning.length) {
life--; // ライフ値 -1
（ライフ == 0）の場合{
// ゲームの状態が「over」に変わります。gamerState = gameOver;
// ゲーム終了後、飛行機を煙の状態のままにします。this.index = this.heroRunning.length - 1;
} それ以外 {
// 新しい平面を作成します。heroObj = new Hero(heroParam);
}
}
}
}
// 箇条書き間隔を作成します。this.bulletTime = 0;
// 箇条書きを作成する this.newBullet = function() {
this.bulletTime++;
// タイマーは3回実行され、弾丸を作成します。if (this.bulletTime % 2 === 0) {
Bullets.push(新しいBullet(bulletParam));
}
}
}
// 飛行機をインスタンス化します var heroObj = new Hero(heroParam);
// キャンバスを移動イベントにバインドして、マウスとともに平面が移動するようにします。canvas.onmousemove = function(e) {
ゲーム状態が実行中の場合{
heroObj.x = e.offsetX - heroObj.width / 2;
heroObj.y = e.offsetY - heroObj.height / 2;
}
}
//弾丸//
var bulletImg = 新しい画像();
箇条書きImg.src = 'img/bullet1.png';
var 箇条書きパラメータ = {
箇条書き画像: 箇条書き画像,
幅: 9,
高さ: 21
}
// コンストラクタ: Bullet function Bullet(param) {
パラメータ：
this.x = heroObj.x + heroObj.width / 2 - param.width / 2;
this.y = heroObj.y - param.height;
パラメータwidthは、次の式で定義されます。
高さをパラメータに設定します。
// 弾丸を描く this.paint = function() {
ctx.drawImage(this.bulletImg、this.x、this.y、this.width、this.height);
}
// 弾が敵機に当たったかどうかを判定します this.down = false;
// 弾丸の移動速度 this.sport = function() {
y = 50;
}
}
//雑誌 var bullets = [];
// 箇条書きを作成する function bulletsPaint() {
(var i = 0; i < bullets.length; i++) の場合 {
弾丸[i].paint();
}
}
// 弾丸を発射する function bulletsSport() {
(var i = 0; i < bullets.length; i++) の場合 {
弾丸[i].スポーツ();
}
}
// 弾丸が画面外に飛び出す // 弾丸が敵機に衝突する function bulletsDelete() {
(var i = 0; i < bullets.length; i++) の場合 {
もし（bullets[i].y < -this.height || bullets[i].down）{
弾丸.splice(i, 1);
}
}
}
//敵機//小型敵機var enemies1Arr = [
'img/敵1.png',
'img/enemy1_down1.png',
'img/enemy1_down2.png',
'img/enemy1_down3.png',
'img/enemy1_down4.png'
];
var 敵1Img = [];
(var i = 0; i < 敵1Arr.length; i++) {
敵1Img[i] = 新しい画像();
敵1の画像[i].src = 敵1のArr[i];
}
//中型敵機 var enemies2Arr = [
'img/enemy2.png',
'img/enemy2_down1.png',
'img/enemy2_down2.png',
'img/enemy2_down3.png',
'img/enemy2_down4.png'
];
var 敵2Img = [];
(var i = 0; i < 敵2Arr.length; i++) の場合 {
敵2Img[i] = 新しい画像();
敵2Img[i].src = 敵2Arr[i];
}
// 大型敵機 var enemies3Arr = [
'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 敵3Img = [];
(var i = 0; i < 敵3Arr.length; i++) {
敵3Img[i] = 新しい画像();
敵3Img[i].src = 敵3Arr[i];
}
// 小型敵機情報 var enemies1Param = {
敵画像: 敵1画像,
幅: 57,
高さ: 51,
ライフ: 3,
スコア: 1
}
// 中型敵機情報 var enemies2Param = {
敵画像: 敵2画像,
幅: 69,
高さ: 95,
ライフ: 10,
スコア: 3
}
// 大型敵機情報 var enemies3Param = {
敵画像: 敵3画像,
幅: 169,
高さ: 258,
ライフ: 20,
スコア: 10
}
// コンストラクター: 敵関数 Enemy(param) {
パラメータ：
パラメータwidthは、次の式で定義されます。
高さをパラメータに設定します。
this.life = param.life;
this.score = param.score;
this.x = Math.random() * (canvasParam.width - this.width);
this.y = -this.height;
// 画像の添え字 this.index = 0;
// 敵機が衝突するかどうかを判定します。this.down = false;
// 爆発は完了しましたか? this.bang = false;
// 敵を描画する this.paint = function() {
ctx.drawImage(this.enemyImg[this.index], this.x, this.y, this.width, this.height);
}
// 敵機が移動する this.sport = function() {
もし (!this.down) {
// 現在の敵機が衝突していない場合 this.y += 3;
} それ以外 {
// 衝突後の敵の体力 -1
この.life--;
// ヘルス値が-1になると、衝突はfalseになります
this.down = false;
// 体力が0になると敵の爆発画像になる if (this.life <= 0) {
this.index++;
this.down = true;
if (this.index === this.enemyImg.length) {
this.index = this.enemyImg.length - 1;
this.bang = true;
}
}
}
}
// ヒットされたかどうかを判定する this.hit = function(obj) {
戻り値 obj.x + obj.width >= this.x && obj.x <= this.x + this.width &&
obj.y <= this.y + this.height && obj.y + obj.height >= this.y;
}
}
// 敵機を格納するための空の配列を作成します。var enemies = [];
// 小型、中型、大型の敵機をランダムに生成する function pushEnemy() {
var ランダム = Math.random();
（ランダム<0.65）の場合{
enemies.push(新しいEnemy(enemy1Param));
} それ以外の場合 (ランダム < 0.9) {
// 中型航空機 enemies.push(new Enemy(enemy2Param));
} それ以外 {
//大型飛行機 enemies.push(new Enemy(enemy3Param));
}
}
// 敵オブジェクトを描画して移動する function enemiesPaint() {
(var i = 0; i < enemies.length; i++) の場合 {
敵[i].paint();
敵[i].スポーツ();
}
}
// 一時停止時に敵機を描画する function enemiesPaint1() {
(var i = 0; i < enemies.length; i++) の場合 {
敵[i].paint();
}
}
// 敵機を削除してスコアを上げる function enemiesDelete() {
(var i = 0; i < enemies.length; i++) の場合 {
if (敵[i].bang) {
スコア += 敵[i].スコア;
}
（敵[i].y >= キャンバスパラム.height || 敵[i].bang）の場合{
敵を接合します。(i, 1);
// スコア += enemies[i].score;
}
}
}
// 各敵機が弾丸に当たったか、自機に当たったかを検出する方法 function checkHit() {
(var i = 0; i < enemies.length; i++) の場合 {
// 弾丸が敵機と衝突する for (var j = 0; j < bullets.length; j++) {
敵[i]が弾丸[j]に当たった場合
敵[i].down = true;
弾丸[j].down = true;
}
}
// 敵とヒーロー
敵が[i]にヒットした場合(heroObj)
敵[i].down = true;
ヒーローオブジェクトを下へ移動します。
}
}
}
// スコア関数 scoreText() {
ctx.font = '20px 太字';
ctx.fillText('スコア: ' + スコア、20、30);
ctx.fillText('ライフ値: ' + life, 360, 30)
}
// マウスがキャンバスから出るとゲームは一時停止します。canvas.onmouseout = function() {
ゲーム状態が実行中の場合{
ゲーム状態 = 一時停止;
}
};
// マウスを動かしてゲームを開始します canvas.onmouseover = function() {
ゲーム状態が一時停止の場合
ゲーム状態 = 実行中;
}
};
//ゲーム一時停止インターフェース関数 pausePanit() {
var pauseImg = 新しい画像()
pauseImg.src = "img/game_pause_nor.png";
ヒーローオブジェクトをペイントします。
// 弾丸を描画する bulletsPaint();
// 敵を描画するenemyPaint1();
スコアテキスト();
ctx.drawImage(pauseImg, 220, 420);
}
// ゲームオーバー関数 gameOverText() {
ctx.font = '50px 太字';
ctx.fillText('ゲームオーバー', 120, 420);
ctx.font = '30px 太字';
ctx.fillText('クリックして再起動', 160, 520);
}
// ゲームを再開するためのクリックイベント canvas.addEventListener("click", function(e) {
ゲーム状態がゲームオーバーの場合
ゲーム状態 = 準備完了;
読み込みオブジェクト数 = 0;
読み込みObj.index = 0;
敵 = [];
箇条書き = [];
ライフ = 3;
スコア = 0;
ヒーローオブジェクトを下へ移動します。
}
});
//敵機を作成するための時間間隔 var enemiesNum = 0;
// タイマーを開始し、画像を描画します setInterval(function() {
bgObj.paint();
bgObj.sport();
ゲーム状態が準備完了の場合
ctx.drawImage(logoSrc, 0, 0, 480, 852);
// logoObj.paint();
} そうでない場合 (gameState === loading) {
読み込みObj.paint();
読み込みObj.sport();
} そうでない場合 (gameState === running) {
canvas.style.cursor = 'なし';
ヒーローオブジェクトをペイントします。
heroObj.sport();
弾丸オブジェクトを新規作成します。
// 弾丸を描画する bulletsPaint();
弾丸スポーツ();
// 箇条書きを削除します bulletsDelete();
// 敵を描画します。enemyNum++;
敵の数 % 20 === 0 の場合
敵をプッシュします。
}
敵ペイント();
チェックヒット();
敵を削除する();
スコアテキスト();
（ライフ === 0）の場合{
ゲーム状態 = ゲームオーバー;
}
} そうでない場合 (ゲーム状態 === 一時停止) {
一時停止Panit();
} そうでない場合 (ゲーム状態 === ゲームオーバー) {
canvas.style.cursor = 'ポインタ';
ゲームオーバーテキスト();
ヒーローオブジェクトをペイントします。
}
}, 60)
</スクリプト>
</本文>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: CUDA10.0 のインストールと Ubuntu での問題
推薦する
Nginx で同じドメイン名を持つ複数のプロジェクトを構成する方法
Nginx を使用して同じドメイン名で複数のプロジェクトを構成するには、次の 2 つの方法があります...
スライダーを作成するためのネイティブ js ドラッグ アンド ドロップ機能のサンプル コード
ドラッグ アンド ドロップはフロントエンドでよく使われる機能であり、多くのエフェクトで js のドラ...
Win2008 R2 mysql 5.5 zip 形式 mysql のインストールと設定
Win2008 R2 zip形式のMySQLのインストールと設定1. Baidu MySQL 5.6...
JavaScript の構成と継承の説明
目次1. はじめに2. プロトタイプチェーン継承3. コンストラクタの継承4. 組み合わせ継承1. ...
MYSQL 演算子の概要
目次1. 算術演算子2. 比較演算子3. 論理演算子4. ビット演算子5. 演算子の優先順位1. 算...
CSS で隠し要素を実現する 7 つの興味深い方法
序文非表示要素の 3 つの属性である表示、可視性、不透明度の類似点と相違点は、フロントエンドの就職面...
Ubuntu 18.04の下のディレクトリにディスクをマウントします
導入この記事では、Ubuntu 18.04 デスクトップ システムでディスクを目的のディレクトリにマ...
Vue 折りたたみ表示の複数行テキスト コンポーネントの実装コード
折りたたみ表示の複数行テキストコンポーネント複数行のテキスト コンポーネントを折りたたんで表示し、展...
Centos8 に nginx をインストールするための詳細なチュートリアル (画像とテキスト)
Nginx (「エンジン エックス」と発音) は、インターネット上の最大規模のサイトの負荷を処理す...
例を通してMySQLパーティションテーブルの原理と一般的な操作を学びます
1. パーティションテーブルの意味パーティション テーブル定義は、任意のサイズに設定できるルールに従...
MySQLの挿入文字化け問題を解決する方法
問題の説明: MySQL に中国語の文字を挿入する場合、または MySQL では中国語の文字が正常に...
CSS を使用してサブ要素に応じて異なるスタイルを記述する方法
達成すべき効果: 必要なもの1枚、2枚、3枚とスタイルが異なります。子要素の判定はjsで完結できます...
Tencent Cloud 上で Hadoop 3.x 疑似クラスターを構築する方法を説明します
1. 環境整備CentOS Linux リリース 7.5.1804 (コア)インストールフォルダを作...
初心者のための入門チュートリアル⑤：ウェブサイト登録はとても簡単、簡単な登録のヒント
スペースを購入してウェブサイトを構築したことがある友人なら、ウェブサイトは正式に開設する前に登録する...
あなたのウェブサイトはIE8に適していますか?
オリンピック期間中にIE8ベータ2がリリースされ、英語版のリリースに合わせて中国語版も第一波でリリー...