My Community

Tutorial 6 Keyboard Functions For A Game

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Tutorial 6 Keyboard Functions For A Game
« on: November 07, 2014, 07:11:30 PM »
In this lesson I will show you how to create your own car game.  In order to create your own car game you have to apply the series from lesson 4 along with the setSpeed declaration by declaring the speed of the car.  You also have to create if statements for each arrow key on the car that allow you to adjust the speed for the vehicle.
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 6 Keyboard Functions For A Game
« Reply #1 on: November 07, 2014, 07:20:40 PM »
Let's use an image of Jeff Gordon.  We will call this jgordon24.png.  I already cropped and modified the image so it is not just a square block when we play the game.
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 6 Keyboard Functions For A Game
« Reply #2 on: November 07, 2014, 07:22:22 PM »
This is the entire code for the NASCAR game.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>NASCAR Game</title>
    <script type="text/javascript"
            src = "simpleGame_1_0.js"></script>
    <script type="text/javascript">
    var scene;
    var car;
   
    function init(){
        scene = new Scene();
        car = new Sprite(scene, "jgordon24.png", 200, 100);
        car.setAngle(270);
        car.setSpeed(0);
        scene.start();
    } // end init
   
   
   
    function update(){
        scene.clear();
        //check keys
       
        if (keysDown[K_LEFT]){
            car.changeAngleBy(-5);
        } // end if
       
        if (keysDown[K_RIGHT]){
            car.changeAngleBy(5);
        } // end if
       
        if (keysDown[K_UP]){
            car.changeSpeedBy(1);
        } // end if
       
        if (keysDown[K_DOWN]){
            car.changeSpeedBy(-1);
        } // end if
       
        car.update();
    } // end update
    </script>
</head>
<body onload = "init()">
    <h1>Drive motherfucka!</h1>
</body>
</html>
« Last Edit: November 07, 2014, 07:25:06 PM by ChrisRansom »
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 6 Keyboard Functions For A Game
« Reply #3 on: November 07, 2014, 07:27:31 PM »
There are three components of this game.  The first is the simple game javascript file.  That has the canvas for the game.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>NASCAR Game</title>
    <script type="text/javascript"
            src = "simpleGame_1_0.js"></script>
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 6 Keyboard Functions For A Game
« Reply #4 on: November 07, 2014, 07:29:09 PM »
Then you have the function init (){




} // end init

This initiates the function of your game in code.  The end init thing is there to indicate the ending of your initiation process.
« Last Edit: November 07, 2014, 07:31:12 PM by ChrisRansom »
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 6 Keyboard Functions For A Game
« Reply #5 on: November 07, 2014, 07:30:20 PM »
We need a scene and a sprite so let's add that to our game.
  function init(){
        scene = new Scene();
        car = new Sprite(scene, "jgordon24.png", 200, 100);
    } // end init

The scene and the car have been defined.
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 6 Keyboard Functions For A Game
« Reply #6 on: November 07, 2014, 07:33:31 PM »
Let's expand on the previous scene by setting the speed and starting the scene.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>NASCAR Game</title>
    <script type="text/javascript"
            src = "simpleGame_1_0.js"></script>
    <script type="text/javascript">
    var scene;
    var car;
   
    function init(){
        scene = new Scene();
        car = new Sprite(scene, "jgordon24.png", 200, 100);
        car.setAngle(270);
        car.setSpeed(0);
        scene.start();
    } // end init
   

The Angle is projected to go to the west and there is no predetermined speed meaning you will manually dictate the car's speed.  How?  I will reveal that next.
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 6 Keyboard Functions For A Game
« Reply #7 on: November 07, 2014, 07:35:09 PM »
The function update () {




}

command will let you determine the function of the game.
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 6 Keyboard Functions For A Game
« Reply #8 on: November 07, 2014, 07:39:42 PM »
   
    function update(){
        scene.clear();
        //check keys
       
        if (keysDown[K_LEFT]){
            car.changeAngleBy(-5);
        } // end if
       
        if (keysDown[K_RIGHT]){
            car.changeAngleBy(5);
        } // end if
       
        if (keysDown[K_UP]){
            car.changeSpeedBy(1);
        } // end if
       
        if (keysDown[K_DOWN]){
            car.changeSpeedBy(-1);
        } // end if
       
        car.update();
    } // end update

When you make a function you declare the function put the parenthesis in followed by the curly braces then you say // end whatever you declare the function to be.  Each key represents an arrow on your keyboard.

This is an if statement.  keysDown is the statement we have declared. [K_DOWN] indicates the down arrow on your keyboard.
car.changeSpeedBy(-1); is a variable which lets you adjust the string for the variable.  K_UP is the up arrow.  K_LEFT is left and K_RIGHT is right.  All of these commands go in a [bracket like this K_UP] except you just type [K_UP]
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.

ChrisRansom

  • *********
  • 466
  • Christopher Michael Ransom The 1 and only.
    • View Profile
    • Draft Utopia
    • Email
Re: Tutorial 6 Keyboard Functions For A Game
« Reply #9 on: November 07, 2014, 07:44:23 PM »
I'll retype the entire game code one more time after breaking it down step by step.
This is the entire code for the NASCAR game.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>NASCAR Game</title>
    <script type="text/javascript"
            src = "simpleGame_1_0.js"></script>
    <script type="text/javascript">
    var scene;
    var car;
   
    function init(){
        scene = new Scene();
        car = new Sprite(scene, "jgordon24.png", 200, 100);
        car.setAngle(270);
        car.setSpeed(0);
        scene.start();
    } // end init
   
   
   
    function update(){
        scene.clear();
        //check keys
       
        if (keysDown[K_LEFT]){
            car.changeAngleBy(-5);
        } // end if
       
        if (keysDown[K_RIGHT]){
            car.changeAngleBy(5);
        } // end if
       
        if (keysDown[K_UP]){
            car.changeSpeedBy(1);
        } // end if
       
        if (keysDown[K_DOWN]){
            car.changeSpeedBy(-1);
        } // end if
       
        car.update();
    } // end update
    </script>
</head>
<body onload = "init()">
    <h1>Drive motherfucka!</h1>
</body>
</html>

You want the game to look like this.  You can go to http://www.aharrisbooks.net/ to pull up the lesson I cited from Andy Harris.  I just modified the game using some of my own code.  In lesson 7 I will talk about adding javascript to a slideshow.
My name is Chris Ransom and I am the creator of Draft Utopia.  I run the podcast, website, and forum for Draft Utopia.