D4mations.com

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



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

d4mer

, , , , , , , , , , , , , , , , ,

33 responses to “JavaScript HTML Game Development Tutorial 1 – Javascript Game Tutorial (Canvas)”

  6. 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…

  9. 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. 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. 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…
    });

  24. 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! 😀

  27. 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.

  29. 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);
    }
    }

  31. 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. 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. 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 Reply