amfoss · Dattaaanand · Nov 27, 2024
diff --git a/3-typing-game/images/TextboxDisabled.png b/3-typing-game/images/TextboxDisabled.png
diff --git a/3-typing-game/images/image.png b/3-typing-game/images/image.png
diff --git a/3-typing-game/images/modalDialogueBox.png b/3-typing-game/images/modalDialogueBox.png
diff --git a/3-typing-game/images/myGame.png.png b/3-typing-game/images/myGame.png.png
diff --git a/3-typing-game/images/onStart.png b/3-typing-game/images/onStart.png
diff --git a/3-typing-game/myTypingGame/gameStyle.css b/3-typing-game/myTypingGame/gameStyle.css
@@ -0,0 +1,30 @@
+body {
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    background-color: #000000;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+}
+
+#game-area {
+    text-align: center;
+}
+
+#box {
+    width: 600px;
+    height: 400px;
+    border: 4px solid #0eb029;
+    background-color: white;
+    position: relative;
+    margin-top: 20px;
+    overflow: hidden;
+}
+
+.shape {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+}
diff --git a/3-typing-game/myTypingGame/myGame.html b/3-typing-game/myTypingGame/myGame.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Key-Art Dash</title>
+    <link rel="stylesheet" href="./gameStyle.css">
+</head>
+<body>
+    <div id="game-area">
+        <h1>Dattaaaa's KeyBoard Game</h1>
+        <p>
+            Press a Key to Pop Up a <b>Coloured Cube</b>!
+        </p>
+        <p>
+            <b>Space</b> To Burst multiple Cubes!
+        </p>
+        <p>
+            <b>Backspace</b> to UNDO
+        </p>
+        <p>
+            <b>Enter</b> to Reset.
+        </p>
+        <div id="box"></div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
diff --git a/3-typing-game/myTypingGame/script.js b/3-typing-game/myTypingGame/script.js
@@ -0,0 +1,44 @@
+const canvas = document.getElementById("box");
+const shapes = [];
+function randomColor() {
+    return `hsl(${Math.floor(Math.random() * 360)}, 70%, 60%)`;
+}
+
+function createShape(x, y, color) {
+    const div = document.createElement("div");
+    div.className = "shape";
+    div.style.left = `${x}px`;
+    div.style.top = `${y}px`;
+    div.style.backgroundColor = color;
+    canvas.appendChild(div);
+    shapes.push(div);
+}
+
+document.addEventListener("keydown", (event) => {
+    const canvasRect = canvas.getBoundingClientRect();
+
+    const x = Math.random() * canvasRect.width - 20;
+    const y = Math.random() * canvasRect.height - 20;
+
+    if (event.key === " ") {
+        for (let i = 0; i < 10; i++) {
+            createShape(Math.random() * canvasRect.width, Math.random() * canvasRect.height, randomColor());
+        }
+    } 
+    else if (event.key === "Backspace") {
+        const lastShape = shapes.pop();
+        if (lastShape) {
+            canvas.removeChild(lastShape);
+        }
+    } 
+    else if (event.key === "Enter") {
+        shapes.forEach((shape) => canvas.removeChild(shape));
+        shapes.length = 0;
+    } 
+    else {
+        createShape(x, y, randomColor());
+    }
+    if (["Backspace", "Enter", " "].includes(event.key)) {
+        event.preventDefault();
+    }
+});
diff --git a/3-typing-game/solution.md b/3-typing-game/solution.md
@@ -0,0 +1,57 @@
+# 3-typing-game
+
+---
+---
+
+- First of all, created the basic typing game from the given code.
+- Added a little CSS to make it look better. 
+![Typing Game](./images/image.png)
+
+---
+### Challenge
+
+- Disabled the input event listener along with the textbox by `typedValueElement.disabled = true;`
+- To display a modal dialogue box, and also store the highscores using localStorage, I added these.
+- HTML:
+    ```
+    <div id="modal" class="modal">
+        <div class="modal-content">
+            <p id="modal-message"></p>
+            <button id="close-modal">Close</button>
+        </div>
+    </div>
+    ```
+- JavaScript:
+    ```
+    const modal = document.getElementById('modal');
+    const modalMsg = document.getElementById('modal-message');
+    const close = document.getElementById('close-modal');
+    ```
+    In the input event listener, I added,
+    ```
+    showModal(message);
+    ```
+    And created functions
+    ```
+    function showModal(message) {
+        modalMsg.innerText = message;
+        modal.style.display = 'flex';
+    }
+    close.addEventListener('click', () => {
+        modal.style.display = 'none';
+    });
+    ```
+
+---
+
+### Assignment
+
+I created a very simple game, when there is a canvas box.
+- When you press a key, a cube with a colour pops up on the canvas.
+- Backspace will remove the previous cube.
+- Spacebar will add multiple cubes.\
+- Enter will clear the canvas.
+
+You can see the Image ![here](./images/myGame.png.png)
+
+The files are ![here](./myTypingGame/).
diff --git a/3-typing-game/typing-game-solution/index.html b/3-typing-game/typing-game-solution/index.html
@@ -0,0 +1,24 @@
+<html>
+<head>
+  <title>Typing game</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>Typing game!</h1>
+    <p>Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!</p>
+    <p id="quote"></p> 
+    <p id="message"></p> 
+    <div>
+        <input type="text" aria-label="current word" id="typed-value" /> 
+        <button type="button" id="start">Start</button> 
+    </div>
+    <div id="modal" class="modal">
+        <div class="modal-content">
+            <p id="modal-message"></p>
+            <button id="close-modal">Close</button>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/3-typing-game/typing-game-solution/script.js b/3-typing-game/typing-game-solution/script.js
@@ -0,0 +1,78 @@
+const quotes = [
+    'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
+    'There is nothing more deceptive than an obvious fact.',
+    'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.',
+    'I never make exceptions. An exception disproves the rule.',
+    'What one man can invent another can discover.',
+    'Nothing clears up a case so much as stating it to another person.',
+    'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
+];
+
+let words = [];
+let wordIndex = 0;
+let startTime = Date.now();
+const quoteElement = document.getElementById('quote');
+const messageElement = document.getElementById('message');
+const typedValueElement = document.getElementById('typed-value');
+const modal = document.getElementById('modal');
+const modalMsg = document.getElementById('modal-message');
+const close = document.getElementById('close-modal');
+typedValueElement.disabled = true;
+
+document.getElementById('start').addEventListener('click', () => {
+    const quoteIndex = Math.floor(Math.random() * quotes.length);
+    const quote = quotes[quoteIndex];
+    words = quote.split(' ');
+    wordIndex = 0;
+    const spanWords = words.map(function(word) { 
+        return `<span>${word} </span>`
+    });
+    quoteElement.innerHTML = spanWords.join('');
+    quoteElement.childNodes[0].className = 'highlight';
+    messageElement.innerText = '';
+    typedValueElement.disabled = false;
+    typedValueElement.value = '';
+    typedValueElement.focus();
+    startTime = new Date().getTime();
+});
+typedValueElement.addEventListener('input', () => {
+    const currentWord = words[wordIndex];
+    const typedValue = typedValueElement.value;
+
+    if (typedValue === currentWord && wordIndex === words.length - 1) {
+        const elapsedTime = new Date().getTime() - startTime;
+        const HighScore = localStorage.getItem("highest");
+        let message = '';
+        if(HighScore != null){
+            message= `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.Current highscore is ${HighScore}`;
+        }
+        if(HighScore>(elapsedTime/1000) || HighScore == null){
+            message = `CONGRATULATIONS! You set a new Highscore of ${elapsedTime / 1000} seconds.`;
+            localStorage.setItem("highest",elapsedTime/1000);
+        }
+        showModal(message);
+        typedValueElement.disabled = true;
+    } 
+    else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
+        typedValueElement.value = '';
+        wordIndex++;
+        for (const wordElement of quoteElement.childNodes) {
+            wordElement.className = '';
+        }
+        quoteElement.childNodes[wordIndex].className = 'highlight';
+    } 
+    else if (currentWord.startsWith(typedValue)) {
+        typedValueElement.className = '';
+    } 
+    else {
+        typedValueElement.className = 'error';
+    }
+});
+
+function showModal(message) {
+    modalMsg.innerText = message;
+    modal.style.display = 'flex';
+}
+close.addEventListener('click', () => {
+    modal.style.display = 'none';
+});
diff --git a/3-typing-game/typing-game-solution/style.css b/3-typing-game/typing-game-solution/style.css
@@ -0,0 +1,76 @@
+.highlight {
+    background-color: rgb(216, 216, 157);
+}
+
+.error {
+    background-color: lightcoral;
+    border: red;
+}
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    justify-content: center;
+    align-items: center;
+}
+.modal-content {
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    text-align: center;
+}
+button {
+    padding: 5px 10px;
+    font-size: 16px;
+    margin-top: 10px;
+}
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f9f9f9;
+    color: #333;
+    text-align: center;
+    padding: 20px;
+}
+
+h1 {
+    font-size: 2rem;
+    color: #444;
+}
+
+p {
+    font-size: 1rem;
+    margin: 10px 0;
+}
+
+#quote {
+    font-style: italic;
+    color: #555;
+    margin: 20px 0;
+}
+
+#typed-value {
+    font-size: 1rem;
+    padding: 5px;
+    margin-right: 10px;
+    width: 250px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+button {
+    font-size: 1rem;
+    padding: 8px 15px;
+    color: #fff;
+    background-color: #a8a546;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #0056b3;
+}