HTMLify

Puzzle For You
Views: 440 | Author: abh
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Puzzle For You</title>
    <style>

body {
    user-select: none;
    font-family: Arial, sans-serif;
}

main {
    align-content: center;
}

.puzzle-grid {
    display: block;
    width: 400px;
}

.puzzle-grid td {
    background-color: #ddd;
    display: inline-block;
    cursor: pointer;
    font-size: 24px;
    width: 2rem;
    height: 2rem;
    text-align: center;
    border-radius: 6px;
    border: 1px dotted white;
}

.puzzle-grid td:hover {
    background-color: gray;
    color: #FCF259;
    border: 1px solid #FCF259;
}

.puzzle-grid td.selected {
    background-color: #555;
    color: #8ACCD5;
}

.puzzle-grid td.correct {
    background-color: #03A791;
    color: #333;
}

.hint {
    width: 80%;
    max-width: 300px;
    border: 1px solid black;
    margin: auto;
    background-color: #8ACCD5;
    border-radius: 8px;
    padding: 8px;
    font-size: 1.5rem;
    display: fixed;
    position: fixed;
    top: 30%;
    left: 20px;
    z-index: 10;
}

.hint .close-button {
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    top: 2px;
    right: 1.5rem;
    background-color: #FF90BB;
    z-index: 11;
}

#hint-container {
    background-color: transparent;
    position: absolute;
    text-align: center;
    z-index: 10;
}

.word-ans {
    color: #03A791;
}

.word-hint-button {
    margin: 3px;
    padding: 2px;
    background-color: #81E7AF;
}


</style>
</head>
<body>
    <main>
        <div id="hint-container"></div>
        <h1 id="level-name"></h1>
        <div id="words-container"></div>
        <div id="puzzle-grid-cantainer"></div>
    </main>
    <!--
    Line of Code:
    420
    -->
