Snake

instructions

Use Arrow Keys To Move

var blockSize = 25;
var rows = 26;
var cols = 26;
var board;
var context; 

var color

function changeColor() {
    color = document.getElementById("color").value;
    //document.body.style.backgroundColor = color;
  }
   

var snakeX = blockSize * 5;
var snakeY = blockSize * 5;


var velocityX = 0;
var velocityY = 0;

var snakeBody = [];

//food
var foodX;
var foodY;
var score = 0;

var gameOver = false;

window.onload = function() {
    board = document.getElementById("board");
    board.height = rows * blockSize;
    board.width = cols * blockSize;
    context = board.getContext("2d"); //used for drawing on the board
    placeFood();
    document.addEventListener("keyup", changeDirection);
    // update();
    setInterval(update, 1000/10); //100 milliseconds
}

function update() {
    if (gameOver) {
        return;
    }

    context.fillStyle="black";
    context.fillRect(0, 0, board.width, board.height);

    context.fillStyle="blue";
    context.fillRect(foodX, foodY, blockSize, blockSize);

    if (snakeX == foodX && snakeY == foodY) {
        snakeBody.push([foodX, foodY]);
        placeFood();
    }

    for (let i = snakeBody.length-1; i > 0; i--) {
        snakeBody[i] = snakeBody[i-1];
    }
    if (snakeBody.length) {
        snakeBody[0] = [snakeX, snakeY];
    }

    context.fillStyle=color;
    snakeX += velocityX * blockSize;
    snakeY += velocityY * blockSize;
    context.fillRect(snakeX, snakeY, blockSize, blockSize);
    for (let i = 0; i < snakeBody.length; i++) {
        context.fillRect(snakeBody[i][0], snakeBody[i][1], blockSize, blockSize);
    }

    //game over conditions
    if (snakeX  cols*blockSize || snakeY  rows*blockSize) {
        gameOver = true;
        //alert("Game Over");
        //location.reload();
        OverAudio();
        Restrat();
        
        
    }

    for (let i = 0; i  (0-19.9999) -> (0-19) * 25
    foodX = Math.floor(Math.random() * cols) * blockSize;
    foodY = Math.floor(Math.random() * rows) * blockSize;
    score++;
    console.log(score); // 4
    document.getElementById("score").innerHTML = score;
    playAudio();


    
}

    
function playAudio(url) {
    // Create a new Audio object
    let audio = new Audio('Food.mp3');
  
    // Play the audio
    audio.play();
  }
  
function OverAudio(url) {
    // Create a new Audio object
    let audio = new Audio('GameOver.wav');
  
    // Play the audio
    audio.play();
  }


function Restrat(params) {
 snakeX = blockSize * 5;
 snakeY = blockSize * 5;


 velocityX = 0;
 velocityY = 0;

 snakeBody = [];

//food
 foodX;
 foodY;
 score = 0;

 gameOver = false;
 document.getElementById("score").innerHTML = score;
}