make a 2D retro-game-style game where you use your finger to color in squares on a board and when you’ve colored in all squares, you complete the game's game

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

No:4050

1114

←

Prev Next

→

make a 2D retro-game-style game where you use your..ALL
Developer User3758｜Date and time 23/6/27 4:59:30
Build time 23.61 sec｜Game capacity 2.315KB｜

Script

. Here is some sample code to get started:

This code creates a 5x5 grid of squares and adds a click event listener to each square. When a square is clicked, its background color changes to pink and the checkWin() function is called. The checkWin() function loops through all squares and checks if their background color is pink. If so, it sets the allColored variable to true. If all squares are colored, it displays a congratulatory message using the alertHisa() function. You can customize this code to add more features like a timer, score, levels, and more. Good luck!

←

Prev　Next

→ 　

Back　

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

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

Here is some sample code to get started:

<!DOCTYPE html>
<html>
<head>
	<title>Coloring Game</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	#game-board {
		width: 90vw;
		height: 90vh;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: repeat(5, 1fr);
		grid-gap: 5px;
		margin: auto;
	}
	.square {
		background-color: lightgray;
		border: 1px solid gray;
	}
	</style>
</head>
<body>
	<div id="game-board">
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
		<div class="square"></div>
	</div>
	<script>
	// Add click event listener to all squares
	const squares = document.querySelectorAll('.square');
	squares.forEach(square => {
		square.addEventListener('click', () => {
			square.style.backgroundColor = 'pink';
			checkWin();
		});
	});

// Check if all squares are colored
	function checkWin() {
		let allColored = true;
		squares.forEach(square => {
			if (square.style.backgroundColor !== 'pink') {
				allColored = false;
			}
		});
		if (allColored) {
			alert('Congratulations! You have won!');
		}
	}
	</script>
</body>
</html>

You can customize this code to add more features like a timer, score, levels, and more. Good luck!