<!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>