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

No:4532

650

←

Prev Next

→

100 Million Dads
Developer User3783｜Date and time 23/6/28 3:25:32
Build time 32.149 sec｜Game capacity 2.479KB｜

Script

が待っているぞ！了解しました。以下は、JavaScriptを利用した簡単なゲームの実装例です。

簡単なゲーム

スコア: 0

😀

👿

このゲームでは、プレイヤーをスマホ画面上でタッチして移動させ、敵を避けながらスコアを稼ぐゲームです。敵とプレイヤーが重なるとゲームオーバーになります。スコア表示とリセット機能も実装しています。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

が待っているぞ！

了解しました。以下は、JavaScriptを利用した簡単なゲームの実装例です。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>簡単なゲーム</title>
</head>
<body>

<h1>簡単なゲーム</h1>
	<p id="score">スコア: 0</p>
	
	<div id="game">
		<div id="player">😀</div>
		<div id="enemy">👿</div>
	</div>

// スマホ操作
		game.addEventListener('touchstart', handleTouch);
		game.addEventListener('touchmove', handleTouch);

function handleTouch(e) {
			// プレイヤーをタッチ位置に移動
			player.style.left = `${e.touches[0].clientX}px`;
			player.style.top = `${e.touches[0].clientY}px`;
		}

// 敵の移動と当たり判定
		function gameLoop() {
			// 敵の移動
			enemy.style.top = `${enemy.offsetTop + speed}px`;
			// 敵が床に到達した場合
			if (enemy.offsetTop >= game.clientHeight - enemy.clientHeight) {
				// 新しい敵をランダムに生成
				enemy.style.top = '-50px';
				enemy.style.left = `${Math.floor(Math.random() * (game.clientWidth - enemy.offsetWidth))}px`;
				// スコア加算
				score++;
				document.querySelector('#score').innerText = `スコア: ${score}`;
			}
			// 当たり判定
			if (enemy.getBoundingClientRect().top <= player.getBoundingClientRect().bottom
				&& enemy.getBoundingClientRect().bottom >= player.getBoundingClientRect().top
				&& enemy.getBoundingClientRect().left <= player.getBoundingClientRect().right
				&& enemy.getBoundingClientRect().right >= player.getBoundingClientRect().left) {
				// ゲームオーバー
				alert('ゲームオーバー\nスコア: ' + score);
				// リセット
				score = 0;
				document.querySelector('#score').innerText = 'スコア: 0';
				enemy.style.top = '-50px';
			} else {
				// 継続
				requestAnimationFrame(gameLoop);
			}
		}

// 初回実行
		requestAnimationFrame(gameLoop);
	</script>
</body>
</html>