</body>
<script>
var levels = [
    {
        name: "tutorial",
        message: "Welcome, this is a puzzle game, you have to figure out the some words out of the grid",
        words: ["word", "ok"],
        found: [false, false],
        hints: [
            ["it's tutorial so just find the word 'word'", "it's in 4th row, secord column 🙂"],
            ["now find the word 'ok'", "you should find it yourself"],
        ],
        grid: [
            ["a", "b", "h", "d", "e",],
            ["f", "g", "a", "b", "h",],
            ["a", "g", "o", "o", "k",],
            ["p", "w", "o", "r", "d",],
            ["u", "v", "w", "x", "y",],
        ]
    },
    {
        name: "Level 1",
        message: "Good job, you done the tutorail, now real levels starts :)",
        words: ["level", "one"],
        found: [false, false],
        hints: [
            ["what is one here?", "the level"],
            ["level", "1"],
        ],
        grid: [
            ["t", "h", "i", "l",],
            ["o", "n", "e", "e",],
            ["w", "g", "r", "v",],
            ["o", "i", "x", "e",],
            ["o", "t", "o", "l",],
        ]
    },
    {
        name: "Level 2",
        message: "Nice, you are here. Let's do some more",
        words: ["sunflower", "moon"],
        found: [false, false],
        hints: [
            ["A flower, or may be you hehehe"],
            ["Something beutiful, ya like you", "amm... it has 4 letters", "Our Eerth have it", "word can be top to bottom"],
        ],
        grid: [
            ["y", "o", "a", "s", "g", "o", "n", "a", "l", "t",],
            ["s", "u", "n", "f", "l", "o", "w", "e", "r", "t",],
            ["r", "a", "i", "n", "m", "i", "g", "h", "t", "b",],
            ["d", "r", "e", "a", "o", "e", "t", "t", "h", "u",],
            ["l", "c", "k", "d", "o", "a", "l", "a", "o", "u",],
            ["a", "l", "i", "w", "n", "b", "c", "k", "n", "o",],
            ["t", "e", "r", "m", "i", "n", "a", "l", "h", "e",],
        ]
    },
    {
        name: "Level 3",
        message: "Wow, you here. Let's have one more round",
        words: ["earth", "you"],
        found: [false, false],
        hints: [
            ["our planet"],
            ["A flower", "Rememberd what I say last time?", "is a_flower == you?", "last row, last word"]
        ],
        grid: [
            ["c", "m", "o", "b", "t", "r",],
            ["l", "a", "e", "m", "k", "o",],
            ["k", "l", "a", "m", "e", "e",],
            ["b", "k", "r", "o", "w", "e",],
            ["l", "a", "t", "e", "b", "o",],
            ["l", "o", "h", "y", "o", "u",],
        ]
    },
    {
        name: "Level Four",
        message: "Welcome, flower 🌻, this level will contain some bEUtIFul things, be creative",
        words: ["you", "me", "Iam", "ME"],
        found: [false, false, false, false],
        hints: [
            ["a flower", "previeus answer"],
            ["The Moon", "synonym for moon", "maybe you?", "you can also say me"],
            ["someone charming", "probabbly you!", "are you charming..?"],
            ["adorable", "do I even need to explain this one?"],
        ],
        grid: [
            ["a", "m", "i", "t", "e", "y", "o", "u",],
            ["t", "e", "x", "a", "l", "j", "x", "e",],
            ["y", "o", "u", "o", "a", "l", "o", "h",],
            ["k", "x", "t", "n", "o", "c", "i", "x",],
            ["l", "o", "M", "k", "c", "o", "s", "i",],
            ["x", "k", "E", "o", "b", "j", "k", "t",],
            ["n", "o", "U", "l", "t", "o", "l", "k",],
            ["a", "k", "C", "l", "l", "l", "t", "o",],
            ["s", "n", "I", "a", "m", "y", "o", "u",],
        ]
    },
    {
        name: "Last :)",
        message: "Welmoce, The Moon",
        words: ["I", "am", "Queen", "Yes"],
        found: [false, false, false, false],
        hints: [
            ["tap every cell in secord row"],
            ["tap every cell in third row"],
            ["now the fourth :)"],
            ["yes or no?"],
        ],
        grid: [
            ["l", "N", "o", "Y", "e", "s",],
            ["d", "k", "C", "o", "L", "I",],
            ["y", "a", "j", "o", "a", "m",],
            ["r", "Q", "u", "e", "e", "n",],
        ]
    }
]
var hint_container = document.getElementById("hint-container");
var puzzle_grid_container = document.getElementById("puzzle-grid-cantainer");
var level_name = document.getElementById("level-name");
var words_container = document.getElementById("words-container");
var current_level = 0;


function createGrid(grid) {
    var table = document.createElement("table");
    table.classList.add("puzzle-grid")
    let rc = 0;
    grid.forEach((row) => {
        let tr = document.createElement("tr");
        let cc = 0;
        row.forEach((chr) => {
            let td = document.createElement("td");
            let cell_id = `cell-${rc}-${cc}`
            td.setAttribute("id", cell_id);
            td.setAttribute("onclick", "toggleCell(\"" + cell_id + "\")");
            td.innerText = chr;
            tr.appendChild(td);
            cc++;
        });
        table.appendChild(tr);
        rc++;
    });
    return table;
}

function getCell(x, y) {
    return document.getElementById(`cell-${y}-${x}`);
}

function getWordId(word, only_not_found) {
    return levels[current_level].words.indexOf(word);
}

function getNotFoundWords() {
    let words = [];
    for (let i=0; i<levels[current_level].words.length; i++) {
        if (levels[current_level].found[i] == false) {
            words.push(levels[current_level].words[i]);
        }
    }
    return words;
}

function toggleCell(cell_id) {
    console.log("cell_id", cell_id);
    let cell = document.getElementById(cell_id);
    if (cell.classList.contains("correct")) {
        return
    }
    if (cell.classList.contains("selected")) {
        cell.classList.remove("selected");
    } else {
        cell.classList.add("selected");
    }
    getNotFoundWords().forEach(checkWord);
}

