asadravian · aneeqkhurram007 · Oct 25, 2022 · Oct 25, 2022 · Oct 25, 2022
diff --git a/JavaScript Library/elements_Scrapping.js b/JavaScript Library/elements_Scrapping.js
@@ -0,0 +1,59 @@
+let string = "youtube";
+let a = document.links;
+Array.from(a).forEach(function (elements) {
+    if (elements.toString().includes(string)) {
+        document.body.innerHTML = elements;
+        console.log(`<h2>{elements}</h2>`);
+    }
+});
+const flname = `<h1> ${"Aneeq Khurram"} </h1>`;
+string = `<h2>${string}</h2>`;
+document.body.innerHTML = `<h2>Aneeq Khurram</h2>`;
+;
+
+// element = element.className;
+// element = element.childNodes;
+// element = element.parentNode;
+// element.style.color = 'red';
+// element.innerText = 'Harry is a good boy';
+// element.innerHTML = '<b>Harry is a good boy</b>';
+// console.log(element.innerText);console.log('Welcome to tutorial 14');
+/*
+element selectors:
+1. Single element selector
+2. Multi element selector
+*/
+
+// 1. Single element selector
+let element = document.getElementById('myfirst');
+// element = element.className;
+// element = element.childNodes;
+// element = element.parentNode;
+// element.style.color = 'red';
+// element.innerText = 'Harry is a good boy';
+// element.innerHTML = '<b>Harry is a good boy</b>';
+// console.log(element.innerText);
+
+
+let sel = document.querySelector('#myfirst');
+sel = document.querySelector('.child');
+sel = document.querySelector('div');
+// sel.style.color = 'green';
+console.log(sel)
+
+// 2. Multi element selector
+let elems = document.getElementsByClassName('child');
+elems = document.getElementsByClassName('container');
+elems = document.getElementsByTagName('div');
+console.log(elems)
+
+for (let index = 0; index < elems.length; index++) {
+    const element = elems[index];
+    console.log(element);
+    element.style.color = 'blue';
+}
+// Array.from(elems).forEach(element => {
+//     console.log(element);
+//    element.style.color = 'blue';
+// });
+// console.log(elems[0].getElementsByClassName('child'))
diff --git a/JavaScript Library/index.html b/JavaScript Library/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Snake Xenzia</title>
+    <link rel="stylesheet" href="css/style.css" />
+  </head>
+  <body>
+    <div class="body">
+      <div id="score">Score:0</div>
+      <div id="board"></div>
+    </div>
+  </body>
+  <script src="js/index.js"></script>
+</html>
diff --git a/JavaScript Library/snakeGame.js b/JavaScript Library/snakeGame.js
@@ -0,0 +1,128 @@
+// Game Constants and Variables
+// Aneeq Khurram007-2
+let direction = {
+    x: 0,
+    y: 0,
+};
+const foodSound = new Audio('food.mp3');
+const gameOver = new Audio('gameover.mp3');
+const moveSound = new Audio('move.mp3');
+const musicSound = new Audio('music.mp3');
+let board = document.getElementById('board');
+let Score = document.getElementById('score')
+let speed = 5;
+let lastPaintTime = 0;
+let snakeArray = [
+    { x: 13, y: 15 }
+];
+let food = { x: 6, y: 7 };
+let inputDirection = { x: 0, y: 0 };
+let score = 0;
+// Game Functions
+function main(currentTime) {
+    window.requestAnimationFrame(main);
+    if ((currentTime - lastPaintTime) / 1000 < 1 / speed) {
+        return
+    }
+    lastPaintTime = currentTime;
+    gameEngine();
+}
+function isCollide(snakeArray) {
+    // if you bump into yourself
+    for (let i = 1; i < snakeArray.length; i++) {
+        if (snakeArray[i].x === snakeArray[0].x && snakeArray[i].y === snakeArray[0].y) {
+            return true;
+        }
+    }
+    if (snakeArray[0].x >= 18 || snakeArray[0].x <= 0 || snakeArray[0].y >= 18 || snakeArray[0].y <= 0) {
+        return true;
+    }
+}
+function gameEngine() {
+    // Part 1: Updating the snake variable (Array)
+    if (isCollide(snakeArray)) {
+        gameOver.play();
+        musicSound.pause();
+        inputDirection = { x: 0, y: 0 };
+        alert("Game Over. Press any key to play again!");
+        snakeArray = [{ x: 13, y: 15 }];
+        musicSound.play();
+        score = 0;
+
+    }
+    // If you have eaten the food, Increment the score and regenerate food
+    if (snakeArray[0].y === food.y && snakeArray[0].x === food.x) {
+        foodSound.play();
+        score += 1;
+        Score.innerHTML = `Score : ${score}`;
+        snakeArray.unshift({ x: snakeArray[0].x + inputDirection.x, y: snakeArray[0].y + inputDirection.y })
+        let a = 2;
+        let b = 16;
+        food = { x: Math.round(a + (b - a) * Math.random()), y: Math.round(a + (b - a) * Math.random()) }
+    }
+    // Moving the snake
+    for (let i = snakeArray.length - 2; i >= 0; i--) {
+        snakeArray[i + 1] = { ...snakeArray[i] };
+    }
+    snakeArray[0].x += inputDirection.x;
+    snakeArray[0].y += inputDirection.y;
+    // Part 2: Render the snake and food
+    // Display the Snake
+    board.innerHTML = "";
+    snakeArray.forEach((e, index) => {
+        snakeElement = document.createElement('div');
+        snakeElement.style.gridRowStart = e.y;
+        snakeElement.style.gridColumnStart = e.x;
+        if (index === 0) {
+            snakeElement.classList.add('head');
+        }
+        else {
+            snakeElement.classList.add('snake');
+
+        }
+        board.appendChild(snakeElement);
+    })
+    // Display the food
+    foodElement = document.createElement('div');
+    foodElement.style.gridRowStart = food.y;
+    foodElement.style.gridColumnStart = food.x;
+    foodElement.classList.add('food');
+    board.appendChild(foodElement);
+
+
+}
+
+
+
+
+
+//Main Login
+window.requestAnimationFrame(main);
+window.addEventListener('keydown', e => {
+    inputDirection = { x: 0, y: 1 }//Start the game
+    moveSound.play();
+    switch (e.key) {
+        case 'ArrowUp':
+            inputDirection.x = 0;
+            inputDirection.y = -1;
+            break;
+        case 'ArrowDown':
+            inputDirection.x = 0;
+            inputDirection.y = 1;
+
+            break;
+        case 'ArrowLeft':
+            inputDirection.x = -1;
+            inputDirection.y = 0;
+
+            break;
+        case 'ArrowRight':
+            inputDirection.x = 1;
+            inputDirection.y = 0;
+
+            break;
+        default:
+            break;
+    }
+    console.log(snakeArray[0])
+})