Snake Game GroupB Team P’Faiifu

✨ KALYARAK CHOOBPHA

<html>
  <body>
        <h1>Snake Game</h1>
        <h3 id="score_show">0</h3>

<div class="row">
    <div class="all_start">
  <p1 class="txt_start1">PRESS AT KEY PAD</p1>
    <div class="the_blocks">
      <div class="row">
        <block>
          <p>🢁</p>
          <side class="side-1"></side>
          <side class="side-2"></side>
        </block>
      </div>
      <div class="row">
        <block>
          <p>🢀</p>
          <side class="side-1"></side>
          <side class="side-2"></side>
        </block>
        <block>
          <p>🢃</p>
          <side class="side-1"></side>
          <side class="side-2"></side>
        </block>
        <block>
          <p>🢂</p>
          <side class="side-1"></side>
          <side class="side-2"></side>
        </block>
      </div>
    </div>

      <canvas id="myCanvas"></canvas>
</div>
  </div>
    <div>
      <a href="https://dev.to/consultashwani/how-to-create-a-snake-game-in-javascript-13ia" target="_blank" >CREDITS</a>
    </div>
  </div>
<style type="text/css">
    body {
        overflow: hidden;
    }
</style>
<script src="index.js"></script>

<div class="hidden-Sound">
        <audio class="background-sound"autoplay loop>
            <source src="https://ia601401.us.archive.org/5/items/bg-music_202102/bg-music.mp3"type="audio/mp3">
   </audio>
          </div>
  <style>
  @import url('https://fonts.googleapis.com/css2?family=Carter+One&display=swap');
body {
  margin: 0;
  padding: 10;
  height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
   background: url(https://i.pinimg.com/originals/b8/2f/28/b82f28a7e9c8fcb3868d3d94652c107c.gif);
   background-size: 200% 200%;
  min-height: 100vh;
}

canvas {
          display: block;
          border: 10px solid #1d1d1d;
          margin: auto;
          margin-left: -12em;
          margin-top: 20px;
          background: #282828;
          border-radius: 10px;
 }

.all_start{
  display: flex;
  width: 800px;
  justify-content: center;
  align-items: center; 
  margin: 0 auto;
}

p{
  text-align:center;
  margin: auto;
  font-size: 18px;
}
 .the_blocks{
/*     display:flex; */
    width:400px;
    margin-top: 20em;
/*     margin: auto; */
    flex-flow:row wrap;
    transform:rotateX(45deg)
    rotateZ(30deg);
    transform-style: preserve-3d;
    position:relative;
   
   
  }
  .the_blocks::before{
    position:absolute;
    top:-1.5em;
    width:100%;
    text-align:center;
    transform: translateY(-90px);
  }
  .the_blocks::after{
    position:absolute;
    left:-2.5em;
    top:1em;
    text-align:center;
    transform:rotate(-.25turn);
  }
  .the_blocks .row{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
  }
  block{
    --hue:335;
    width:12%;
    margin:1%;
    padding-top:7%;
    background-color:#ffffff;
    display:flex;
    position:relative;
    box-sizing:border-box;
    animation: kayub 5s backwards infinite;
    transform-style: preserve-3d;
    transition: 10s;
  }
  block side{
    width:100%;
    height:100%;
    background-color:#b7e1ff;
    display:block;
    position:absolute;
    top:0;
    left:0;
    transform-origin:;
    transform-style: preserve-3d;
/*     animation: kayub 5s infinite; */
  }
  side.side-1{
    background:#b7e1ff;
    transform:rotateX(90deg);
    transform-origin: 100% 100%;
    
  }
  side.side-2{
    background:#b7e1ff;
    transform:rotateY(270deg);
    transform-origin: 100% 0%;
  }

h1{
  font-size: 3.5em;
  font-family: 'Carter One', cursive;
  margin-bottom: 0em;
  margin-top: 0.1em;
  color: white;
  text-shadow: 5px 5px 10px #41a9f2;
}
h3{
  font-size: 2em;
  font-family: 'Carter One', cursive;
  margin-top: 0em;
  margin-bottom: -0.5em;
  color: white;
  text-shadow: 5px 5px 10px #41a9f2;
}
a{
  font-size: 2em;
  font-family: 'Carter One', cursive;
  margin-top: 0em;
/*   margin-bottom: -0.5em; */
  color: white;
  text-shadow: 5px 5px 10px #41a9f2;
}
p1{
  font-family: 'Carter One', cursive;
  font-size: 1.5em;
  margin-left: 3.5em;
  margin-bottom: 4em;
  color: #192471;
  text-shadow: 0px 0px 10px white;
}
p{
  font-family: 'Carter One', cursive;
  color: #023d75;
  font-size: 15px;
  text-align: center;
}

.row{
  margin-left: -15em;
}

@keyframes kayub{
  0% {
    transform: translateY(-90px);
  }
  50%{
    transform: translateX(0px);
  }
   100% {
    transform: translateY(-90px);
  }
  }
}

