Merge pull request #118 from Surajit0573/Snake_Game

Snake game
shrey141102 · Dec 11, 2023 · c3d443c · c3d443c
2 parents e86096f + dfa6dce
commit c3d443c
Show file tree

Hide file tree

Showing 10 changed files with 129 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -32,6 +32,7 @@
 - BLog Website
 - Expense tracker
 - Word Scramble
+- Snake Game
 
 
 <h2>🍰 Contribution Guidelines:</h2>

diff --git a/Snake_Game/Assets/food.png b/Snake_Game/Assets/food.png
diff --git a/Snake_Game/Assets/grass.jpg b/Snake_Game/Assets/grass.jpg
diff --git a/Snake_Game/Assets/preview.jpg b/Snake_Game/Assets/preview.jpg
diff --git a/Snake_Game/Assets/snake.png b/Snake_Game/Assets/snake.png
diff --git a/Snake_Game/README.md b/Snake_Game/README.md
@@ -0,0 +1,2 @@
+# Snake-Game
+Its a basics Javascript snake game using DOM Event
diff --git a/Snake_Game/app.js b/Snake_Game/app.js
@@ -0,0 +1,33 @@
+let food =document.querySelector(".food");
+let snake=document.querySelector(".snake");
+let move=document.querySelector("input");
+let h1=document.querySelector("h1");
+let mh=0;
+let mv=0;
+let fh=0;
+let fv=0;
+let count =-1;
+move.addEventListener("keydown",function(event){
+    if(mv==fv&&mh==fh){
+        fv=Math.floor(Math.random()*19)*30;
+        fh=Math.floor(Math.random()*29)*30;
+        food.style.marginTop=`${fv}px`;
+        food.style.marginLeft=`${fh}px`;
+        count++;
+        h1.innerText=`SCORE : ${count}`;
+    }
+    if(event.code=="ArrowUp"&&mv>0){
+        mv-=30;
+    }
+    if(event.code=="ArrowDown"&&mv<560){
+        mv+=30;
+    }
+    if(event.code=="ArrowLeft"&&mh>0){
+        mh-=30;
+    }
+    if(event.code=="ArrowRight"&&mh<860){
+        mh+=30;
+    }
+    snake.style.marginTop=`${mv}px`;
+    snake.style.marginLeft=`${mh}px`;
+});
diff --git a/Snake_Game/index.html b/Snake_Game/index.html
@@ -0,0 +1,23 @@
+<!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="style.css">
+</head>
+<body>
+    <div class="playground">
+
+    </div>
+    <div class="snake"></div>
+    <div class="food"></div>
+   <div class="score">
+    <div class="input">MOVE<input type="text"></div>
+    <br><br>
+    <h1>SCORE : 0 </h1>
+   </div>
+
+    <Script src="app.js"></Script>
+</body>
+</html>
diff --git a/Snake_Game/style.css b/Snake_Game/style.css
@@ -0,0 +1,62 @@
+*{
+    margin: 0px;
+    padding: 0px;
+}
+.playground{
+    height:600px;
+    width: 900px;
+    background-image: url(Assets/grass.jpg);
+    background-size: cover;
+    position: absolute;
+    opacity: 0.8;
+}
+
+.food{
+    height: 50px;
+    width:70px;
+    background-image: url(Assets/food.png);
+    background-size: cover;
+    position: absolute;
+}
+
+.snake{
+    height: 60px;
+    width: 60px;
+    position: absolute;
+    background-image: url(Assets/snake.png);
+    background-size: cover;
+    position: absolute;
+}
+.score{
+
+    height: 300px;
+    width: 300px;
+    position: absolute; 
+    margin-left: 903px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/script.js b/script.js
@@ -235,13 +235,21 @@ const projects = [
     link: "./Word Scramble/index.html",
     image: "https://dictionary.cambridge.org/external/images/wordscramble-og-image.png"
   },
+  {
+    title: "Snake Game",
+    discription:
+      "Its a basics Javascript snake game using DOM Event.",
+    link: "./Snake_Game/index.html",
+    image: "https://w7.pngwing.com/pngs/543/374/png-transparent-snake-2000-classic-nokia-game-slither-worm-snake-a-classic-snake-game-classic-game-snake-ii-snake-food-animals-grass-thumbnail.png"
+  },
   {
     title: "Sudoku Game",
     discription:
       "Sudoku Game game made using HTML, CSS and JS",
     link: "./Sudoku Game/index.html",
     image: "./Sudoku Game/bozhin-karaivanov-yqcWOAHH1Rs-unsplash.jpg"
   }
+
 ];
 
 const cards = document.getElementsByClassName("cards");
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Snake-Game
		Its a basics Javascript snake game using DOM Event