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

No:1419

170

←

Prev Next

→

Bingo game A game in which a random number appears..ALL
Developer User3293｜Date and time 23/6/18 15:10:39
Build time 24.843 sec｜Game capacity 2.258KB｜

Script

Bingo Game

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Bingo Game</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			font-size: 2em;
			text-align: center;
		}

#board {
			display: inline-block;
			border: 1px solid black;
		}

.square {
			display: inline-block;
			width: 3em;
			height: 3em;
			border: 1px solid black;
			font-size: 1em;
			margin-right: -1px;
			margin-bottom: -1px;
			cursor: pointer;
		}

.square:hover {
			background-color: lightgray;
		}
	</style>
</head>
<body>
	<h1>Bingo Game</h1>
	<div id="board">
		<div id="0" class="square"></div>
		<div id="1" class="square"></div>
		<div id="2" class="square"></div>
		<br>
		<div id="3" class="square"></div>
		<div id="4" class="square"></div>
		<div id="5" class="square"></div>
		<br>
		<div id="6" class="square"></div>
		<div id="7" class="square"></div>
		<div id="8" class="square"></div>
	</div>
	<br>
	<button id="start">Start Game</button>
	<button id="reset">Reset Board</button>
	<script>
		var numbers = [];

function startGame() {
			for (var i = 0; i < 9; i++) {
				document.getElementById(i.toString()).innerHTML = "";
			}

numbers = getNumbers();
			renderNumbers(numbers);
		}

function resetBoard() {
			for (var i = 0; i < 9; i++) {
				document.getElementById(i.toString()).innerHTML = "";
			}
		}

function getNumbers() {
			var numSet = new Set();

while (numSet.size < 9) {
				var num = Math.floor(Math.random() * 9) + 1;
				numSet.add(num);
			}

return Array.from(numSet);
		}

function renderNumbers(numbers) {
			for (var i = 0; i < 9; i++) {
				document.getElementById(i.toString()).innerHTML = numbers[i];
			}
		}

function markSquare(square) {
			var number = parseInt(square.innerHTML);

if (numbers.includes(number)) {
				square.style.backgroundColor = "green";
			} else {
				square.style.backgroundColor = "red";
			}
		}

document.getElementById("start").addEventListener("click", startGame);
		document.getElementById("reset").addEventListener("click", resetBoard);

var squares = document.getElementsByClassName("square");
		for (var i = 0; i < squares.length; i++) {
			squares[i].addEventListener("click", function() { markSquare(this); });
		}
	</script>
</body>
</html>