SNAKE GAME JAVASCRIPT SOURCE CODE

Demo👀

How Do You Make A SNAKE GAME Using JavaScript!

1st Step:-

First you open your HTML Editor like - Notepad++,Subline Text,Brackets, etc.

Then start program use Html, Css, Javascript.

2nd Step:-

Copy the CSS code and then Paste your HTML Editor into <head> here </head> section.

CSS Code :-

  No need to copy CSS code !!

3rd Step:-

Copy the html code and then Paste your HTML Editor into <body> here </body> section.

HTML Code :-

 
<body style="margin: 0; background-color: #222222">
<div class="game" style="margin: 1rem auto 0; width: 600px">
  <h3 id="score" style="font-family: Arial, Helvetica, sans-serif; color: #ffffff">
Press any arrow key to start moving!</h3>
<h3 id="time" style="font-family: Arial, Helvetica, sans-serif; color: #ffffff">
Time: 0.0s</h3>
<canvas id="snakeGame" width="600" height="600"></canvas>
  <p style="float: right; font-family: Arial, Helvetica, sans-serif; color: #ffffff">
Made by TanuSR</p>
</div>

4th Step:-

Copy the JavaScript code and then Paste your HTML editor into the upper </body>.

Javascript Code:-

 
<script>
    const arraysMatch = function (arr1, arr2) {
        if (arr1.length !== arr2.length) return false;

        for (let i = 0; i < arr1.length; i++) {
            if (arr1[i] !== arr2[i]) return false;
        }

        return true;
    };

    class SnakeGame {
        constructor(x, y, cs, canvas) {
            // Direction (first arg is x movement, second is y movement: [-1, 0] means 'left', [0, 1] would mean 'down', I hope you get it)
            this.direction = [0, 0];
            // Default states
            this.launched = false;
            this.hasStarted = false;
            // Frames/s
            this.timer = 1e3 / (cs / 2);
            // Running time (for the HTML timer)
            this.runningTime = 0;

            // if there is no context (how would this happen? idk...)
            if (!canvas.getContext('2d')) throw 'nope';

            // Canvas context
            this.ctx = canvas.getContext('2d');

            // Block Size (px)
            this.cs = cs;
            // Amount of blocks in x coordinates
            this.xC = (x - (x % cs)) / cs;
            // Amount of blocks in y coordinates
            this.yC = (y - (y % cs)) / cs;

            // An apple
            this.apple = [Math.floor(Math.random() * this.xC), Math.floor(Math.random() * this.yC)];

            // The snake (nvm the usage of unknown class lmao)
            this.snake = new (class {
                constructor(x0, y0) {
                    this.pos = [[x0, y0], [x0 + 1, y0], [x0 + 2, y0]];
                }
            })((this.xC - (this.xC % 2)) / 2 - 1, (this.yC - (this.yC % 2)) / 2 - 1);
        }

        // The game start method
        async start() {
            // Sey that the game has been started
            this.launched = true;

            // Initialize keys and background
            this.init()

            // Auto-Restart
            while (1) {
                // While the game still runs
                while (this.launched) {
                    // Wait for the next frame
                    await this.wait(this.timer);
                    // Run the frame handler
                    this.run();
                }
            }
        }

        init() {
            // Background rect
            this.ctx.fillStyle = '#280137';
            this.ctx.fillRect(0, 0, 600, 600);

            // Every time a key is down
            addEventListener('keydown', function (e) {
                // The movements (ordered so I can do some maths c:)
                const moves = ['ArrowUp', 'ArrowLeft', 'ArrowDown', 'ArrowRight'];

                // if the key pressed is a valid move key
                if (moves.includes(e.key)) {
                    // The move index
                    const move = moves.indexOf(e.key);

                    if (move % 2 === 0) {
                        // Movement: up or down
                        if (game.direction[0] !== 0 || !game.hasStarted) {
                            // Change the y direction
                            game.direction[1] = move === 0 ? -1 : 1;
                            game.direction[0] = 0;
                            // Set game to started if it is not
                            if (!game.hasStarted) game.hasStarted = true;
                        }
                    } else if (move % 2 === 1) {
                        // Movement: left or right
                        if (game.direction[1] !== 0 || !game.hasStarted) {
                            // Change the x direction
                            game.direction[0] = move === 1 ? -1 : 1;
                            game.direction[1] = 0;
                            // Set game to started if it is not
                            if (!game.hasStarted) game.hasStarted = true;
                        }
                    }
                }
            });
        }

        // Method that run on each frame
        run() {
            if (this.hasStarted) {
                // Move handler
                const positions = this.snake.pos.splice(0, this.snake.pos.length - 1);
                this.snake.pos = [positions[0].map((p, i) => p += this.direction[i]), ...positions];

                if (arraysMatch(this.snake.pos[0], this.apple)) {
                    // Apple Eaten?
                    this.snake.pos.push(this.apple);
                    this.apple = [Math.floor(Math.random() * this.xC), Math.floor(Math.random() * this.yC)];
                } else if (Array.from(this.snake.pos).splice(1, this.snake.pos.length).map(p => arraysMatch(p, this.snake.pos[0])).includes(true)) {
                    // Self hit?
                    alert(`You lose! Your total score was ${this.snake.pos.length - 3}!`);
                    this.hasStarted = false;
                    this.reset();
                }

                if (this.snake.pos[0].map((p, i) => i === 0 ? p < 0 || p > this.xC - 1 : p < 0 || p > this.yC - 1).includes(true)) {
                    // Wall hit?
                    alert(`You lose! Your total score was ${this.snake.pos.length - 3}!`);
                    this.hasStarted = false;
                    this.reset();
                }

                // Update game running time
                this.runningTime += this.timer;

                // Change HTML texts
                document.getElementById('score').innerHTML = `You have ${this.snake.pos.length - 3} points.`;
                document.getElementById('time').innerHTML = `Time: ${(this.runningTime / 1e3).toFixed(1)}s`;
            }

            // Draw the canvas
            return this.draw();
        }

        draw() {
            // Some constant info
            const { ctx, cs } = this;

            // For each block in the x line
            for (let xC = 0; xC < this.xC; xC++) {
                // For each block in the y line
                for (let yC = 0; yC < this.yC; yC++) {
                    // Location of the block
                    const pos = [xC, yC];
                    // Block draw offset
                    const offset = 3;

                    if (this.snake.pos.map(p => arraysMatch(p, pos)).includes(true)) {
                        // If the current block is a part of the snake
                        if (this.snake.pos.map(p => arraysMatch(p, pos)).indexOf(true) !== 0) ctx.fillStyle = '#41ff41';
                        else ctx.fillStyle = '#ffaa41';
                        ctx.fillRect(xC * cs + offset, yC * cs + offset, cs - 2 * offset, cs - 2 * offset);
                    } else if (arraysMatch(this.apple, pos)) {
                        // If the current block is an apple
                        ctx.fillStyle = '#ff4141';
                        ctx.fillRect(xC * cs + offset, yC * cs + offset, cs - 2 * offset, cs - 2 * offset);
                    } else {
                        // If the current block is nothing special
                        ctx.fillStyle = '#333333';
                        ctx.fillRect(xC * cs + offset, yC * cs + offset, cs - 2 * offset, cs - 2 * offset);
                    }
                }
            }
        }

        // Method to use rather than using intervals, very useful btw
        async wait(t) {
            return new Promise(resolve => setTimeout(() => resolve(), t));
        }

        // Method used to reset the whole game
        reset() {
            this.apple = [Math.floor(Math.random() * this.xC), Math.floor(Math.random() * this.yC)];

            this.snake = new (class {
                constructor(x0, y0) {
                    this.pos = [[x0, y0], [x0 + 1, y0], [x0 + 2, y0]];
                }
            })((this.xC - (this.xC % 2)) / 2 - 1, (this.yC - (this.yC % 2)) / 2 - 1);
          
            // Reset game time
            this.runningTime = 0;
          
            // Set score text
            document.getElementById('score').innerHTML = `You have 0 points.`;
            // Set start text
            document.getElementById('time').innerHTML = `Press any arrow key to start moving!`;
        }
    }

    // Create the game instance
    const game = new SnakeGame(600, 600, 20, document.getElementById('snakeGame'));

    // Start the game
    game.start();
</script>

1Add

SNAKE GAME JAVASCRIPT SOURCE CODE

Demo👀

How Do You Make A SNAKE GAME Using JavaScript!

Post a Comment

0 Comments

Followers

Followers

Popular Posts

DATE OF BIRTH | Age Calculator Using JavaScript | Beginner

Work Time Calculator Using JavaScript | Beginner

BINARY TO TEXT TRANSLATOR USING JAVASCRIPT | BEGINNER

1Add

SNAKE GAME JAVASCRIPT SOURCE CODE

Demo👀

How Do You Make A SNAKE GAME Using JavaScript!

You may like these posts

Post a Comment

0 Comments

Followers

Followers

Social Plugin

Popular Posts

DATE OF BIRTH | Age Calculator Using JavaScript | Beginner

Work Time Calculator Using JavaScript | Beginner

BINARY TO TEXT TRANSLATOR USING JAVASCRIPT | BEGINNER