• Wednesday , 13 December 2017

JavaScript HTML Game Development Tutorial 1 – Javascript Game Tutorial (Canvas)

Code Canyon



Grab your copy of the source code for series here:
http://www.tigrisgames.com/src

Javascript game tutorial part 1 | Canvas game tutorial | For beginners | JavaScript game engine tutorial | JavaScript game programming tutorial | javascript game coding | javascript game making | javascript game dev | javascript making a game | how to javascript a game | javascript tutorial for beginners with examples | create javascript game | javascript html game development tutorial 1 | making javascript games | how to make games with javascript

Welcome to the first JavaScript game development tutorial (HTML5 js canvas) for beginners! In this JavaScript game engine tutorial I will demonstrate one way of initializing canvas in JavaScript from scratch, which is the first step before we actually start drawing sprites and 2D tile worlds and making our own game engine.

[Russian/на русском языке] Как сделать игру на JavaScript? Этот урок программирования объяснит создание игры на JavaScript с нуля. Спрайт, анимация главного героя, РПГ, платформер движёк и графика и всё иное будет в этом туториал е объяснятся.

To start drawing game objects on the screen such as sprites, lines, rectangles and animations we first need to set up the canvas tag. This tutorial starts with a brief example of an HTML5 game made in canvas. And then in my next JavaScript game tutorial for beginners we’ll discover how to draw tiles and sprites.

Then it proceeds to minimum HTML and JavaScript coding required to draw to canvas. And no, we won’t be using enchant js here. Using rect method, the background is erased (cleared) to black color, concluding this canvas tutorial. The next tutorial will cover drawing 2d sprites on the canvas.

In a way, this is the very first step to developing a full fledged game engine in JavaScript. I’ll cover a few other subjects along the way that will prepare you for the future 😛

Support creation of my next tutorial on Patreon 🙂
https://www.patreon.com/tigrisgames

For my gamedev news and updates please visit: https://www.facebook.com/tigrisgames

Original source

3d Ocean

Related Posts

