How to code the Snake game using Notepad in less than 30 minutes! - playproduction.de

How to code the Snake game using Notepad in less than 30 minutes!

Xowl
Views: 36914
Like: 386
Here, I show you how to code the Snake game with vanilla JS and a canvas element using Notepad (or TextEdit if you are in MacOS).

You can play the game here:

and see the source code here:

Questions or comments below!

Thanks for watching

54 Comments

  1. dude dont put like 4 blankets over you mic its super fucking muffled

  2. Would help if i could hear you, 100% volume – still couldnt hear you

  3. I caught a Syntax Error: Unexpected end of input right after the window.onload = function

  4. I went up to about the 7 minute mark and the rectangle isnt showing up in color, neither is the food, in the console it says
    “ReferenceError draw is not snake.html:29 defined
    at new Game (snake.html:29)
    at window.onload (snake.html:44)”

    I dont know what i need to do to fix it because everything in my script looks exactly like yours

  5. >Uncaught ReferenceError: snake is not defined
    at new Game (test.html:43)
    at window.onload (test.html:60)

    There were no errors till now.

    Currently at 13:39 in the video

  6. By any chance does this contain a parent function and two child functions.?????

  7. shit vid, you literally explain nothing, you just talk to yourself, never respond to the comments, and even your own code in github, when its opened in google its just text.

  8. use this its so much better and works

    <!DOCTYPE html>

    <html>

    <head>

    <title></title>

    <style>

    html, body {

    height: 100%;

    margin: 0;

    }

    body {

    background: black;

    display: flex;

    align-items: center;

    justify-content: center;

    }

    canvas {

    border: 1px solid white;

    }

    </style>

    </head>

    <body>

    <canvas width="400" height="400" id="game"></canvas>

    <script>

    var canvas = document.getElementById('game');

    var context = canvas.getContext('2d');

    var grid = 16;

    var count = 0;

    var snake = {

    x: 160,

    y: 160,

    // snake velocity. moves one grid length every frame in either the x or y direction

    dx: grid,

    dy: 0,

    // keep track of all grids the snake body occupies

    cells: [],

    // length of the snake. grows when eating an apple

    maxCells: 4

    };

    var apple = {

    x: 320,

    y: 320

    };

    // get random whole numbers in a specific range

    // @see https://stackoverflow.com/a/1527820/2124254

    function getRandomInt(min, max) {

    return Math.floor(Math.random() * (max – min)) + min;

    }

    // game loop

    function loop() {

    requestAnimationFrame(loop);

    // slow game loop to 15 fps instead of 60 (60/15 = 4)

    if (++count < 4) {

    return;

    }

    count = 0;

    context.clearRect(0,0,canvas.width,canvas.height);

    // move snake by it's velocity

    snake.x += snake.dx;

    snake.y += snake.dy;

    // wrap snake position horizontally on edge of screen

    if (snake.x < 0) {

    snake.x = canvas.width – grid;

    }

    else if (snake.x >= canvas.width) {

    snake.x = 0;

    }

    // wrap snake position vertically on edge of screen

    if (snake.y < 0) {

    snake.y = canvas.height – grid;

    }

    else if (snake.y >= canvas.height) {

    snake.y = 0;

    }

    // keep track of where snake has been. front of the array is always the head

    snake.cells.unshift({x: snake.x, y: snake.y});

    // remove cells as we move away from them

    if (snake.cells.length > snake.maxCells) {

    snake.cells.pop();

    }

    // draw apple

    context.fillStyle = 'red';

    context.fillRect(apple.x, apple.y, grid-1, grid-1);

    // draw snake one cell at a time

    context.fillStyle = 'green';

    snake.cells.forEach(function(cell, index) {

    // drawing 1 px smaller than the grid creates a grid effect in the snake body so you can see how long it is

    context.fillRect(cell.x, cell.y, grid-1, grid-1);

    // snake ate apple

    if (cell.x === apple.x && cell.y === apple.y) {

    snake.maxCells++;

    // canvas is 400×400 which is 25×25 grids

    apple.x = getRandomInt(0, 25) * grid;

    apple.y = getRandomInt(0, 25) * grid;

    }

    // check collision with all cells after this one (modified bubble sort)

    for (var i = index + 1; i < snake.cells.length; i++) {

    // snake occupies same space as a body part. reset game

    if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) {

    snake.x = 160;

    snake.y = 160;

    snake.cells = [];

    snake.maxCells = 4;

    snake.dx = grid;

    snake.dy = 0;

    apple.x = getRandomInt(0, 25) * grid;

    apple.y = getRandomInt(0, 25) * grid;

    }

    }

    });

    }

    // listen to keyboard events to move the snake

    document.addEventListener('keydown', function(e) {

    // prevent snake from backtracking on itself by checking that it's

    // not already moving on the same axis (pressing left while moving

    // left won't do anything, and pressing right while moving left

    // shouldn't let you collide with your own body)

    // left arrow key

    if (e.which === 37 && snake.dx === 0) {

    snake.dx = -grid;

    snake.dy = 0;

    }

    // up arrow key

    else if (e.which === 38 && snake.dy === 0) {

    snake.dy = -grid;

    snake.dx = 0;

    }

    // right arrow key

    else if (e.which === 39 && snake.dx === 0) {

    snake.dx = grid;

    snake.dy = 0;

    }

    // down arrow key

    else if (e.which === 40 && snake.dy === 0) {

    snake.dy = grid;

    snake.dx = 0;

    }

    });

    // start the game

    requestAnimationFrame(loop);

    </script>

    </body>

    </html>

  9. Works I copy code and paste I have snake game

  10. For me it doesnt wanna show the rectangle box I did everything the same here is what I did
    <body>

    <canvas id=canvas height=400 width=600>

    </canvas>

    <script>

    /*

    – Draw Rect (Background)

    – Draw Food

    – Draw Snake

    – Event loop (timer)

    – Move snake

    – Add actions

    – Collisions

    */

    function Food(){

    this.x = 3;

    this.y = 4;

    this.draw = function(game){

    game.Rect(this.x, this.y 1, 1, 'blue');

    };

    }

    function Game(){

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

    this.scal = 20;

    this.nx = Math.floor(canvas.width/this.scale);

    this.ny = Math.floor(canvas.height/this.scale);

    this.food = new Food();

    this.Rect = function(x, y ,w, h, fs){

    thisctx.fillStyle = fs;

    this.ctx.fillRect(x*this.scale, y*this.scale, w*this.scale – 1, h*this.scale – 1);

    };

    this.draw = function(){

    this.Rect(0,0, this.nx, this.ny, '#AAAAA');

    this.food.draw(this);

    };

    this.draw();

    }

    window.onload = function(){

    new Game();

    }

    </script>

    </body>

  11. I got a error, does anyone know how to fix it?

    snake.html:23 Uncaught TypeError: Cannot read property 'fillStyle' of undefined
    at Game.Rect (snake.html:23)
    at Game.draw (snake.html:28)
    at new Game (snake.html:30)
    at window.onload (snake.html:35)
    Game.Rect @ snake.html:23
    Game.draw @ snake.html:28
    Game @ snake.html:30
    window.onload @ snake.html:35
    load (async)
    (anonymous) @ snake.html:34

  12. Where is the code that i should copy?? In the source code??

  13. ok 6 min in the vid but i gave up here's a starter

    <body>

    <canvas id=canvas height=400 width=600>

    </canvas>

    <script>

    /*

    – Draw Rect (Background

    – Draw Food

    – Draw Snake

    – Event Loop (timer)

    – Move snake

    – Add actions

    – Collisions

    /*

    function Game(){

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

    this.scale = 20;

    this.nx = Math.floor(canvas.width/this.scale);

    this.ny = Math.floor(canvas.height/this.scale);

    this.Rect = function(x, y, h, fs){

    this.ctx.fillStyle = fs;

    this.ctx.fillRect(x*this.scale, y*this.scale -1, h*this.scale -1);

    };

    }

    window.onload = function(){

    new Game();

    }

    </script

    </body>

  14. i'm at 8.06 and for some reason it only opens a white screen

  15. It says "this.food.draw" is not a function

  16. <canvas id="canvas" height="400" width="600" style="caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0); font-family: -webkit-standard; font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-tap-highlight-color: rgba(26, 26, 26, 0.3); -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none;"></canvas>

  17. How do you change speed? the snake is very fast.

  18. When you do this
    < + > or > + <
    the game will be resetted :/

  19. file:///C:/Users/hulya/OneDrive/Masa%C3%BCst%C3%BC/sneake.html here is mine..

  20. script :
    <canvas id=canvas height=400 width=600>

    </canvas>

    <script>

    function Game(){

    this.snake = new Snake();

    this.food = new Food();

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

    this.scale = 20;

    this.nx = Math.floor(canvas.width/this.scale);

    this.ny = Math.floor(canvas.height/this.scale);

    this.step = function(){

    this.snake.step(this);

    this.food.step(this);

    this.draw();

    this.wait();

    };

    this.draw = function(){

    this.Rect(0, 0, this.nx, this.ny, '#AAAAAA');

    this.snake.draw(this);

    this.food.draw(this);

    };

    this.keydown = function(evt){

    this.snake.keydown(evt.key);

    }

    this.Rect = function(x,y,w,h,fs){

    this.ctx.fillStyle = fs;

    this.ctx.fillRect(x*this.scale, y*this.scale, w*this.scale-1, h*this.scale-1)

    };

    this.wait = function(){

    setTimeout(this.step.bind(this), 1000/25);

    };

    document.addEventListener('keydown', this.keydown.bind(this));

    this.wait();

    }

    function Snake(){

    this.l = 2;

    this.trace = [];

    this.x = 10;

    this.y = 10;

    this.vx = 1;

    this.vy = 0;

    this.step = function(game){

    this.x = this.x + this.vx;

    this.y = this.y + this.vy;

    if(this.x >= game.nx) this.x = 0;

    if(this.y >= game.ny) this.y = 0;

    if(this.x < 0 ) this.x = game.nx – 1;

    if(this.y < 0 ) this.y = game.ny – 1;

    for(var i=0; i<this.trace.length; i++){

    var pos = this.trace[i];

    if( pos.x == game.food.x && pos.y == game.food.y ){

    this.l = this.l + 1;

    game.food.reset(game);

    }

    if(pos.x == this.x && pos.y == this.y) this.l = 2;

    }

    this.trace.push({x: this.x, y: this.y});

    while(this.trace.length > this.l) this.trace.shift();

    };

    this.draw = function(game){

    for(var i=0; i<this.trace.length; i++){

    var pos = this.trace[i];

    game.Rect(pos.x, pos.y, 1, 1, 'white');

    }

    };

    this.keydown = function(key){

    if(key == 'ArrowDown'){

    this.vx = 0;

    this.vy = 1;

    } else if(key == 'ArrowUp'){

    this.vx = 0;

    this.vy =-1;

    } else if(key == 'ArrowLeft'){

    this.vx =-1;

    this.vy = 0;

    } else if(key == 'ArrowRight'){

    this.vx = 1;

    this.vy = 0;

    }

    };

    }

    function Food(){

    this.x = 3;

    this.y = 4;

    this.step = function(game){};

    this.draw = function(game){

    game.Rect(this.x, this.y, 1, 1, 'blue');

    };

    this.reset = function(game){

    this.x = Math.floor(Math.random()*game.nx);

    this.y = Math.floor(Math.random()*game.ny);

    };

    }

    window.onload = function(){

    new Game();

    };

    </script>

  21. just remove #AAAAAA line from it may not come gray but the blue box comes

  22. What to do if there is an error ay </script> im doing the key functions

Leave a Reply

Your email address will not be published.