AI game creator

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

No:1771

2547

←

Prev Next

→

stacking game
Developer GOひろし｜Date and time 23/6/19 0:51:12
Build time 37.701 sec｜Game capacity 2.873KB｜

Script

Score: 0

RESTART

※ゲーム概要：画面に表示されるブロックを1から順にクリックして積み上げていくゲームです。積み上げた数がスコアになります。ブロックが10個積み上がる前に、間違ったブロックをクリックするか、時間切れになるとゲームオーバーになります。

←

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;
			font-family: Arial, sans-serif;
			background-color: #f0f0f0;
		}
		
		#gameboard {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			max-width: 480px;
			margin: 0 auto;
			padding: 4px;
			background-color: #fff;
			box-shadow: 0 2px 6px rgba(0,0,0,0.3);
		}
		
		.block {
			width: 44%;
			height: 60px;
			margin: 2%;
			background-color: #888;
			border-radius: 6px;
			color: #fff;
			font-size: 26px;
			text-align: center;
			line-height: 60px;
			cursor: pointer;
			box-shadow: 0 1px 3px rgba(0,0,0,0.3);
		}
		
		.clearfix {
			clear: both;
			height: 0;
		}
		
		#scoreboard {
			display: flex;
			width: 100%;
			max-width: 480px;
			margin: 8px auto;
			padding: 4px;
			background-color: #fff;
			box-shadow: 0 2px 6px rgba(0,0,0,0.3);
		}
		
		#score {
			flex: 1;
			font-size: 32px;
			text-align: center;
			line-height: 48px;
			color: #888;
		}
		
		#restart {
			flex: 1;
			font-size: 24px;
			line-height: 48px;
			text-align: center;
			color: #fff;
			background-color: #f00;
			border-radius: 6px;
			cursor: pointer;
			box-shadow: 0 1px 3px rgba(0,0,0,0.3);
			transition: background-color 0.3s;
		}
		
		#restart:hover {
			background-color: #c00;
		}
		
	</style>
</head>
<body>
	<div id="gameboard">
	</div>
	<div class="clearfix"></div>
	<div id="scoreboard">
		<div id="score">Score: 0</div>
		<div id="restart">RESTART</div>
	</div>