<!
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Avengers Puzzle</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<br />
<div id="board"></div>
<h2>Turns: <span id="turns">0</span></h2>
<div id="pieces"></div>
<button id="nextLevelBtn" style="display:none;">Next Level</button>
</body>
</html>
let level = 1;
let rows = 0;
let columns = 0;
let pieces = [];
function initializeGame() {
rows = level + 3; // Level 1: 4x4, Level 2: 5x5, Level 3: 6x6, ...
columns = rows;
// Clear existing board and pieces
document.getElementById("board").innerHTML = "";
document.getElementById("pieces").innerHTML = "";
// Initialize the board
for (let r = 0; r < rows; r++) {
for (let c = 0; c < columns; c++) {
let tile = document.createElement("img");
tile.src = "./images/blank.jpg";
tile.addEventListener("dragstart", dragStart);
tile.addEventListener("dragover", dragOver);
tile.addEventListener("dragenter", dragEnter);
tile.addEventListener("dragleave", dragLeave);
tile.addEventListener("drop", dragDrop);
tile.addEventListener("dragend", dragEnd);
document.getElementById("board").append(tile);
}
}
// Initialize pieces
pieces = [];
for (let i = 1; i <= rows * columns; i++) {
pieces.push(i.toString());
}
pieces.reverse();
for (let i = 0; i < pieces.length; i++) {
let j = Math.floor(Math.random() * pieces.length);
let tmp = pieces[i];
pieces[i] = pieces[j];
pieces[j] = tmp;
}
for (let i = 0; i < pieces.length; i++) {
let tile = document.createElement("img");
tile.src = "./images/" + pieces[i] + ".jpg";
tile.addEventListener("dragstart", dragStart);
tile.addEventListener("dragover", dragOver);
tile.addEventListener("dragenter", dragEnter);
tile.addEventListener("dragleave", dragLeave);
tile.addEventListener("drop", dragDrop);
tile.addEventListener("dragend", dragEnd);
document.getElementById("pieces").append(tile);
}
// Update level and turns
document.getElementById("turns").innerText = "0";
document.getElementById("nextLevelBtn").style.display = "none";
}
function nextLevel() {
level++;
initializeGame();
}
window.onload = function () {
initializeGame();
};
// Drag and drop functions (unchanged)
function dragStart() {
currTile = this;
}
function dragOver(e) {
e.preventDefault();
}
function dragEnter(e) {
e.preventDefault();
}
function dragLeave() {}
function dragDrop() {
otherTile = this;
}
function dragEnd() {
if (currTile.src.includes("blank")) {
return;
}
let currImg = currTile.src;
let otherImg = otherTile.src;
currTile.src = otherImg;
otherTile.src = currImg;
turns++;
document.getElementById("turns").innerText = turns;
// Check if puzzle is solved
if (isPuzzleSolved()) {
document.getElementById("nextLevelBtn").style.display = "block";
}
}
function isPuzzleSolved() {
let boardTiles = document.getElementById("board").getElementsByTagName("img");
let pieceTiles = document.getElementById("pieces").getElementsByTagName("img");
for (let i = 0; i < boardTiles.length; i++) {
if (boardTiles[i].src !== pieceTiles[i].src) {
return false;
}
}
return true;
}
document.getElementById("nextLevelBtn").addEventListener("click", nextLevel);
body {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
#board {
width: 400px; /* Adjust based on levels */
height: 400px; /* Adjust based on levels */
border: 2px solid purple;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
#board img {
width: calc(400px / 4); /* Adjust based on levels */
height: calc(400px / 4); /* Adjust based on levels */
border: 0.5px solid lightblue;
}
#pieces {
width: 1040px; /* Adjust based on levels */
height: 160px; /* Adjust based on levels */
border: 2px solid purple;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
#pieces img {
width: calc(1040px / 13); /* Adjust based on levels */
height: calc(160px / 2); /* Adjust based on levels */
border: 0.5px solid lightblue;
}
const nameInput = document.getElementById("name-input");
const playerName = document.getElementById("player-name");
// Mulai game saat tombol Mulai Game ditekan
startBtn.addEventListener("click", function () {
playerNameValue = nameInput.value.trim();
if (playerNameValue === "") {
alert("Masukkan nama Anda terlebih dahulu!");
return;
}
// Sembunyikan bagian nama dan tampilkan game container
document.getElementById("name-container").style.display = "none";
gameContainer.style.display = "block";
// Tampilkan nama pemain
playerName.textContent = `Halo, ${playerNameValue}!`;
// Tampilkan pertanyaan pertama
displayQuestion();
});
