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

No:2861

1559

←

Prev Next

→

silhouette game
Developer anonymous｜Date and time 23/6/22 23:31:50
Build time 41.737 sec｜Game capacity 3.485KB｜

Script

シルエットゲーム

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>シルエットゲーム</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			background-color: #FFE5B4;
			margin: 0;
			padding: 0;
			text-align: center;
			font-family: sans-serif;
		}

h1 {
			color: #800000;
			margin: 0;
			padding: 20px;
		}

canvas {
			margin: 0 auto;
			display: block;
			border: 2px solid black;
			background-color: white;
		}

button {
			background-color: #800000;
			color: white;
			border: none;
			padding: 15px 30px;
			margin: 30px;
			border-radius: 10px;
			font-size: 20px;
			cursor: pointer;
		}

@media screen and (max-width: 480px) {
			h1 {
				font-size: 24px;
			}

button {
				font-size: 16px;
			}
		}
	</style>
</head>
<body>
	<h1>シルエットゲーム</h1>
	<canvas id="canvas"></canvas>
	<button id="start">スタート</button>

function onResize() {
			screenWidth = window.innerWidth;
			screenHeight = window.innerHeight;
			canvas.width = screenWidth;
			canvas.height = screenHeight;
		}
		window.addEventListener('resize', onResize);
		onResize();

function drawShape(index) {
			context.fillStyle = 'black';
			context.font = '200px sans-serif';
			context.fillText(shapes[index].img, shapes[index].shape[0], shapes[index].shape[1] + shapes[index].shape[3]);
		}

function clearCanvas() {
			context.clearRect(0, 0, screenWidth, screenHeight);
		}

function showScore() {
			context.fillStyle = 'black';
			context.font = '48px sans-serif';
			context.fillText('スコア: ' + score, 20, 50);
		}

function startGame() {
			score = 0;
			startTime = Date.now();
			isPlaying = true;
			showScore();
			drawRandomShape();
		}

function endGame() {
			isPlaying = false;
			endTime = Date.now();
			let timeTaken = (endTime - startTime) / 1000;
			clearCanvas();
			context.fillStyle = 'black';
			context.font = '48px sans-serif';
			context.fillText('終了！ スコア: ' + score, screenWidth / 2, screenHeight / 3);
			context.fillText('かかった時間: ' + timeTaken.toFixed(2) + '秒', screenWidth / 2, screenHeight / 2);
			document.getElementById('start').innerText = 'もう一度遊ぶ';
		}

function drawRandomShape() {
			let index = Math.floor(Math.random() * shapes.length);
			drawShape(index);
			setTimeout(clearCanvas, 2000);
		}

canvas.addEventListener('click', function(event) {
			if (!isPlaying) {
				return;
			}

let rect = canvas.getBoundingClientRect();
			let x = event.clientX - rect.left;
			let y = event.clientY - rect.top;

for (let i = 0; i < shapes.length; i++) {
				if (x >= shapes[i].shape[0] && x <= shapes[i].shape[0] + shapes[i].shape[2] &&
					y >= shapes[i].shape[1] && y <= shapes[i].shape[1] + shapes[i].shape[3]) {
					score++;
					showScore();
					drawRandomShape();
					return;
				}
			}

endGame();
		});

document.getElementById('start').addEventListener('click', function() {
			if (isPlaying) {
				return;
			}

startGame();
		});
	</script>
</body>
</html>