.hidden-Sound {
          display: none;
}
  </style>
  <script>
  
const cvs = document.getElementById("myCanvas");
const ctx = cvs.getContext("2d");

cvs.width = 500;
cvs.height = 500;
cvs.style = "box-shadow: 0px 0px 15px 2px #89c7fc;'"

let frames = 0;

let foodEaten = false;

let speed_move = 15;

let score_count = document.getElementById('score_show');

let score = 0;

const direction = {
    current : 0,
    idle : 0,
    right : 1,
    down : 2,
    left : 3,
    up : 4
}

document.addEventListener("keydown", function(evt){
    switch(evt.keyCode){
        case 37:
            //move left
            if( direction.current != direction.right)                           
              direction.current = direction.left;
              gameIsWorked = true;
               break;
        case 38:
            //move up
            if(direction.current != direction.down)                         
              direction.current = direction.up;
              gameIsWorked = true;
              break;
        case 39:
            //move right
            if(direction.current != direction.left)                           
              direction.current = direction.right;
              gameIsWorked = true;
               break;
        case 40:
            //move down
            if(direction.current != direction.up)                         
              direction.current = direction.down;
              gameIsWorked = true;
              break;
    }
});

function getDistance(pointX1, pointY1, pointX2, pointY2) {
    let distanceX = pointX2 - pointX1;
    let distanceY = pointY2 - pointY1;

return Math.sqrt(Math.pow(distanceX,2) + Math.pow(distanceY,2));
}

function count(){
  score_count.textContent = `Score : ${score}`;
}

function snakeMove(e) {
        if (gameIsWorked) {
            document.querySelector('.background-sound').play();
            document.querySelector('.background-sound').volume = 0.1;
          }
}
const food = {
    x : cvs.width/4,
    y : cvs.height/4,
    r : 10,

draw : function(){
        ctx.beginPath();
        ctx.shadowBlur = 10;
        ctx.shadowOffset = 0.5;
        ctx.shadowColor = "#f7ffb5";
        ctx.fillStyle = "#e4ff00";
        ctx.arc(this.x, this.y, this.r, 0 , 2*Math.PI);
        ctx.fill();
        ctx.closePath();
    }  
}
  const snake = {
      radius : 10,
      position : [{ x : cvs.width/2, y : cvs.height/2}],

draw : function() {
          ctx.shadowBlur = 10;
          ctx.shadowOffset = 0.5;
          ctx.shadowColor = "#75ffa9";
          ctx.fillStyle = "lime";
          
          for( let i = 0; i< this.position.length; i++){
              let p = this.position[i];
              ctx.beginPath();
              ctx.arc(p.x, p.y, this.radius, 0, 2*Math.PI);
              ctx.fill();
              ctx.closePath();
          }
      },

update : function() {
          if(frames % 6 == 0){
              if(foodEaten == true){

this.position.push({
                      x : this.position[this.position.length -1].x,
                      y : this.position[this.position.length -1].y                   
                  });
                
                  score++;
                count()
                  foodEaten = false;
              }

if(this.position[0].x < 0 ) 
                this.position[0].x = cvs.width - 10;
              if(this.position[0].x > cvs.width ) 
                this.position[0].x = 10;
              if(this.position[0].y < 0 ) 
                this.position[0].y = cvs.height - 10;
              if(this.position[0].y > cvs.height ) 
                this.position[0].y = 10;
      
              for( let i = this.position.length -1; i > 0;  i--){
                      if(this.position[0].x == this.position[i].x && this.position[0].y == this.position[i].y && this.position.length > 2) {
                         this.position.splice(1);
                        this.position[0].x = cvs.width/2;
                        this.position[0].y = cvs.height/2;
                        score = 0;
                        count();
                        alert("GAME OVER!!!");
                        speed_move = 15;
                        break;
                      }
                      this.position[i].x = this.position[i-1].x;
                      this.position[i].y = this.position[i-1].y;
                  }
              if(direction.current == direction.right) {

this.position[0].x += speed_move;
              }
              if(direction.current == direction.left) {
                  this.position[0].x -= speed_move;
              }
              if(direction.current == direction.up) {
                  this.position[0].y -= speed_move;
              }
              if(direction.current == direction.down) {
                  this.position[0].y += speed_move;
              }
              if(getDistance(food.x,food.y,this.position[0].x, this.position[0].y) <= 2*food.r){
                  food.x = Math.random() * cvs.width-1;
                  food.y = Math.random() * cvs.height-1;
                  foodEaten = true;
                  speed_move += 0.25;
              }
          }

}
  }
  
function main() {
    ctx.clearRect(0, 0, cvs.width, cvs.height);
    snake.update();
    snake.draw();
    food.draw();
    count();
    frames ++;
    requestAnimationFrame(main);
}
requestAnimationFrame(main);
 </script>
</body>
</html>