From 11917ccd7aaf3c85b3fe8954bff597d2c2cf2f75 Mon Sep 17 00:00:00 2001 From: Himanshu Bhardwaj Date: Sun, 9 Jun 2024 18:47:09 +0530 Subject: [PATCH] Snake added. --- index.css | 4 +++ index.html | 18 +++++++++++++ jsChess/jsChess.css | 8 ++++++ jsChess/jsChess.js | 45 +++++++++++++++++++++++-------- jsSnake/snake.css | 54 ++++++++++++++++++++++++++++++++++++++ jsSnake/snake.html | 26 ++++++++++++++++++ jsSnake/snake.js | 11 ++++++++ static/jsSnake_favicon.svg | 1 + 8 files changed, 156 insertions(+), 11 deletions(-) create mode 100644 jsSnake/snake.css create mode 100644 jsSnake/snake.html create mode 100644 jsSnake/snake.js create mode 100644 static/jsSnake_favicon.svg diff --git a/index.css b/index.css index 38389e9..ca22d51 100644 --- a/index.css +++ b/index.css @@ -115,6 +115,10 @@ body { object-fit: cover; } +#snake-svg { + width: 40%; +} + .ending { margin-top: 1rem; margin-left: 1rem; diff --git a/index.html b/index.html index a60921c..881c68e 100644 --- a/index.html +++ b/index.html @@ -126,6 +126,24 @@

Chess

+
+

Snake

+ + + + +
+ + + +
+
*This website is a work in progress and would be completed soon. While diff --git a/jsChess/jsChess.css b/jsChess/jsChess.css index 1ef411a..ae696cc 100644 --- a/jsChess/jsChess.css +++ b/jsChess/jsChess.css @@ -29,6 +29,14 @@ body { background-color: green; } +.color-gray { + background-color: gray; +} + +.color-svg-white { + fill: white; +} + .piece { width: 100%; height: 100%; diff --git a/jsChess/jsChess.js b/jsChess/jsChess.js index 155ec92..538de35 100644 --- a/jsChess/jsChess.js +++ b/jsChess/jsChess.js @@ -20,36 +20,59 @@ for (let i = 0; i < chessPieces.length; i++) { square.classList.add('square'); square.setAttribute('id', i); square.innerHTML = chessPieces[i]; + const rowNumber = Math.floor((63 - i) / 8) + 1; + if (rowNumber % 2 == 0) { + i % 2 == 0 + ? square.classList.add('color-gray') + : square.classList.add('color-green'); + } else { + i % 2 == 0 + ? square.classList.add('color-green') + : square.classList.add('color-gray'); + } + // if (rowNumber % 2 == 0) { + // square.classList.add('color-green'); + // } else { + // square.classList.add('color-gray'); + // } + + if (i >= 48) { + const svgElement = square.firstChild.firstChild; + svgElement.classList.add('color-svg-white'); + } squares.push(square); chessBoard.appendChild(square); } // Now I want to add color black to every alternate square could be odd numbered or even numbered -for (let i = 0; i < 8; i++) { - for (let j = 0; j < 8; j++) { - if ((i + j) % 2 === 0) { - squares[i * 8 + j].classList.add('color-green'); // Add color class for black squares - } - } -} +// for (let i = 0; i < 8; i++) { +// for (let j = 0; j < 8; j++) { +// if ((i + j) % 2 === 0) { +// squares[i * 8 + j].classList.add('color-green'); +// } else { +// squares[i * 8 + j].classList.add('color-gray'); +// } +// } +// } // console.log({ squares }); /* EVENT LISTENERS */ squares.forEach((square) => { square.addEventListener('click', (e) => { // console.log(e.target.id); - console.log(e); + // console.log(e); switch ( e.target.parentElement.id || e.target.parentElement.parentElement.id ) { case 'pawn': - squares[Number(square.id) + 8].classList.toggle('highlighted'); - squares[Number(square.id) + 16].classList.toggle('highlighted'); + // squares[Number(square.id) + 8].classList.toggle('highlighted'); + // squares[Number(square.id) + 16].classList.toggle('highlighted'); break; - default: break; } }); }); + +// console.log(squares); diff --git a/jsSnake/snake.css b/jsSnake/snake.css new file mode 100644 index 0000000..9b7d303 --- /dev/null +++ b/jsSnake/snake.css @@ -0,0 +1,54 @@ +html { + width: 100vw; + height: 100vh; +} + +body { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + row-gap: 2rem; + align-items: center; + justify-content: center; + margin: 0; +} + +#canvas { + width: 320px; + height: 320px; + border: 5px solid black; + /* display: flex; + flex-wrap: wrap; */ + display: grid; + grid-template-columns: repeat(10, 1fr); + grid-template-rows: repeat(10, 1fr); +} + +.canvas-cubes { + border: 1px solid blue; + /* width: calc(100% / 10); */ + /* height: calc(100% / 10); */ + box-sizing: border-box; +} + +#controls-column { + display: flex; + flex-direction: column; + align-items: center; + row-gap: 0.5rem; + /* border: 3px solid black; */ +} + +#controls-column #up, +#down, +#controls-row #left, +#right { + width: 2rem; + aspect-ratio: 1/1; +} + +#controls-row { + display: flex; + column-gap: 3rem; +} diff --git a/jsSnake/snake.html b/jsSnake/snake.html new file mode 100644 index 0000000..5cdd090 --- /dev/null +++ b/jsSnake/snake.html @@ -0,0 +1,26 @@ + + + + + + + + Snake + + +

Score

+ 0 +
+
+
+ +
+ + +
+ +
+
+ + + diff --git a/jsSnake/snake.js b/jsSnake/snake.js new file mode 100644 index 0000000..fdfd48c --- /dev/null +++ b/jsSnake/snake.js @@ -0,0 +1,11 @@ +let canvas = document.getElementById('canvas'); + +for (let i = 0; i < 100; i++) { + let canvasCube = document.createElement('div'); + canvasCube.classList.add('canvas-cubes'); + canvasCube.setAttribute('id', i); + canvasCube.textContent = i; + canvas.appendChild(canvasCube); +} + +/* Now I am thinking to add a sprite class, which has a draw(),undraw(),add() methods */ diff --git a/static/jsSnake_favicon.svg b/static/jsSnake_favicon.svg new file mode 100644 index 0000000..ba6453e --- /dev/null +++ b/static/jsSnake_favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file