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

No:75

333

←

Prev Next

→

Fireworks game
Developer anonymous｜Date and time 23/5/12 13:08:49
Build time 50.735 sec｜Game capacity 2.212KB｜

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 charset="utf-8">
	<style type="text/css">
		body {
			background-color: #000;
			color: #fff;
			font-family: Arial, sans-serif;
			text-align: center;
		}
		#game-board {
			width: 90%;
			margin: auto;
			padding: 20px;
			background-color: #444;
			border-radius: 10px;
			box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
		}
		#firework {
			margin-top: 20px;
			font-size: 100px;
		}
		#buttons {
			margin-top: 20px;
		}
		button {
			padding: 10px;
			font-size: 20px;
			background-color: #fff;
			color: #444;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			margin: 10px;
		}
		button:hover {
			background-color: #444;
			color: #fff;
		}
	</style>
	<script type="text/javascript">
		window.onload = function() {
			var gameBoard = document.getElementById("game-board");
			var firework = document.getElementById("firework");

// color and shape options
			var colors = ["#F44336", "#E91E63", "#9C27B0", "#673AB7", "#3F51B5", "#2196F3", "#03A9F4", "#00BCD4", "#009688", "#4CAF50", "#8BC34A", "#CDDC39", "#FFEB3B", "#FFC107", "#FF9800", "#FF5722"];
			var shapes = ["circle", "rect", "triangle", "star"];

// random integer generator
			function getRandomInt(max) {
				return Math.floor(Math.random() * max);
			}

// create a firework with random color and shape
			function createFirework() {
				var color = colors[getRandomInt(colors.length)];
				var shape = shapes[getRandomInt(shapes.length)];
				return "<span style='color: " + color + "'>&#" + shape + ";</span>";
			}

// update the firework display with random fireworks
			function updateFirework() {
				firework.innerHTML = "";
				for (var i = 0; i < getRandomInt(10) + 5; i++) {
					firework.innerHTML += createFirework();
				}
			}

// initialize the firework display and button events
			function init() {
				updateFirework();
				document.getElementById("refresh-button").onclick = updateFirework;
			}

init();
		}
	</script>
</head>
<body>
	<div id="game-board">
		<h1>花火ゲーム</h1>
		<div id="firework"></div>
		<div id="buttons">
			<button id="refresh-button">もう一度！</button>
		</div>
	</div>
</body>
</html>