Fun Puzzle Game
About this app
Enjoy a fun and interactive puzzle game that challenges your brain and enhances your cognitive skills with colorful graphics and engaging gameplay.
Fun Puzzle Game Puzzle Game
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Fun Puzzle Game</title>
<meta name="description" content="Enjoy a fun and interactive puzzle game that challenges your brain and enhances your cognitive skills with colorful graphics and engaging gameplay.">
<meta name="keywords" content="puzzle game, fun, interactive, brain training, colorful, engaging">
<script type="text/javascript">
try {
const gridSize = 4;
let board = [];
let emptyTile = { row: gridSize - 1, col: gridSize - 1 };
let moves = 0;
document.addEventListener("DOMContentLoaded", function() {
initializeBoard();
});
function initializeBoard() {
const container = document.getElementById('game-board');
board = [];
container.innerHTML = '';
let numbers = Array.from({ length: gridSize * gridSize - 1 }, (_, i) => i + 1);
numbers.push(''); // empty tile
numbers = shuffle(numbers);
for (let y = 0; y < gridSize; y++) {
const row = document.createElement('div');
row.className = "row";
for (let x = 0; x < gridSize; x++) {
const tileValue = numbers[y * gridSize + x];
const tile = document.createElement('div');
tile.className = "tile" + (tileValue ? "" : " empty");
tile.textContent = tileValue ? tileValue : ""
tile.setAttribute('data-row', y);
tile.setAttribute('data-col', x);
tile.onclick = () => moveTile(y, x);
row.appendChild(tile);
}
container.appendChild(row);
}
}
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
function moveTile(row, col) {
if ((Math.abs(row - emptyTile.row) === 1 && col === emptyTile.col) || (Math.abs(col - emptyTile.col) === 1 && row === emptyTile.row)) {
board[emptyTile.row * gridSize + emptyTile.col] = board[row * gridSize + col];
board[row * gridSize + col] = '';
emptyTile.row = row;
emptyTile.col = col;
renderBoard();
moves++;
checkWin();
}
}
function checkWin() {
const winningArrangement = Array.from({length: gridSize * gridSize - 1}, (_, i) => i + 1).concat(['']);
if (board.join() === winningArrangement.join()) {
alert("Congratulations! You've solved the puzzle in " + moves + " moves!");
initializeBoard(); // Restart the game
}
}
function renderBoard() {
const tiles = document.querySelectorAll('.tile');
tiles.forEach(tile => {
const row = tile.getAttribute('data-row');
const col = tile.getAttribute('data-col');
tile.textContent = board[row * gridSize + col] ? board[row * gridSize + col] : '';
tile.className = "tile" + (board[row * gridSize + col] ? "" : " empty");
});
}
} catch (error) {
throw error;
}
</script>
<style>
body {
background: linear-gradient(135deg, #f0f8ff, #e6e6fa);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: 'Arial', sans-serif;
}
#main-container {
text-align: center;
margin-top: 20px;
}
#game-board {
display: inline-block;
border: 3px solid #6a5acd;
border-radius: 10px;
padding: 10px;
}
.row {
display: flex;
}
.tile {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
margin: 4px;
font-size: 24px;
font-weight: bold;
color: white;
background: #9370db;
border-radius: 5px;
transition: transform 0.3s, background 0.3s;
cursor: pointer;
}
.tile:hover {
background: #7b68ee;
transform: scale(1.1);
}
.empty {
background: transparent;
pointer-events: none;
}
h1 {
color: #4b0082;
font-size: 36px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Puzzle Game</h1>
<div id="game-board"></div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!