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

No:2957

1957

←

Prev Next

→

Caught a lot of cats
Developer User3613｜Date and time 23/6/23 7:12:59
Build time 26.223 sec｜Game capacity 2.541KB｜

Script

ネコ捕まえゲーム

Score:0

←

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{
			margin: 0;
			padding: 0;
			background-color: #9DCCEE;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 2rem;
			color: white;
			font-family: sans-serif;
		}
		
		#gameboard{
			display: flex;
			flex-wrap: wrap;
			width: 90vw;
			max-width: 600px;
			margin-top: 20px;
		}
		
		.neko{
			font-size: 2rem;
			transition: transform 0.2s, opacity 0.2s;
			cursor: pointer;
		}
		
		.neko.caught{
			transform: scale(0);
			opacity: 0;
		}
		
		#scoreboard{
			margin-top: 20px;
		}
		
		#scoreboard span{
			font-weight: bold;
			margin-right: 10px;
		}
		
		button{
			padding: 10px;
			border-radius: 5px;
			background-color: #F29072;
			border: none;
			font-size: 1.5rem;
			color: white;
			cursor: pointer;
			margin-top: 20px;
		}
	</style>
</head>
<body onresize="resizeGame()" onload="generateGameboard()">
	<h1>ネコ捕まえゲーム</h1>
	<div id="gameboard"></div>
	<div id="scoreboard">
		<span>Score:</span><span id="score">0</span>
	</div>
	<button onclick="generateGameboard()">やり直し</button>

function resizeGame(){
			var nekos = document.getElementsByClassName("neko");
			var containerWidth = gameboard.offsetWidth;
			var nekoWidth = containerWidth / 5 - 10;
			var nekoHeight = containerWidth / 5 - 10;
			for(var i = 0; i < nekos.length; i++){
				nekos[i].style.width = nekoWidth + "px";
				nekos[i].style.height = nekoHeight + "px";
			}
		}