AI game creator

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

No:1544

3406

←

Prev Next

→

Lemmings.
Developer AI絵師｜Date and time 23/6/18 18:25:44
Build time 43.908 sec｜Game capacity 4.003KB｜

Script

スコア：0

GAME OVER

このアプリは、クリックゲームで、全画面のキャンバス上にレミングスの画像が次々に現れ、そのうち10匹クリックするまでに何匹クリックできるかを競うゲームです。スマホでも遊べるようになっており、スコアを表示し、ゲームオーバー時にはリスタートボタンを表示しています。絵文字はレミングスの画像に使用しています。

←

Prev　Next

→ 　

Back　

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

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

<!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;
			font-size: 20px;
			font-family: sans-serif;
			background-color: #A9A9A9;
		}

canvas {
			display: block;
			margin: 0 auto;
			background-color: #FFF;
		}

#score {
			margin: 10px;
			text-align: center;
			font-size: 30px;
			color: #000;
		}

#gameover {
			display: none;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 50px;
			color: #F00;
			z-index: 1;
		}

.btn {
			display: block;
			margin: 10px auto;
			padding: 10px 30px;
			background-color: #FFF;
			border: none;
			border-radius: 20px;
			font-size: 20px;
			font-weight: bold;
			text-align: center;
			color: #000;
			cursor: pointer;
		}

.btn:hover {
			background-color: #000;
			color: #FFF;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<div id="score">スコア：0</div>
	<div id="gameover">GAME OVER</div>
	<button class="btn" id="startBtn">スタート</button>
	<button class="btn" id="restartBtn" style="display: none;">リスタート</button>

// スコア
		let score = 0;
		const scoreElem = document.getElementById("score");

// レミングス
		const lemmingImg = document.createElement("img");
		lemmingImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/271/mouse_1f401.png";
		const lemmings = [];

// タイマー
		let timer = null;

// ゲームオーバー
		const gameoverElem = document.getElementById("gameover");
		const restartBtn = document.getElementById("restartBtn");
		function endGame() {
			gameoverElem.style.display = "block";
			restartBtn.style.display = "block";
			clearInterval(timer);
			timer = null;
			canvas.removeEventListener("click", onClick);
		}

// クリックイベント
		function onClick(event) {
			event.preventDefault();
			event.stopPropagation();
			const x = event.clientX;
			const y = event.clientY;
			const lemming = lemmings.find(lemming => x >= lemming.x && x <= lemming.x + lemmingImg.width && y >= lemming.y && y <= lemming.y + lemmingImg.height);
			if (lemming) {
				score++;
				scoreElem.textContent = `スコア：${score}`;
				lemmings.splice(lemmings.indexOf(lemming), 1);
			}
		}

// レミングス生成
		function createLemming() {
			const lemming = {
				x: Math.floor(Math.random() * (canvas.width - lemmingImg.width)),
				y: Math.floor(Math.random() * (canvas.height - lemmingImg.height))
			};
			lemmings.push(lemming);
			ctx.drawImage(lemmingImg, lemming.x, lemming.y);
			if (lemmings.length >= 10) {
				endGame();
			}
		}

// スタートボタン
		const startBtn = document.getElementById("startBtn");
		startBtn.addEventListener("click", () => {
			startBtn.style.display = "none";
			timer = setInterval(createLemming, 1000);
			canvas.addEventListener("click", onClick);
		});

// リスタートボタン
		restartBtn.addEventListener("click", () => {
			gameoverElem.style.display = "none";
			restartBtn.style.display = "none";
			score = 0;
			scoreElem.textContent = "スコア：0";
			lemmings.length = 0;
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			startBtn.style.display = "block";
		});
	</script>
</body>
</html>