Scribd Logo
Upload

Welcome to Scribd!

  • 6 views

    KODE

    Uploaded by

    zakariaa10232

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd

    KODE

    Uploaded by

    zakariaa10232
    6 views4 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    6 views4 pages

    KODE

    Uploaded by

    zakariaa10232

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    of 4

    <!

    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();
    });

    You might also like