first commit

Sira-Ndiaye · Jan 17, 2024 · 88a58da · 88a58da
commit 88a58da
Show file tree

Hide file tree

Showing 4 changed files with 228 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,11 @@
+# Snake Game (Ongoing)
+This is a snake game made with the combo HTML x CSS x JAVASCRIPT
+
+## Preview
+For a quick glimpse into the game, visit our CodePen preview: [Game Game Preview](https://codepen.io/Sira-Ndiaye/pen/GReJRNq)
+
+## Controls:
+Left: ← Arrow Key
+Right: → Arrow Key
+Go up: ↑ Arrow Key
+Down: ↓ Arrow Key
diff --git a/index.html b/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>SNAKE GAME</title>
+  <link rel="stylesheet" href="./styles.css">
+</head>
+<body>
+  <div class="container">
+    <div class="start-container">
+      <button class="btn" onClick="startGame()">Start</button>
+      <button class="btn" onClick="stopGame()">Stop</button>
+
+    </div>
+    <canvas width="400" height="400" id="game" class="canvas">
+    </canvas>
+    <div class="actions">
+      <div class="controls">
+        <button onClick="up()" class="btn up">UP</button>
+        <button onClick="down()" class="btn down">DOWN</button>
+        <button onClick="left()" class="btn left">LEFT</button>
+        <button onClick="right()" class="btn right">RIGHT</button>
+      </div>
+    </div>
+  </div>
+  <img width="16" height="16" src="https://images.vexels.com/media/users/3/141053/isolated/lists/ff6bf2a9bd3f3dcad0af0c1a2b756aa1-realistic-apple.png" style="display:none" id="apple">
+  <script src="index.js"></script>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,137 @@
+let canvas = document.getElementById("game");
+let ctx = canvas.getContext("2d");
+const img = document.getElementById("apple");
+
+const grid = 16;
+const canvasWidth = canvas.width;
+const canvasHeight = canvas.height;
+
+let start = false;
+let snake = {
+  x: 160,
+  y: 160,
+  dx: grid,
+  dy: 0,
+  cells: [],
+  maxCells: 4
+};
+
+let apple = {
+  x: 352,
+  y: 352,
+};
+
+setInterval(()=>{
+  if(start){
+     ctx.clearRect(0,0,canvasWidth,canvasHeight);
+
+  snake.x += snake.dx;
+  snake.y += snake.dy;
+
+  if(snake.x >= 400){
+    snake.x = 0
+  }else if(snake.x < 0){
+    snake.x = 400
+  }
+
+  if(snake.y >= 400){
+    snake.y = 0
+  }else if(snake.y < 0){
+    snake.y = 400
+  }
+
+  snakeEatApple();
+
+  snake.cells.unshift({x: snake.x, y: snake.y});
+
+  if (snake.cells.length > snake.maxCells) {
+    snake.cells.pop();
+  }
+
+  drawApple();
+  drawSnake();
+
+  checkUpCollision();
+  }
+},50)
+
+
+function generateRandomNb(min, max) {
+  return Math.floor(Math.random() * (max - min)) + min;
+}
+
+function drawApple(){
+  ctx.drawImage(img, apple.x, apple.y, grid, grid);
+}
+
+function drawSnake(){
+  ctx.fillStyle="red";
+  snake.cells.forEach((cell,i)=>{
+    ctx.fillRect(cell.x, cell.y, grid, grid);      
+  });
+}
+
+function snakeEatApple(){
+  if(snake.x === apple.x && snake.y === apple.y){
+    snake.maxCells++;
+    apple.x = generateRandomNb(0, 25) * 16;
+    apple.y = generateRandomNb(0, 25) * 16;
+  }
+}
+
+function checkUpCollision(){  
+  snake.cells.forEach((cell,index)=>{
+    for (var i = index + 1; i < snake.cells.length; i++){ 
+      if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) {
+        restart();
+      }
+    }
+  });
+}
+
+function up (){
+  snake.dy = -grid;
+  snake.dx = 0;
+}
+
+function down (){
+  snake.dy = grid;
+  snake.dx = 0;
+}
+
+function left (){
+  snake.dx = -grid;
+  snake.dy = 0;
+}
+
+function right (){
+  snake.dx = grid;
+  snake.dy = 0;
+}
+
+document.addEventListener('keydown', (event) => {
+  if (event.which === 38 && snake.dy === 0) up();
+  else if (event.which === 40 && snake.dy === 0) down();
+  else if (event.which === 37 && snake.dx === 0) left();
+  else if (event.which === 39 && snake.dx === 0) right();
+});
+
+function startGame () {
+  start= true;
+}
+
+function stopGame () {
+  start= false;
+}
+
+function restart(){
+  start= false;
+  snake.x = 160;
+  snake.y = 160;
+  snake.cells = [];
+  snake.maxCells = 4;
+  snake.dx = grid;
+  snake.dy = 0;
+  apple.x = generateRandomNb(0, 25) * grid;
+  apple.y = generateRandomNb(0, 25) * grid;
+}
diff --git a/styles.css b/styles.css
@@ -0,0 +1,50 @@
+body{
+  background: #333;
+}
+
+
+.container {
+  position: absolute;
+  width: 400px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+}
+
+.canvas {
+  border: 1px solid white;
+}
+
+.actions {
+  margin-top: 1.5rem;
+  display: flex;
+  flex-direction:column;
+  gap: 1rem;
+}
+
+.controls {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+}
+
+.btn {
+  width: 60px;
+  height: 30px;
+  background-color: #666;
+  padding: 0.5em;
+  border-radius: 10px;
+  border: none;
+  cursor: pointer;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.start-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  gap: 20px;
+}