From 5f103c92434e7a179bb9fa4418c0a44c1c459ec1 Mon Sep 17 00:00:00 2001 From: Aneeq Khurram Date: Tue, 25 Oct 2022 11:10:23 +0500 Subject: [PATCH 1/3] elements_Scraping file added --- JavaScript Library/elements_Scrapping.js | 59 ++++++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 JavaScript Library/elements_Scrapping.js diff --git a/JavaScript Library/elements_Scrapping.js b/JavaScript Library/elements_Scrapping.js new file mode 100644 index 0000000..5387a49 --- /dev/null +++ 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(`

{elements}

`); + } +}); +const flname = `

${"Aneeq Khurram"}

`; +string = `

${string}

`; +document.body.innerHTML = `

Aneeq Khurram

`; +; + +// element = element.className; +// element = element.childNodes; +// element = element.parentNode; +// element.style.color = 'red'; +// element.innerText = 'Harry is a good boy'; +// element.innerHTML = 'Harry is a good boy'; +// 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 = 'Harry is a good boy'; +// 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')) \ No newline at end of file From b2c288e25097216be80ad1c64697f4276d54db3f Mon Sep 17 00:00:00 2001 From: Aneeq Khurram Date: Tue, 25 Oct 2022 12:10:47 +0500 Subject: [PATCH 2/3] snake game adde --- JavaScript Library/snakeGame.js | 127 ++++++++++++++++++++++++++++++++ 1 file changed, 127 insertions(+) create mode 100644 JavaScript Library/snakeGame.js diff --git a/JavaScript Library/snakeGame.js b/JavaScript Library/snakeGame.js new file mode 100644 index 0000000..670ad7d --- /dev/null +++ b/JavaScript Library/snakeGame.js @@ -0,0 +1,127 @@ +// Game Constants and Variables +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]) +}) \ No newline at end of file From d3f25427e105ff98da3fad4a5a2608f749c56820 Mon Sep 17 00:00:00 2001 From: Aneeq Khurram Date: Tue, 25 Oct 2022 12:13:58 +0500 Subject: [PATCH 3/3] Init --- JavaScript Library/index.html | 17 +++++++++++++++++ JavaScript Library/snakeGame.js | 1 + 2 files changed, 18 insertions(+) create mode 100644 JavaScript Library/index.html diff --git a/JavaScript Library/index.html b/JavaScript Library/index.html new file mode 100644 index 0000000..227fdac --- /dev/null +++ b/JavaScript Library/index.html @@ -0,0 +1,17 @@ + + + + + + + Snake Xenzia + + + +
+
Score:0
+
+
+ + + diff --git a/JavaScript Library/snakeGame.js b/JavaScript Library/snakeGame.js index 670ad7d..a97091c 100644 --- a/JavaScript Library/snakeGame.js +++ b/JavaScript Library/snakeGame.js @@ -1,4 +1,5 @@ // Game Constants and Variables +// Aneeq Khurram007-2 let direction = { x: 0, y: 0,