Change background image
  1. What's up? I see you're viewing as a Guest. How about registering, it only takes like 2 minutes. This will enable you to do more on our forum and stay updated.

How to Create a javascript game

Discussion in 'PC General' started by iiPwner, Jul 11, 2011.

Thread Status:
This thread is more than 180 days old.
  1. iiPwner

    iiPwner Junior Member Member

    How to create games using JavaScript

    JavaScript Tutorial


    Introduction

    Is it possible to create games using JavaScript? You bet it is - you can design any kind of game your imagination permits, but if you create shoot-them-ups you should keep in mind that they will be a little slower compared to compiled languages such as C++ or C#.

    If you like to learn by example, here are three games you can tinker with:

    Aussie pokies (slots). Have a look at the code of this game for random number generation, maths and simple image swapping.

    JavaScript Chess. Yes, here is the entire chess engine written in JavaScript. Pit your wits against the computer...
    ... and unlike Deep Fritz, this one you can actually beat and feel good about it!

    Button Mania. The goal is simple - but getting there requires lots of thinking. Great logical game!

    If you prefer games where things are moving, exploding and being shot at, it is easy to make them in JavaScript provided that you know how to handle various events as they appear, and the physics affecting the objects in the game.

    How to move an object on screen

    In all shoot-them-up games you control an object - a car, a spaceship, or something else. In this example, we are using the flying saucer.



    Your first task is to make it respond to keyboard events: depending on the key being pressed, the saucer turns left, right, up or down, or fires a torpedo.

    You can use any text editor (even Notepad) to write the JavaScript code, but you are likely to make lots of mistakes unnecessarily and waste many hours of your time. To make your scripting a breeze, use Antechinus® JavaScript Editor , which includes scores of tools to make your life easier:

    Identify JavaScript elements at a glance with color-coded syntax

    Eliminate typing errors and code up to 30 times faster with Intellisense and auto-complete

    Eliminate syntax errors: the program finds them, highlights them and explains them for the speedy correction

    Eliminate the need to memorize hundreds of functions and their parameters with context sensitive help

    Use 2 keystrokes instead of 2,000 with unique type-in code templates

    Have you code error free in no time with advanced single-click debugging with breakpoints and line-by-line program execution:

    Run the selected piece of JavaScript with one click straight from the editor for the lightning-fast testing

    Locate functions in your documents instantly with Function Finder

    ... and a lot more. See the complete list

    How do you capture the the keyboard events to direct the flying saucer where to move? I'll show you in a second. Learning by example is fast and easy to understand, so follow these steps:

    Download the zipped-up source files and unzip them into a new folder

    Fire up your JavaScript Editor and open the game_control.htm file to examine it.

    To run the code, click Show Internal Viewer (F5). Alternatively, click here to run the file online in your browser.

    Let's look at the source code:

    <body onKeyPress="ProcessKeypress(event);">

    Every keypress is sent to the ProcessKeypress() function for further processing:

    function ProcessKeypress(e)
    {
    var myObj = "saucer";
    var moveBy = 10;

    if (e.keyCode) keycode=e.keyCode;
    else keycode=e.which;
    ch=String.fromCharCode(keycode);

    if(ch=='a') moveObj(myObj, -moveBy, 0);
    else if(ch=='s') moveObj(myObj, moveBy, 0);
    else if(ch=='w') moveObj(myObj, 0, -moveBy);
    else if(ch=='z') moveObj(myObj, 0, moveBy);
    }

    This function moves the flying saucer left when 'a' is pressed, right when 's' is pressed, up when 'w' is pressed or down when 'z' is pressed, simply by shifting it by 10 pixels in the required direction.

    If you keep the 'a' key pressed, the saucer continues to move to the left of the screen. Note that the movement is not very smooth, but rather jerky.

    To move the object in a more natural manner, we need to add acceleration into the equation.

    Recommended...

    Pregnancy calculator (with a JavaScript engine)
    Buy WoW Gold
    Velocity and acceleration

    Use JavaScript Editor to open the acceleration.htm file.

    To run the code, click Show Internal Viewer (F5). Alternatively, click here to run the file online in your browser.

    Note that the ProcessKeypress() function now invokes the fireTorpedo() function when the space key is pressed:

    function ProcessKeypress(e)
    {
    var myObj = "saucer";
    var moveBy = 10;

    if (e.keyCode) keycode=e.keyCode;
    else keycode=e.which;
    ch=String.fromCharCode(keycode);

    if(ch=='a') moveObj(myObj, -moveBy, 0);
    else if(ch=='s') moveObj(myObj, moveBy, 0);
    else if(ch=='w') moveObj(myObj, 0, -moveBy);
    else if(ch=='z') moveObj(myObj, 0, moveBy);
    else if(ch==' ') fireTorpedo(myObj);
    }

    Before we look into the fireTorpedo() function, here is a little explanation:

    Velocity is swiftness; speed, the rapidity of motion. Mathematically, it is defined as the rate of change of the position of a body in a specified direction.

    In pseudo-code we can express it like this when we move the object to the right:

    While the 's' key is pressed
    torpedo.x = torpedo.x + 5

    Or, if we want to move the object down:

    While the 'z' key is pressed
    torpedo.y = torpedo.y + 5

    Acceleration is the increase of speed or velocity.

    In pseudo-code we can express it like this when we move the object to the right:

    While the 's' key is pressed
    velocity = velocity + acceleration
    torpedo.x = torpedo.x + velocity

    Now study the fireTorpedo() and moveTorpedo() functions. Note that window.setTimeout() is used to invoke moveTorpedo() recursively and provide the continuous movement.

    function fireTorpedo(name)
    {
    // Get the position of the saucer
    var obj = document.getElementById(name);
    var px = parseInt(obj.style.left);
    var py = parseInt(obj.style.top);

    // Fire topredo to the right of the saucer
    var t = document.getElementById("torpedo");
    t.style.left = px+95;
    t.style.top = py+38;

    step = 0;
    accel = 0.05;
    vX=1;

    window.setTimeout("moveTorpedo();", 0);
    }

    function moveTorpedo()
    {
    step++; if(step>=steps) return; // The effect has finished

    // Move torpedo to the right by the given velocity and acceleration
    var t = document.getElementById("torpedo");
    var px = parseInt(t.style.left);
    vX+=parseInt(accel); // Increase velocity by the amount of acceleration
    t.style.left = px + vX;
    accel+=0.05;

    window.setTimeout("moveTorpedo();", 0);
    }

    As an exercise, modify the code controlling the saucer to include the acceleration.

    Gravity and friction

    The game_control.htm and acceleration.htm examples demonstrate how easy it is to get started creating your own games in JavaScript.

    To make your games even more realistic, consider adding gravity and friction.

    Gravity is what makes bodies thrown into the air slow down, stop, and then fall. To put it simply, gravity is the force of attraction. Two bodies with equal mass attract each other equally; the body with a bigger mass attracts the body with a smaller mass.

    In pseudo-code:

    While the body is falling
    velocity = velocity + gravity
    body.y = body.y + velocity

    Friction is the surface resistance to motion. For example, in a car-racing game, the friction will be stronger or weaker depending on the surface you are driving on.

    In pseudo-code:

    While the body is moving
    velocity = velocity - friction
    body.x = body.x + velocity
  2. 3nvisi0n

    3nvisi0n The R3v0lu710n Super-Mod

    Original Source: http://www.c-point.com/javascript_tutorial/games_tutorial/how_to_create_games_using_javascript.htm
    If your going to copy and paste a tutorial atleast put the links in...

    ALso Please bring this tutorial to meet the rules for copied tutorials:
    Read: http://newhax.com/forums/showthread.php?1324-Copying-Tutorials
  3. Jok3r

    Jok3r MC-Admin/Summoner Member

    That is Plagiarism... [xat]no[/xat]
    Ive done this and got in big trouble in school, not cool pwner...
    Anyways we need some people posting how to make games in C, C#, C++ cause we can then make iPhone apps!!! and release them!!!
    Wick3d and Brandon u seeing this???
  4. 3nvisi0n

    3nvisi0n The R3v0lu710n Super-Mod

    Hmm, iPhone is generally OBjective-C(in which you can use C/C++ but not C# and not to do everything)

    Anyway developing games on the iPhone is different from just in C or something and really its not about which language you use as in C or C++ but the API you use(DirectX, OpenGL, OpenGl ES[iPhone])

    The iPhone is a little more difficult than others because you have a reducded API so it is lighter on 'Embeded Systems(thus ES)' And if you want to develop for the iPhone you need to be a Apple Developer($90/year) but there are many VERY GOOD tutorials to be found on google for OpenGL ES check them out. 3d programming is something that is difficult to make tutorials for because its so varied.
  5. iiPwner

    iiPwner Junior Member Member

    jok3r i will look into learning that and i didnt plagiarize thus i was looking for tuts that i made over the years and found this its been posted on many sites so its not my fault
  6. 3nvisi0n

    3nvisi0n The R3v0lu710n Super-Mod

    Please iiPwner don't try and cover yourself it just make you look bad. I've given you a chance to atleast correct it; instead you just make an excuse.

    It pains me to need to do this but I will demonstrate how I see this as being a simple copy and paste rather than something you wrote. I gave you a chance iiPwner by just pointing to one circumstancial evidence in hopes you'd do the right thing.

    1. Firstly your defense that this has been reported to many locations but you are the original writter. A cursory look on Google reveals 3 locations with this tutorial
    Firstly C-Point the original source. http://www.c-point.com/javascript_tutorial/games_tutorial/how_to_create_games_using_javascript.htm
    So either C-Point copied your tutorial and used it as their own to advertise their product. If this is the case its sad that they couldn't write their own tutorial considering their product...and that as a professional company they would stoop to such a level. So I consider it unlikely that they copied you from an unknown source.(only 1 other place besides newhax has the tutorial)
    Second place it is found is http://www.gameinnovator.com/how_to_create_games_using_javascript.php it is not in it's complete form on GI rather as stated at the bottom of the GameInovators page it has been adapted from C-Point's tutorial so game inovator copied from C-Point with permission.
    Third place it is found is here on NewHax

    SO this tutorial is not massivly popular and found all over the place rather there are just a few locations with it; although maybe several linking to C-Point. Your defense of it being reported does not stand...

    Second: Failure to include links, there are obvious points in this that dictate that in the original there were links:
    I pointed to this in the earlier post, but a more obvious location of it is "To run the code, click Show Internal Viewer (F5). Alternatively, click here to run the file online in your browser."
    Click here to run the file online, and you don't give us a link, yet you clearly typed 'click here' atleast if you didn't copy and paste.

    Third: Product Placment
    C-Point is the producer of a Javascript IDE so it would make sense that in their Javascript tutorial that would advertise this. So we find http://prntscr.com/2caff . Very very odd to write such a lengthy advertisment in a 'tutorial', but understandable on C-Point, so a copy and paster might miss this useless bit and leave it in as I believe happened. Not just that but the usage of Antechinus® JavaScript Editor the ® is generally not typed by people unless within an advertisment where it is needed. So again makes sense on the C-Point copy but not if iiPwner wrote it, iiPwner(legendz) supposes that he did write this with that symbol in place here: http://prntscr.com/2cai6

    Fourthly:
    This is the most glaringly obvious example of copy and paste, the intext advertisment is left in:
    [​IMG]
    What does a Pregancy calculator have to do with this, or buying WoW gold? Oh wait its on the C-Point tutorial
    [​IMG]

    [xat]bye[/xat]
  7. dns

    dns Active Member Admin

    iiPwner, I think you're busted bro. [xat]ono[/xat] Just fix the tut by adding quotes and source links please, lol.
Thread Status:
This thread is more than 180 days old.

Share This Page