A game in which random words flow from the right side of the screen to the left side of the screen and you avoid them.'s game

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

No:845

346

←

Prev Next

→

A game in which random words flow from the right s..ALL
Developer User3161｜Date and time 23/6/17 20:16:04
Build time 28.487 sec｜Game capacity 2.234KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>避けるゲーム</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			overflow: hidden; /* スクロールバーを非表示にする */
			background-color: #000;
			color: #fff;
			font-size: 2rem;
		}
	</style>
</head>
<body>
	<script>
		// 画面サイズ
		const canvasWidth = window.innerWidth;
		const canvasHeight = window.innerHeight;

// 単語の初期位置
		const wordYInitial = canvasHeight / 2;
		let wordXCurrent = canvasWidth;

// 単語の速度
		const wordSpeed = 5;

// スコア
		let score = 0;

// 単語の配列
		const words = [
			"dog", "cat", "bird", "fish", "rabbit", "lion", "tiger", "elephant",
			"monkey", "giraffe", "zebra", "panda", "koala", "kangaroo", "crocodile",
			"hippo", "rhino", "bear", "wolf", "fox", "deer", "horse", "cow"
		];

// ランダムな単語を選択
		function getRandomWord() {
			const randomIndex = Math.floor(Math.random() * words.length);
			return words[randomIndex];
		}

// 描画
		function draw() {
			const canvas = document.createElement("canvas");
			canvas.width = canvasWidth;
			canvas.height = canvasHeight;
			document.body.appendChild(canvas);
			const context = canvas.getContext("2d");

// ゲームループ
			function gameLoop() {
				// 画面をクリア
				context.clearRect(0, 0, canvasWidth, canvasHeight);

// 単語を描画
				context.fillText(randomWord, wordXCurrent, wordYInitial);

// 単語を移動
				wordXCurrent -= wordSpeed;

// 単語が画面外に出たら新しい単語を取得
				if (wordXCurrent < -200) {
					wordXCurrent = canvasWidth;
					randomWord = getRandomWord();
				}

// スコアを表示
				context.fillText("スコア：" + score, 20, 50);

// 次のフレームを要求
				requestAnimationFrame(gameLoop);
			}

// 初期単語を取得
			let randomWord = getRandomWord();

// ゲームループを開始
			gameLoop();

// キー入力を検知
			window.addEventListener("keydown", (event) => {
				// 入力されたキーと単語が一致したらスコアを加算
				if (event.key === randomWord.charAt(0)) {
					score++;
				}
			});
		}
		draw();
	</script>
</body>
</html>