function showHint(word_id, hint_id) {
    let hint_text = levels[current_level].hints[word_id][hint_id];
    let hint_html = `
    <div class="hint">
        ${hint_text}
        <button class="close-button" onclick="closeHints()">X</button>
    </div>
    `
    hint_container.innerHTML = hint_html;
}

function closeHints() {
    hint_container.innerHTML = "";
}

function setLevelName(name) {
    level_name.innerText = name;
}

function setWordHints() {
    words_container.innerHTML = "";
    for (let i=0; i<levels[current_level].words.length; i++) {
        let wd = document.createElement("div");
        wd.innerHTML = `<div>
            <h2>Word ${i+1} <span id="word-${i+1}-ans" class="word-ans"></span></h2>
            </div>`;
        console.log("i", i);
        for (let j=0; j<levels[current_level].hints[i].length; j++) {
            let whb = document.createElement("button");
            whb.setAttribute("onclick", `showHint(${i}, ${j})`);
            whb.classList.add("word-hint-button");
            whb.innerText = `Hint ${j+1}`;
            wd.appendChild(whb);
        }
        words_container.append(wd);
    }
}

function markWordFound(word_id) {
    console.log("word_id", word_id);
    let word = levels[current_level].words[word_id];
    levels[current_level].found[word_id] = true;
    let wa = document.getElementById(`word-${word_id+1}-ans`);
    wa.innerText = word;
}

function checkWord(word) {
    console.log("word cheking" , word);
    let foundWords = [];
    let cells = document.querySelectorAll('[id^="cell-"]');
    for (let y=0; y<levels[current_level].grid.length; y++) {
        for (let x=0; x<levels[current_level].grid[y].length; x++) {
            let dw = wordDown(x, y);
            let rw = wordRight(x, y);
            if (dw == word) {
                for (let i=0; i<word.length; i++) {
                    let cell = getCell(x, y+i);
                    cell.classList.remove("selected");
                    cell.classList.add("correct");
                    markWordFound(getWordId(word));
                }
                return;
            }
            if (rw == word) {
                for (let i=0; i<word.length; i++) {
                    let cell = getCell(x+i, y);
                    cell.classList.remove("selected");
                    cell.classList.add("correct");
                    markWordFound(getWordId(word));
                }
                return;
            }
        }
    }
}

function wordRight(x, y) {
    let word = "";
    let cell = document.getElementById(`cell-${y}-${x}`);
    while (cell && cell.classList.contains("selected")) {
        word += cell.innerText;
        x++;
        cell = document.getElementById(`cell-${y}-${x}`);
    }
    return word;
}

function wordDown(x, y) {
    let word = "";
    let cell = document.getElementById(`cell-${y}-${x}`);
    while (cell && cell.classList.contains("selected")) {
        word += cell.innerText;
        y++;
        cell = document.getElementById(`cell-${y}-${x}`);
    }
    return word;
}

function setLevel(level_number) {
    current_level = level_number;
    setLevelName(levels[current_level].name);
    setWordHints();
    let game_grid = createGrid(levels[current_level].grid);
    puzzle_grid_container.innerHTML = "";
    puzzle_grid_container.append(game_grid);
    hint_container.innerHTML = `
    <div class="hint">
        ${levels[current_level].message}
        <button class="close-button" onclick="closeHints()">X</button>
    </div>`;
}

function updateLevel() {
    if (getNotFoundWords().length == 0) {
        let nextLevel = current_level + 1;
        if (nextLevel == levels.length) {
            alert("you completed the game Milady Queen! 👸");
            clearInterval(updateInterval);
            setTimeout(() => {
                alert("Remember this, you are queen :)");
            }, 5000);
            setTimeout(() => {
                alert("Puzzle for you\n~A Creation by Aman Babu Hemant");
            }, 10000);
            return
        }
        setLevel(current_level+1);
    }
}

setLevel(current_level);
var updateInterval = setInterval(updateLevel, 2000);

</script>
</html>
HTMLify

Share this file:
