Click here for free DL of the app version that can save data.

No:3243

410

←

Prev Next

→

Nature💥 Environment💥 World💥
Developer User3589｜Date and time 23/6/24 9:46:08
Build time 28.784 sec｜Game capacity 2.753KB｜

Script

ここでは、「自然環境世界」というテーマのゲームアプリを実装します。このアプリは1枚のHTMLファイルに全てのコードを含めているので、ダウンロードしてすぐに遊ぶことができます。

自然環境世界

スコア:0

このゲームでは、プレイヤーが緑の四角形で、エネミーが赤い四角形で表示されます。プレイヤーは矢印キーで操作し、エネミーに接触するとスコアが1点加算されます。スコアは画面右上に表示されます。ゲーム画面にはキャンバス要素を使用し、jQueryやその他のライブラリを使用せずに、純粋なJavaScriptコードだけで実装しています。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
	<title>自然環境世界</title>
	<style>
		canvas { /* ゲーム画面 */
			border: 1px solid black;
		}
		#score { /* ゲームスコア表示 */
			font-size: 20px;
			position: absolute;
			top: 10px;
			right: 10px;
		}
	</style>
</head>
<body>
	<h1>自然環境世界</h1>
	<p>スコア:<span id="score">0</span></p>
	<canvas id="game" width="400" height="400"></canvas>
	<script>
		// ゲームの処理

// ゲーム画面キャンバス
		var canvas = document.getElementById('game');
		var ctx = canvas.getContext('2d');

// プレイヤーの初期位置
		var playerX = 200;
		var playerY = 200;

// エネミーの初期位置
		var enemyX = Math.random() * 400;
		var enemyY = Math.random() * 400;

// プレイヤーのスピード
		var playerSpeed = 5;

// スコア
		var score = 0;

// ゲームのメインループ
		function mainLoop() {
			// ゲーム画面をクリア
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// プレイヤーを描画
			ctx.fillStyle = 'green';
			ctx.fillRect(playerX, playerY, 20, 20);

// エネミーを描画
			ctx.fillStyle = 'red';
			ctx.fillRect(enemyX, enemyY, 20, 20);

// プレイヤーがエネミーに衝突した場合の処理
			if (playerX < enemyX + 20 && playerX + 20 > enemyX && playerY < enemyY + 20 && playerY + 20 > enemyY) {
				score += 1;
				document.getElementById('score').innerHTML = score;
				enemyX = Math.random() * 400;
				enemyY = Math.random() * 400;
			}

// キーボードの操作
			document.addEventListener('keydown', function(event) {
				if (event.key == 'ArrowUp') {
					playerY -= playerSpeed;
				} else if (event.key == 'ArrowDown') {
					playerY += playerSpeed;
				} else if (event.key == 'ArrowLeft') {
					playerX -= playerSpeed;
				} else if (event.key == 'ArrowRight') {
					playerX += playerSpeed;
				}
			});

// メインループの再帰呼び出し
			requestAnimationFrame(mainLoop);
		}

// ゲームの開始
		mainLoop();
	</script>
</body>
</html>