33 Comments

  1. William Bryant
    May 19, 2017 at 03:37

    JQUIERYUJ

  2. 王志
    May 19, 2017 at 03:37

    It's too slow

  3. Maggie ZHOU
    May 19, 2017 at 03:37

    Really gave me some hope lol !! Thanks

  4. Jesus Christ
    May 19, 2017 at 03:37

    Try 800×600 which is my preferred resolution

  5. Robert Rickler
    May 19, 2017 at 03:37

    good job

  6. Astrit Ademi
    May 19, 2017 at 03:37

    I don't know why but I can't get it to fill in black… the version of jQuery u'r using is no longer available though I thought any of the other versions would probably do the trick…

  7. Yang Hu
    May 19, 2017 at 03:37

    Really like your tutorial. just wondering what text editor you are using….

  8. md arif
    May 19, 2017 at 03:37

    great tutorial, please keep it up and update this kind of tutorial

  9. Shadow Zealot
    May 19, 2017 at 03:37

    I am in grade 6 and ik a little JS. I was told my a major in computer science it is easier to get into college if I start a project now so they will accept me. I wonder could you create a short platform we using these methods as that is precisely what I want to do. And I don't know if this is overly ambitious but could I code a node JS server and make it multiplayer somehow. I don't even know if that is realistic but still good to ask. Keep it up this has been the best HTML JS tut yet!

  10. Dave Mcglauflin
    May 19, 2017 at 03:37

    this is great bro that is the best definition of ovject creation using the constructor and why you use it this way. i am at 1623 and i bet we are using json because we want to be able to query the objects and return data.. this is so good guy this is what i needed thanks cant wait to press play.

  11. Jurassic Jordan
    May 19, 2017 at 03:37

    I need help, I can't seem to get this practice project to function, Ive followed right down to the mistakes but I can't seem to see whats wrong!

    html:
    <canvas id ="canvas" width = "640" height = "480"
    style = "border:1px solid grey; width: 640px; height: 480px;">
    </canvas>

    js:
    var Context = {
    canvas : null;
    context : null;
    create: function(canvas_tag_id) {
    this.canvas = document.getElementById(canvas_tag_id);
    this.context = this.canvas.getContext('2d');
    return this.context;
    }

    };
    $(document).ready(function() {
    //initialize
    Context.create("canvas");

    Context.context.beginPath();
    Context.context.rect(0, 0, 640, 480);
    Context.context.fillStyle = 'black';
    Context.context.fill();
    //Context.context.beginPath();
    //draw, red…
    });

  12. CursedCity - Roblox Gaming
    May 19, 2017 at 03:37

    Which code editor did you use?

  13. Cesar Fernandez
    May 19, 2017 at 03:37

    oh nice tutorial.!!! subscribed.

  14. Fahad Zaman
    May 19, 2017 at 03:37

    Can I've the source code of the game you showed in the very first part of this video?

  15. Dev Tigris
    May 19, 2017 at 03:37

    Grab your copy of the source code for series at: http://www.tigrisgames.com/src

  16. Nick A
    May 19, 2017 at 03:37

    anyway you can have a tutorial on vector graphics?

  17. Ethan McAuley
    May 19, 2017 at 03:37

    what editor are you using

  18. Jerard Goling
    May 19, 2017 at 03:37

    Mmm i could follow it untill you made mistakes

    Did I had to copy your mistake stuff etc? idk whats happening

  19. nupur das
    May 19, 2017 at 03:37

    hi dev in which platform you were writing all the code of all the languages.

  20. BranPlaysMcPe
    May 19, 2017 at 03:37

    kkk confirmed

  21. Xander Lewis
    May 19, 2017 at 03:37

    JavaScript Object Notation notation 🙂

  22. Vissaeus
    May 19, 2017 at 03:37

    your domain is out

  23. Nevergrim
    May 19, 2017 at 03:37

    damn you are good..

  24. Moises Castro
    May 19, 2017 at 03:37

    Hi guy! First of all your tutorial is amazing, thanks so much for bring us this!

    I'm a Computer Enginner focused in Java, recently i started to learn Javascript and another web languages, and i noticed that the code that you're using isn't JSON, because JSON is a data interchange format , following this format var json = '{ "a": 1, "b": 2 }'; (a JSON is simply stored inside a string is limited in that it cannot store functions).

    The thing that you're using is just a Javascript object, so i just say this to help you and you can explain that in future videos.

    And again Thanks! 😀

  25. Vissaeus
    May 19, 2017 at 03:37

    JSON objects are inside ' ' or " "

  26. Lone_Combine
    May 19, 2017 at 03:37

    what in the world kind of ide are you using? it looks awesome

  27. Brian Moore
    May 19, 2017 at 03:37

    Man….you guys are awesome….I'm in the process of teaching myself how to code via JS. Have a couple of game ideas I want to create. This is definitely motivation. I appreciate you all.

  28. Xploit
    May 19, 2017 at 03:37

    This will be my first time watching any tutorials about Javascript GameDev.. lol When i first tried JS Game Dev i was just reading on w3Schools , Ended up with this.. https://www.instagram.com/p/BH85KauBoVb/?taken-by=lord.muerte Kinda stuck on the sprite part when changing images as the character walks but still debating if i even want to go anywhere with that project might just use it as something to learn from aha

  29. Kevin Rodriguez
    May 19, 2017 at 03:37

    Could this work:

    var Context = {
    canvas:document.getElementById("canvas"),
    context:this.canvas.getContext("2d");
    }

    or this:

    var Context = {
    canvas:null,
    context:this.canvas.getContext("2d");
    create:function(canvas_tag_id){
    this.canvas = document.getElementById(canvas_tag_id);
    }
    }

  30. efi13efi
    May 19, 2017 at 03:37

    Definitely inspiring!

  31. m0sley
    May 19, 2017 at 03:37

    It's convention to use camelCase rather than snake_case in JS. Not a big deal, but if you're making tutorials then it's probably better to teach people best practices. 🙂

  32. Yozaru TheWolf
    May 19, 2017 at 03:37

    In my console, it says "Uncaught ReferenceError: $ is not defined" and when I remove the dollar symbol, I get "Uncaught TypeError: document.ready is not a function"
    I want to know if this will affect my project, and if so, how can I fix it?

  33. Yozaru TheWolf
    May 19, 2017 at 03:37

    i did everything you say, but the black rectangle wont show on my screen when i reload it. IDK if it's cuz i'm using Notepad++ or my code is wrong.

    Javascript:
    var Context = {
    canvas : null,
    context : null,
    create: function(canvas_tag_id) {
    this.canvas = document.getElementById(canvas_tag_id);
    this.context = this.canvas.getContext("2d");
    return this.context;
    }
    };

    $(document).ready(function() {

    //Initialize
    Context.create("canvas");

    Context.context.beginPath();
    Context.context.fillRect(0, 0, 640, 480);
    Context.context.fillStyle = 'black';
    Context.context.fill();

    });

    HTML:
    <!DOCTYPE html>
    <html>
    <head>
    <title>My Game!</title>
    <link rel = "stylesheet" type = "text/css" href = "MyGame.css" />
    <script src = "MyGame.js></script>"
    </head>
    <body>
    <canvas id = "canvas" width = "640" height = "480"
    style = "border: 1px solid gray; width: 640px; height: 480px;"
    ></canvas>
    </body>
    </html>

    Pls help me figure out what's wrong and why i can't get the black rectangle on the screen, thx.

Leave A Comment

You must be logged in to post a comment.