Games in which 1 star disappears's game

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

No:2250

2494

←

Prev Next

→

Games in which 1 star disappears
Developer User3494｜Date and time 23/6/20 18:28:24
Build time 39.908 sec｜Game capacity 2.961KB｜

Script

SCORE: 0

【ゲーム概要】画面上に表示された星1をタップして消していくゲームです。タップするとスコアが加算されます。星1は画面中央からランダムに生成され、色もランダムに変わります。スマホでプレイ可能です。

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>星1が消えるゲーム</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #F1F2F7;
		}

canvas {
			display: block;
			margin: 0 auto;
			background-color: #FFF;
			box-shadow: 0 2px 6px rgba(0,0,0,0.3);
		}

.score {
			text-align: center;
			font-size: 25px;
			font-weight: bold;
			margin-top: 20px;
			color: #333;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="320" height="480"></canvas>
	<div class="score">SCORE: 0</div>
	<script>
		const canvas = document.getElementById("canvas");
		const ctx = canvas.getContext("2d");
		const scoreLabel = document.querySelector(".score");

// ゲームの初期化
		let score = 0;
		let gameLoop;

// 星1を描画する関数
		function drawStar(x, y, r, color) {
			ctx.beginPath();
			ctx.moveTo(x, y - r);
			for (let i = 0; i < 5; i++) {
				ctx.lineTo(Math.cos((72 * i - 18) / 180 * Math.PI) * r + x,
						   Math.sin((72 * i - 18) / 180 * Math.PI) * r + y);
				ctx.lineTo(Math.cos((72 * i + 54) / 180 * Math.PI) * r / 2 + x,
						   Math.sin((72 * i + 54) / 180 * Math.PI) * r / 2 + y);
			}
			ctx.closePath();
			ctx.fillStyle = color;
			ctx.fill();
		}

// クリックした座標と星1の座標が一致しているかどうか判定
		function isHit(starX, starY, x, y) {
			const dist = Math.sqrt((starX - x) ** 2 + (starY - y) ** 2);
			return dist < 20 ? true : false;
		}

// 星1の座標と色をランダムに生成
		function createStar() {
			const starX = Math.floor(Math.random() * (canvas.width - 40)) + 20;
			const starY = Math.floor(Math.random() * (canvas.height - 40)) + 20;
			const color = "#" + Math.floor(Math.random() * 0xFFFFFF).toString(16);
			drawStar(starX, starY, 20, color);
			return {starX, starY, color};
		}

// ゲームの状態を更新
		function update() {
			// 星1を生成して描画
			const {starX, starY, color} = createStar();

// クリックしたら星1を消去してスコアを加算
			canvas.addEventListener("click", (e) => {
				const rect = canvas.getBoundingClientRect();
				const x = e.clientX - rect.left;
				const y = e.clientY - rect.top;
				if (isHit(starX, starY, x, y)) {
					ctx.clearRect(starX - 20, starY - 24, 40, 48);
					score++;
					scoreLabel.textContent = "SCORE: " + score;
				}
			}, false);
		}

// メインループ
		function loop() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			update();
			gameLoop = setTimeout(loop, 1000);
		}

// ゲーム開始
		gameLoop = setTimeout(loop, 1000);
	</script>
</body>
</html>

【ゲーム概要】
画面上に表示された星1をタップして消していくゲームです。タップするとスコアが加算されます。星1は画面中央からランダムに生成され、色もランダムに変わります。スマホでプレイ可能です。