航空機戦争ゲームを実装するための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 での問題
推薦する
Docker コンテナのログを表示およびクリーンアップする方法 (テスト済みで効果的)
1. 問題Docker コンテナのログにより、ホストのディスク領域がいっぱいになりました。 doc...
DockerにRabbitMQをインストールする詳細な手順
目次1. 鏡を見つける2. RabbitMQイメージをダウンロードする3. RabbitMQコンテナ...
CSSを使用してダークモードとブライトモードを切り替える
Web Skills第5号では、CSSでダークモードやハイライトモードを実装するための技術的なソリュ...
Vue における $router と $route の違いの詳細な説明
通常、vue プロジェクトではルーティングを使用します。vue-router は vue.js の公...
MySQL 5.7.17 圧縮パッケージのインストール不要の構成プロセス図
MySQL データベース管理ソフトウェアには、エンタープライズ エディションとコミュニティ エディシ...
vsCodeはワンクリックでvueテンプレートを生成します
1. ショートカットCtrl + Shift + Pを使用してコンソールを呼び出します 2、「スニペ...
MySQL 正規表現 (regexp と rlike) の検索機能の例分析
この記事では、例を使用して MySQL 正規表現 (regexp および rlike) の検索機能を...
MySQL 8.0 Windows zip パッケージ版の詳細なインストール手順
MySQL 8.0 Windows zipのインストール手順は次のように紹介されています。準備する：...
tdコンテンツは自動的にテーブルを折り返します。幅を設定すると、テキストが自動的に折り返されます。
テーブルの style="table-layout:fixed;" を設定し、次...
HTTPS の有効化に関する経験の共有
国内のネットワーク環境が悪化し続ける中、さまざまな改ざんや乗っ取りが後を絶たず、サイト全体をHTTP...
JS を使用してファイルを操作する (FileReader は --node の fs を読み取ります)
目次JS はファイルを読み取る FileReader書類イベントとメソッド基本的な使い方イベント処理...
HTML でナンバープレート番号と州の略語を入力するためのサンプルコード
原理としては、まずボタン付きの div を記述し、次に画面のサイズに応じて自動的に適応してキーボード...
MySQL explain クエリ命令情報の取得原理と例
explain はクエリ実行プラン情報を取得するために使用されます。 1. 文法次のように、sele...
Vue3+スクリプト設定+ts+Vite+Volarプロジェクト
目次Viteを使用してvue + tsプロジェクトを作成するVue 3の3つの構文オプションAPIコ...
HTML ページ適応幅テーブル
WEB アプリケーションのページでは、テーブルがよく使用されます。列の数が限られているため、各列のコ...