航空機戦争ゲームを実装するための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 での問題
推薦する
この記事では、jsのデータ型とデータ構造の世界を紹介します。
目次1. 動的型付けとは何ですか? 2. データ型2.1 プリミティブ型 (6 つのプリミティブ型、...
Linuxはシェルスクリプトを使用して履歴ログファイルを定期的に削除します
1. ツールディレクトリのファイル構造 [root@www tools]# ツリーツール/ ツール/...
Vueはプライベートフィルターと基本的な使用法を定義します
プライベート フィルターとグローバル フィルターのメソッドと概念は同じですが、プライベート フィルタ...
ulとliの基本的な使用法の分析
ナビゲーション、少量のデータテーブル、中央揃え<!DOCTYPE html PUBLIC &q...
HTML テーブルタグチュートリアル (20): 行の背景色属性 BGCOLOR
BGCOLOR 属性を使用して、行の背景色を設定できます。基本的な構文<TR BGcolor...
MySQLは文字列の連結、インターセプション、置換、位置検索操作を実装しています
MySQL 文字列の連結、インターセプト、置換、および検索位置。よく使用される文字列関数:関数例示す...
Nginxホットデプロイメントの実装
目次セマフォNginx ホットデプロイメント上記のブログ投稿に従ってください。ファイアウォールをオフ...
Linux のネイティブ openjdk をアンインストールして sun jdk をインストールする方法
参照: https://www.jb51.net/article/112612.htmシステム内のJ...
vue+element-uiはヘッドナビゲーションバーコンポーネントを実装します
この記事では、vue+element-uiでヘッドナビゲーションバーコンポーネントを実装するための具...
CentOS 6.6 ソースコードのコンパイルと MySQL 5.7.18 のインストールチュートリアルの詳細な説明
1. ユーザーとグループを追加する1. mysqlユーザーグループを追加する # グループ追加mys...
JSに関する7つの面接の質問、あなたはいくつ正しく答えられますか
序文JavaScript では、これは関数呼び出しコンテキストです。この動作が非常に複雑であるからこ...
CSS3 で z-index が効かない問題の解決方法
最近、CSS3 と js の組み合わせを作成したのですが、z-index が有効にならないケースが多...
スタートアップ企業が丹念に作り上げた優れたウェブデザイン17選
スタートアップ企業は、型破りな仕事のやり方、ユニークなビジネスモデル、特徴的な製品やサービス、パーソ...
YUM を使用して Linux (CentOS 7) に MySQL 5.7.18 をインストールする方法の詳細なチュートリアル
このプロジェクトでは MySQL を使用する必要があります。これまで Windows では常に確実に...
サーバー上の php-cgi.exe プロセスが多数存在し、CPU が 100% 占有される問題の解決方法
Windows 2003+IIS6 の fastcgi 構成ファイル fcgiext.ini を最適...