Chaotic Dance Technique's game

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

No:2901

1349

←

Prev Next

→

Chaotic Dance Technique
Developer User3494｜Date and time 23/6/23 1:59:32
Build time 42.627 sec｜Game capacity 3.521KB｜

Script

HTMLファイルには、以下のコードを追加します：

このコードは、スマホで遊べるシンプルなシューティングゲームです。画面下のプレイヤーを左右に動かし、画面上から降ってくる敵を避けながら、スコアを稼ぎます。敵に当たるとスコアが減ります。画面下にスコアが表示されます。スマホでの操作に対応するため、タッチパネルでの移動も可能です。絵文字は使用していませんが、必要に応じて追加することができます。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

HTMLファイルには、以下のコードを追加します：

<!DOCTYPE html>
<html>
<head>
	<title>乱舞技</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
			background-color: black;
		}

canvas {
			display: block;
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>

// プレイヤーオブジェクト
		const player = {
			x: width / 2,
			y: height - 50,
			width: 50,
			height: 50,
			speed: 5,
			color: 'yellow',
			draw() {
				ctx.fillStyle = this.color;
				ctx.fillRect(this.x, this.y, this.width, this.height);
			},
			update() {
				if (keys.ArrowLeft) {
					this.x -= this.speed;
				} else if (keys.ArrowRight) {
					this.x += this.speed;
				}
				if (this.x < 0) {
					this.x = 0;
				} else if (this.x + this.width > width) {
					this.x = width - this.width;
				}
			}
		};

// キーの制御
		const keys = {};
		document.addEventListener('keydown', (event) => {
			keys[event.code] = true;
		});
		document.addEventListener('keyup', (event) => {
			keys[event.code] = false;
		});

// 敵オブジェクト
		class Enemy {
			constructor() {
				this.x = Math.random() * (width - 50);
				this.y = -50;
				this.width = 50;
				this.height = 50;
				this.speed = 3;
				this.color = 'red';
			}

draw() {
				ctx.fillStyle = this.color;
				ctx.fillRect(this.x, this.y, this.width, this.height);
			}

update() {
				this.y += this.speed;
				if (this.y + this.height > height) {
					this.y = -50;
					this.x = Math.random() * (width - 50);
					score--;
				}
				if (this.x < player.x + player.width &&
					this.x + this.width > player.x &&
					this.y < player.y + player.height &&
					this.y + this.height > player.y) {
					score--;
				}
			}
		}

// 敵の配列
		const enemies = [];

// 敵の生成
		function spawnEnemy() {
			enemies.push(new Enemy());
			setTimeout(spawnEnemy, 1000);
		}

// スコアの表示
		function drawScore() {
			ctx.fillStyle = 'white';
			ctx.font = '48px serif';
			ctx.textAlign = 'center';
			ctx.fillText(score, width / 2, 50);
		}

// メインループ
		function loop() {
			ctx.clearRect(0, 0, width, height);

// プレイヤーの描画と移動
			player.draw();
			player.update();

// 敵の描画と移動
			enemies.forEach((enemy) => {
				enemy.draw();
				enemy.update();
			});

// スコアの表示
			drawScore();

// 次のループを呼び出す
			requestAnimationFrame(loop);
		}

// ゲームの開始
		spawnEnemy(); // 敵の生成
		loop(); // メインループ
	</script>
</body>
</html>