• Monday , 20 November 2017

Snake Game – HTML5 Game Programming Tutorial [javascript]

Code Canyon



In this video are we creating a simple game using javascript and html. The tutorial are adapted for both beginners and more intermediate coders who wish to learn how to structure game code, use basic data structors useful for game programming (like graphs, queues and so on), and other type of game programming technics.

:: Annotated Source ::
https://github.com/maxwihlborg/youtube-tutorials/blob/master/snake/index.html

:: KeyNote ::
https://docs.google.com/presentation/d/1GG93LkqZwGY-ag9eedReosYqbA00isVVqvTZic98_QY/edit?usp=sharing

:: Other Stuff ::
https://github.com/maxwihlborg
http://maxwihlborg.com/


Original source

3d Ocean

Related Posts

38 Comments

  1. OrenDesign
    November 12, 2017 at 00:11

    its so hard 🙁

  2. Akram Rahi Oficiall
    November 12, 2017 at 00:11

    Really great

  3. Ashutosh Sharma
    November 12, 2017 at 00:11

    what is _grid ?

  4. Jodegamer486
    November 12, 2017 at 00:11

    how to fix the problem of the UP is unidentified in inspect mode please help and the main(); is a error and the init(); is an error too please help!!!!!!!

    <!docktype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Simple Snake Game</title>
    </head>
    <body>
    <script>
    //constant
    var COLS=26, ROWS=26;
    //IDs
    var EMPTY=0, SNAKE=1, FRUIT=2;

    var grid = {

    width: null,
    height: null,
    _grid: null,

    init: function(d, c, r) {
    this.width = c;
    this.height = r;

    this._grid = [];
    for (var x=0; x < c; x++) {
    this._grid.push([]);
    for (var y = 0; y < r; y++) {
    this._grid[x].push(d);
    }
    }
    },

    set: function (val, x, y) {
    this._grid[x][y] = val;
    },

    get: function (x, y) {
    return this._grid[x][y];
    }
    }

    var snake = {

    direction: null,
    last: null,
    _queue: null,

    init: function(d, x, y) {
    this.direction = d;

    this._queue = [];
    this.insert(x, y);
    },

    insert: function(x, y) {
    this._queue.unshift({x:x, y:y})
    this.last = this._queue[0];
    },

    remove: function() {
    return this._queue.pop();
    }
    }

    function setFood() {
    var empty = [];
    for (var x=0; x < grid.width; x++) {
    for (var y=0; y < grid.height; y++) {
    if (grid.get(x, y) === EMPTY) {
    empty.push({x:x, y:y});
    }
    }
    }
    var randpos = empty[Math.floor(Math.random()*empty.length)];
    grid.set(FRUIT, randpos.x, randpos.y);
    }

    // Game Objects
    var canvas, ctx, keystate, frames;

    function main() {
    canvas = document.createElement("canvas");
    canvas.width = COLS+20;
    canvas.height = ROWS+20;
    ctx = canvas.getContext("2d");
    document.body.appendChild(canvas);

    frames = 0;
    keystate = {};

    init();
    loop();
    }

    function init() {
    grid.init(EMPTY, COLS, ROWS);

    var sp = {x:Math.floor(COLS/2), y:ROWS-1};
    snake.init(UP, sp.x, sp.y);
    grid.set(SNAKE, sp.x, sp.y);

    setFood();
    }

    function loop() {
    update();
    draw();

    window.requestAnimationFrame(loop, canvas);
    }

    function update() {
    frames++;
    }

    function draw() {
    var tw = canvas.width/grid.width;
    var th = canvas.height/grid.height;

    for (var x=0; x < grid.width; x++) {
    for (var y=0; x < grid.height; y++) {
    switch (grid.get(x, y)) {
    case EMPTY:
    ctx.fillStyle = "#fff" ;
    break;
    case SNAKE:
    ctx.fillStyle = "#0ff" ;
    break;
    case FRUIT:
    ctx.fillStyle = "#f00" ;
    break;
    }
    ctx.fillRect(x*tw, y*th, tw, th);
    }
    }
    }

    main();
    </script>
    </body>
    </html>

  5. Keep moving forward
    November 12, 2017 at 00:11

    thank you

  6. Chicken Animations
    November 12, 2017 at 00:11

    all that showed was white

  7. Chicken Animations
    November 12, 2017 at 00:11

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Snake</title>
    </head>
    <body>
    <script>
    //Constants
    var COL=26, ROWS=26;
    // IDs
    var EMPTY=0, SNAKE=1, FRUIT=2;
    // Direction
    var LEFT=0, UP=1, RIGHT=2, DONW=3;

    var grid = {

    width: null,
    heigth: null,
    _grid: null,

    init: function(d, c, r) {
    this.width = c;
    this.width = r;

    this._grid = [];
    for (var x=0; x < c; x++) {
    this._grid.push([]);
    for (var y=0; y < r; y++) {
    this._grid[x].push(d);
    }
    }
    },

    set: function(val, x, y) {
    this._grid[x][y] = val;
    },

    get: function(x,y) {
    return this._grid[x][y];
    }
    }

    var snake = {

    direction: null,
    last: null,
    _queue: null,

    init: function(d, x, y) {
    this.direction = d;

    this._queue = [];
    this.insert(x,y);
    },

    insert: function(x,y) {
    this._queue.unshift({x:x, y:y});
    this.last = this._queue[0];
    },

    remove: function() {
    return this._queue.pop();
    }
    }

    function setFood() {
    var empty = [];
    for (var x=0; x < grid.width; x++) {
    for (var y=0; y < grid.height; y++) {
    if (grid.get(x, y) === EMPTY) {
    empty.push({x:x, y:y});
    }
    }
    }
    var randpos = empty[Math.floor(Math.random()*empty.length)];
    grid.set(FRUIT, randpos.x, randpos.y);
    }

    // Game odjects
    var canvas, ctx, keystate, frames;

    function main () {
    canvas = document.createElement("canvas");
    canvas.width = COLS*20;
    canvas.height = ROWS*20;
    ctx = canvas.getContext("2d");
    document.body.appendChild(canvas);

    frames = 0;
    keystate = {};

    init();
    loop();
    }

    function init() {
    grid.init(EMPTY, COLS, ROWS);

    var sp = {x:Math.floor(COLS/2), y:ROWS-1};
    snake.init(UP, sp.x, sp.y);
    grid.set(SNAKE, sp.x, sp.y);

    setFood();
    }

    function loop() {
    update();
    draw();

    window.requestAnimationFrame(loop, canvas);
    }

    function update() {
    frames++;
    }

    function draw() {
    var tw = canvas.width/grid.width;
    var th = canvas.height/grid.height;

    for (var x=0; x < grid.width; x++) {
    for (var y=0; y < grid.height; y++) {
    switch (grid.get(x, y)) {
    case EMPTY:
    ctx.fillStyle = "#fff";
    break;
    case SNAKE:
    ctx.fillStyle = "#0ff"
    break;
    case FRUIT:
    ctx.fillStyle = "#f00";
    break;
    }
    ctx.fillRect(x*tw, y*th, tw, th);
    }
    }
    }
    }

    main();
    </script>
    </body>
    </html>

  8. Matt
    November 12, 2017 at 00:11

    if ranked from beginner, intermediate, advanced, expert … what category of developer would you expect to be able to write this kind of program?

  9. Andris Pliņģis
    November 12, 2017 at 00:11

    Thank You!

  10. Aman Tiwari
    November 12, 2017 at 00:11

    Which IDE did you use?? please reply

  11. gary mize
    November 12, 2017 at 00:11

    .push({x:x, y:y});
    why not use .push(x,y);
    .js Arrays confuse me when both Object & Array methods can be used

  12. gary mize
    November 12, 2017 at 00:11

    Agree Max whipped thru this Video fast .. but .. the code documentation is excellent. Also the program is very well organized into blocks of Objects ( Grid, Snake) and Functions (Food, Main, Init, …). It helped me to prepare a simple Block Diagram explaining what each block does. This also helps in understanding the program flow.

    All the action occurs in the last two Functions Update & Draw ( with calls to Grid & Snake Methods) .. pretty cool.

    I have some other game ideas that are grid based & plan on using Max's code as a starting template.

    Max thanks for the effort.

  13. Ricky Jenkins
    November 12, 2017 at 00:11

    is there a way to make the snake slower?

  14. Nik Frid
    November 12, 2017 at 00:11

    thank you! professional!

  15. Game Tester
    November 12, 2017 at 00:11

    please give me this Snake Game code really..hahahahaha…

  16. Krzysztof Juszczak
    November 12, 2017 at 00:11

    with editor are you use

  17. Nik Frid
    November 12, 2017 at 00:11

    amazing ! explain? for who? video only for professionals!

  18. Geek of Games
    November 12, 2017 at 00:11

    you can even speek like people

  19. Yoolan
    November 12, 2017 at 00:11

    Thank u very much. This is exactly what I was looking for.

  20. Сергей Соболев
    November 12, 2017 at 00:11

    hey, if you want to make it slowlier just past this at the end of function draw() – setTimeout(draw, 100); 100 is milliseclnds, so you can change it)

  21. Mohamed Abu Al Ula
    November 12, 2017 at 00:11

    Well done. LIke!

  22. GreenZapperZ
    November 12, 2017 at 00:11

    Someone help me, please. Link: https://www.dropbox.com/s/mwiyclg5mg26axv/Help.txt?dl=0

  23. kiên nguyen
    November 12, 2017 at 00:11

    Thank so much, bro. I've learned alot from your teaching.
    p/s: for those claim his video is not a toturial, you're not wrong but please check his source code at https://github.com/maxwihlborg/youtube-tutorials/blob/master/snake/index.html
    He explains quite clearly in it.

  24. Atabeg Ruslan
    November 12, 2017 at 00:11

    awesome

  25. sheepdogbenable
    November 12, 2017 at 00:11

    Have got stuck at the first point u display the .html file. Error reads: cannot read property "appendChild" of null. Have done everything exactly up to 15:28 as far as I know

  26. TheManne Manne
    November 12, 2017 at 00:11

    set speed=0.5 and you start to understand stuff…

  27. Lhorrd Lester P. Quiroz
    November 12, 2017 at 00:11

    Sir can I get the codes of this for my project please reply asap

  28. sean123654
    November 12, 2017 at 00:11

    Yea he's fast, but he provides the code and you can play around with it. I think this is good compared to what ive found lol

  29. Martin Andersen
    November 12, 2017 at 00:11

    it doesn't work, I just get white screen

  30. partanen17
    November 12, 2017 at 00:11

    Dude you should go and flag this video: https://www.youtube.com/watch?v=4tkixl4Bt3I it's your video on someone elses channel and it's getting more popular and eating some views from you.

  31. Joel Persson
    November 12, 2017 at 00:11

    "Unexpected token <"

    ??? help please

  32. ItzMEEEE
    November 12, 2017 at 00:11

    hey. how could I add a start menu/screen?

  33. ItzMEEEE
    November 12, 2017 at 00:11

    what color scheme are you using? and when I save and open it in Google Chrome the screen is just a blank white screen! please help me

  34. jackson campbell
    November 12, 2017 at 00:11

    what program are you using?

  35. Vu Smb
    November 12, 2017 at 00:11

    it wouldent work
    i am wondering if it is because i am on a chrome book

  36. Benjamin Aguilar
    November 12, 2017 at 00:11

    I need some help. I can't find any spelling errors or ANY problems, but the code so far just makes an empty canvas! I use chrome

    https://gist.github.com/NDR149/45c705e37174cda93696eb965577ca4f#file-brokensnake-html

  37. M PB
    November 12, 2017 at 00:11

    I can't understand this dude what is that some European accent?

  38. Vita Will
    November 12, 2017 at 00:11

    This is absolutely not helpful for beginners!

Leave A Comment

You must be logged in to post a comment.