update style, try to make special fruits and target

MikixIT · Oct 6, 2023 · 85b6fc9 · 85b6fc9
1 parent ff9c5ff
commit 85b6fc9
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 5 deletions.
diff --git a/game.js b/game.js
@@ -1,5 +1,6 @@
 const canvas = document.querySelector('#game');
 const ctx = canvas.getContext('2d');
+const scoreHTML = document.querySelector("#score")
 
  class SnakePart{
      constructor (x ,y){
@@ -14,10 +15,11 @@ const ctx = canvas.getContext('2d');
                 °Serpente che quando collide su stesso crepa 💀
                 °Serpente non deve muover sopra se stesso 🔴
                 °Serpente che esce fuori dal gioco crepa 💀  ✅
+                °Score fuori da canva 👾
 
 */
 
-
+var colors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];
 
 let speed = 6;
 
@@ -34,6 +36,9 @@ let tailLength = 2;
 let fruitX = 5;
 let fruitY = 5;
 
+//special fruit
+let fruitSPX = 7;
+let fruitSPY = 7;
 
 let xVelocity = 0;
 let yVelocity = 0;
@@ -90,9 +95,7 @@ let clearScreen = () => {
 }
 
 let drawScore = () => {
-    ctx.fillStyle = "white";
-    ctx.font = "15px Verdana"
-    ctx.fillText("Score " + score, canvas.width-70, 15)
+    scoreHTML.innerHTML= score + "<span> Points </span>";  
 }
 
 
@@ -123,6 +126,14 @@ let drawFruit = () => {
     ctx.fillRect(fruitX * tileCount, fruitY * tileCount, tileSize, tileSize)
 }
 
+//FRUTTO SPECIAL CHE DA 5 PUNTI!
+// let drawFruitSP = () => {
+//     ctx.fillRect = 'white'
+//     ctx.fillRect(fruitSPX * tileCount, fruitSPY * tileCount, tileSize, tileSize)
+// }
+
+
+
  let checkFruitCollision = () => {
      if(fruitX == headX && fruitY == headY){
         fruitX = Math.floor(Math.random() * tileCount);

diff --git a/index.html b/index.html
@@ -4,25 +4,80 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@600;700&display=swap');
+
+        @keyframes rainbow{
+            100%,0%{
+                color: rgb(255,0,0);
+            }
+            8%{
+                color: rgb(255,127,0);
+            }
+            16%{
+                color: rgb(255,255,0);
+            }
+            25%{
+                color: rgb(127,255,0);
+            }
+            33%{
+                color: rgb(0,255,0);
+            }
+            41%{
+                color: rgb(0,255,127);
+            }
+            50%{
+                color: rgb(0,255,255);
+            }
+            58%{
+                color: rgb(0,127,255);
+            }
+            66%{
+                color: rgb(0,0,255);
+            }
+            75%{
+                color: rgb(127,0,255);
+            }
+            83%{
+                color: rgb(255,0,255);
+            }
+            91%{
+                color: rgb(255,0,127);
+            }
+        }
         body{
+            font-family: 'Pixelify Sans', cursive;
             margin: 0px;
             padding: 0px;
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
-
+            background-color: rgba(0, 0, 0, 0.761);
+        }
+        h1{
+            color: white;
+            animation: rainbow 6.5s linear;
+		    animation-iteration-count: infinite;
         }
         canvas{
             margin-top: 30px;
             box-shadow: 20px 10px 50px black;
         }
+        #score{
+            animation: rainbow 6.5s linear;
+		    animation-iteration-count: infinite;
+            font-size: 50px
+        }
+        span{
+            color: white;
+        }
     </style>
     <title>Document</title>
 </head>
 <body>
     <h1>Hello Twitch!</h1>
     <canvas id="game" width="400" height="400"></canvas>
+    <div id="score"></div>
     <script src="game.js"></script>
 </body>
 </html>