diff --git a/Projects/Snake/index.html b/Projects/Snake/index.html new file mode 100644 index 0000000..c9c1e96 --- /dev/null +++ b/Projects/Snake/index.html @@ -0,0 +1,38 @@ + + + + + + Snake Game + + + + + + + + + diff --git a/Projects/Snake/snake.js b/Projects/Snake/snake.js new file mode 100644 index 0000000..03db634 --- /dev/null +++ b/Projects/Snake/snake.js @@ -0,0 +1,106 @@ +const canvas = document.getElementById('game'); +const ctx = canvas.getContext('2d'); +let scale = 20; +let rows, cols; + +function resizeCanvas() { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + rows = Math.floor(canvas.height / scale); + cols = Math.floor(canvas.width / scale); +} + +window.addEventListener('resize', resizeCanvas); +resizeCanvas(); + +let snake = { + x: Math.floor(cols / 2) * scale, + y: Math.floor(rows / 2) * scale, + dx: scale, + dy: 0, + cells: [], + maxCells: 4 +}; + +let food = getRandomFood(); + +function getRandomFood() { + return { + x: Math.floor(Math.random() * cols) * scale, + y: Math.floor(Math.random() * rows) * scale + }; +} + +function loop() { + requestAnimationFrame(loop); + if (++count < 5) { + return; + } + count = 0; + ctx.clearRect(0, 0, canvas.width, canvas.height); + + snake.x += snake.dx; + snake.y += snake.dy; + + if (snake.x < 0) { + snake.x = canvas.width - scale; + } else if (snake.x >= canvas.width) { + snake.x = 0; + } + + if (snake.y < 0) { + snake.y = canvas.height - scale; + } else if (snake.y >= canvas.height) { + snake.y = 0; + } + + snake.cells.unshift({x: snake.x, y: snake.y}); + + if (snake.cells.length > snake.maxCells) { + snake.cells.pop(); + } + + ctx.fillStyle = 'red'; + ctx.fillRect(food.x, food.y, scale, scale); + + ctx.fillStyle = 'lime'; + snake.cells.forEach((cell, index) => { + ctx.fillRect(cell.x, cell.y, scale, scale); + + if (cell.x === food.x && cell.y === food.y) { + snake.maxCells++; + food = getRandomFood(); + } + + for (let i = index + 1; i < snake.cells.length; i++) { + if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) { + snake.maxCells = 4; + snake.cells = []; + snake.x = Math.floor(cols / 2) * scale; + snake.y = Math.floor(rows / 2) * scale; + snake.dx = scale; + snake.dy = 0; + food = getRandomFood(); + } + } + }); +} + +let count = 0; +document.addEventListener('keydown', e => { + if (e.key === 'ArrowLeft' && snake.dx === 0) { + snake.dx = -scale; + snake.dy = 0; + } else if (e.key === 'ArrowUp' && snake.dy === 0) { + snake.dy = -scale; + snake.dx = 0; + } else if (e.key === 'ArrowRight' && snake.dx === 0) { + snake.dx = scale; + snake.dy = 0; + } else if (e.key === 'ArrowDown' && snake.dy === 0) { + snake.dy = scale; + snake.dx = 0; + } +}); + +requestAnimationFrame(loop); diff --git a/Projects/Snake/starfield.js b/Projects/Snake/starfield.js new file mode 100644 index 0000000..7868576 --- /dev/null +++ b/Projects/Snake/starfield.js @@ -0,0 +1,37 @@ +const starCanvas = document.getElementById('starfield'); +const starCtx = starCanvas.getContext('2d'); +let stars = []; +const STAR_COUNT = 100; + +function resizeStarfield() { + starCanvas.width = window.innerWidth; + starCanvas.height = window.innerHeight; + stars = []; + for (let i = 0; i < STAR_COUNT; i++) { + stars.push({ + x: Math.random() * starCanvas.width, + y: Math.random() * starCanvas.height, + speed: 0.5 + Math.random() * 1.5, + size: Math.random() * 2 + 0.5 + }); + } +} + +function updateStars() { + starCtx.fillStyle = 'black'; + starCtx.fillRect(0, 0, starCanvas.width, starCanvas.height); + starCtx.fillStyle = 'white'; + for (const star of stars) { + star.y += star.speed; + if (star.y > starCanvas.height) { + star.y = 0; + star.x = Math.random() * starCanvas.width; + } + starCtx.fillRect(star.x, star.y, star.size, star.size); + } + requestAnimationFrame(updateStars); +} + +window.addEventListener('resize', resizeStarfield); +resizeStarfield(); +updateStars();