snake.html

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <![endif]-->
<html>
    <head>
        <!--meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge"-->
        <title>Snake Game</title>
        <!--meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href=""-->
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <h1 id="message">Let's play Snake!</h1>
        <h5 id="refresh"></h5>
        <canvas id="gameCanvas" width="500" height="500">&lt;</canvas>
        <div id="score">0</div>
        <style>
            #gameCanvas {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            #score {
                text-align: center;
                font-size: 70px;
                font-family: Arial, Helvetica, sans-serif;
            }

            h1, h5{
                text-align: center;
            }

        </style>
        <script>
            //get the canvas element
            const gameCanvas=document.getElementById("gameCanvas");
            //get 2d context
            const ctx=gameCanvas.getContext("2d");

            let snake = [
                {x:150, y:150},
                {x:140, y:150},
                {x:130, y:150},
                {x: 120, y: 150},
                {x: 110, y: 150}
            ];

            let foodX;  //food x-coordinate
            let foodY;  //food y-coordinate
            let dx = 0; //the horizontal velocity of the snake
            let dy = -10; //the vertical velocity of the snake
            let score = 0; //the user's score
            let changeDir = false;
            
            //The game
            main();
            //Create the first food location
            createFood();
            //Call changeDirection whenever a key is pressed
            document.addEventListener("keydown", changeDirection);

            /**
             * Main function of the game (not needed yet to be a function)
             */
            function main(){
                if(didGameEnd()) {
                    document.getElementById('message').innerText = "Game Over!";
                    document.getElementById('refresh').innerHTML = "Refresh the page to play again!";
                    return;
                }

                setTimeout(function onTick(){
                    changeDir = false;
                    clearCanvas();
                    drawFood();
                    advanceSnake();
                    drawSnake();

                    main(); //call main again
                }, 100);

            }

            /** 
             * Change the background color to white and draw a black border around it
             */
            function clearCanvas(){
                ctx.fillStyle = "white";    //select color to fill the drawing
                ctx.strokestyle = "black";  //select color for the border
                ctx.fillRect(0,0, gameCanvas.width, gameCanvas.height);     //draw a "filled" rectangle to cover the entire canvas
                ctx.strokeRect(0,0, gameCanvas.width, gameCanvas.height);   //draw a "border" around the entire canvas
            }

            /**
             * Draws a part of the snake on the canvas
             * @param {object} snakePart - The coordinates where the part should be drawn
             */
            function drawSnakePart(snakePart){
                ctx.fillStyle = 'lightgreen';
                ctx.strokestyle = 'darkgreen';
                ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
                ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
            }

            /**
             * Draws the snake on the canvas
             */
            function drawSnake(){
                snake.forEach(drawSnakePart);
            }

            function advanceSnake(){
                const head = {x: snake[0].x + dx, y:snake[0].y + dy}; //make a new element
                snake.unshift(head); //add the new element at the front of the array
                
                const didEatFood = snake[0].x === foodX && snake[0].y === foodY;
                if(didEatFood){
                    score += 10;
                    document.getElementById('score').innerHTML = score;
                    createFood(); //regenerate food location, but also grow the snake
                }else{
                    snake.pop(); //remove the last element, to keep snake at the same size
                }               
                
            }

            function changeDirection(event){
                const LEFT_KEY = 37;
                const RIGHT_KEY = 39;
                const UP_KEY = 38;
                const DOWN_KEY = 40;

                //prevent snake from reversing
                if (changeDir) {
                    return;
                }
                changeDir = true;

                const keyPressed = event.keyCode;

                const goingUp = dy === -10;
                const goingDown = dy === 10;
                const goingLeft = dx === -10;
                const goingRight = dx === 10;

                if(keyPressed === LEFT_KEY && !goingRight){
                    dx = -10;
                    dy = 0;
                }
                if(keyPressed === UP_KEY && !goingDown){
                    dx = 0;
                    dy = -10;
                }
                if(keyPressed === RIGHT_KEY && !goingLeft){
                    dx = 10;
                    dy = 0;
                }
                if(keyPressed === DOWN_KEY && !goingUp){
                    dx = 0;
                    dy = 10;
                }
            }

            function randomTen(min, max){
                return Math.round((Math.random() * (max-min) + min) / 10) * 10;
            }

            function createFood(){
                foodX = randomTen(0, gameCanvas.width - 10);
                foodY = randomTen(0, gameCanvas.height - 10);

                snake.forEach(function isFoodOnSnake(part){
                    const foodIsOnSnake = part.x == foodX && part.y == foodY;
                    if (foodIsOnSnake) {
                        createFood();
                    }
                });
            }

            function drawFood() {
                ctx.fillStyle = 'red';
                ctx.strokestyle = 'darkred';
                ctx.fillRect(foodX, foodY, 10, 10);
                ctx.strokeRect(foodX, foodY, 10, 10);
            }

            function didGameEnd(){
                for(let i = 4; i < snake.length; i++){
                    if(snake[i].x === snake[0].x && snake[i].y === snake[0].y)
                        return true;
                }

                const hitLeftWall = snake[0].x < 0;
                const hitRightWall = snake[0].x > gameCanvas.width - 10;
                const hitTopWall = snake[0].y < 0;
                const hitBottomWall = snake[0].y > gameCanvas.height - 10;

                return hitLeftWall | hitRightWall | hitTopWall | hitBottomWall;
            }
            
        </script>
    </body>
</html>