Those who are on the verge of battle are in front of the line's game

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

No:1884

205

←

Prev Next

→

Those who are on the verge of battle are in front ..ALL
Developer User3025｜Date and time 23/6/19 12:22:51
Build time 38.37 sec｜Game capacity 2.868KB｜

Script

以下は、JavaScriptを含んだ1枚のHTMLファイルで実装されたスマホ向けゲームの例です。

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

以下は、JavaScriptを含んだ1枚のHTMLファイルで実装されたスマホ向けゲームの例です。

<!DOCTYPE html>
<html>
<head>
	<title>Emojiミッション</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #f0f0f0;
			font-family: Arial, sans-serif;
		}
		canvas {
			width: 100%;
			height: 100%;
			display: block;
		}
		#score {
			position: absolute;
			top: 10px;
			right: 10px;
			font-size: 24px;
		}
	</style>
</head>
<body>
	<canvas id="gameCanvas"></canvas>
	<div id="score">Score: 0</div>
	<script>
		// ゲームの概要：プレイヤーが絵文字を操作して敵を避け、スコアを稼ぐゲーム

// canvasの初期設定
		var canvas = document.getElementById('gameCanvas');
		var context = canvas.getContext('2d');
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

// 絵文字の初期設定
		var player = {
			x: canvas.width / 2,
			y: canvas.height / 2,
			speed: 5,
			emoji: '😎'
		};

// 敵の初期設定
		var enemyCount = 10;
		var enemies = [];
		for (var i = 0; i < enemyCount; i++) {
			enemies[i] = {
				x: Math.random() * canvas.width,
				y: Math.random() * canvas.height,
				speed: Math.random() * 2 + 1,
				emoji: '👻'
			};
		}

// スコアの初期設定
		var score = 0;

// キーイベントのリスナーを登録
		document.addEventListener('keydown', function(event) {
			switch (event.keyCode) {
				case 37: // 左矢印キー
					player.x -= player.speed;
					break;
				case 38: // 上矢印キー
					player.y -= player.speed;
					break;
				case 39: // 右矢印キー
					player.x += player.speed;
					break;
				case 40: // 下矢印キー
					player.y += player.speed;
					break;
			}
		});

// メインループ
		setInterval(function() {
			// ゲームオーバー条件の判定
			for (var i = 0; i < enemyCount; i++) {
				if (Math.abs(player.x - enemies[i].x) < 32 && Math.abs(player.y - enemies[i].y) < 32) {
					alert('Game Over!');
					location.reload();
				}
			}

// スコアの加算
			score++;
			document.getElementById('score').innerHTML = 'Score: ' + score;

// 敵の移動
			for (var i = 0; i < enemyCount; i++) {
				if (enemies[i].x < player.x) {
					enemies[i].x += enemies[i].speed;
				} else {
					enemies[i].x -= enemies[i].speed;
				}
				if (enemies[i].y < player.y) {
					enemies[i].y += enemies[i].speed;
				} else {
					enemies[i].y -= enemies[i].speed;
				}
			}

// canvasの描画
			context.clearRect(0, 0, canvas.width, canvas.height);
			context.fillText(player.emoji, player.x, player.y);
			for (var i = 0; i < enemyCount; i++) {
				context.fillText(enemies[i].emoji, enemies[i].x, enemies[i].y);
			}
		}, 1000 / 60);
	</script>
</body>
</html>