Unit 3 – Game Design and JavaScript Programming

 

 

 

 

I. Kahn Academy - Learn Coding

Follow the Khan Academy lessons in a booklet here

Go to Khan Academy programming here - Khan Academy Intro to JS: Drawing and Animation

 Khan Acacemy

 

 

 

II. Create three of your own video games in the Khan code editor

with JavaScript utilizing object-oriented design principles.

 

A. Dot Chaser 

https://www.youtube.com/watch?v=O6mWO4VTE2M&list=PLhPyEFL5u-i0YTLyvg74rV4jkpQj7MGS9 

 or use the videos on the M: drive at school if you cannot access YouTube.

 

 

B. Building Bomber

https://www.youtube.com/watch?v=tXHPZ3uMWFs&list=PLhPyEFL5u-i00tT1KWDHlJfxSPfpzZ0HM 

Building Bomber Image

 

 

C. Pong

 

Create this classic game without the aid of tutorial.

Use the examples you learned in the previous tutorials to

1. get keyboard input

2. create a player object

3. update objects in the draw loop

4. detect collisions

5. detect out-of-bounds conditions

6. keep score 

 

D. FBLA Challenge

Create a 1980's style arcade game - Frogger, PacMan, Asteroids, Space Invaders, Centipede, Galaxia for a few suggestions.  Participate in the FBLA state leadership conference and submit this game for competitive review.

 

III. How to transfer your game to a standard web browser

1. Copy and paste the following code into a text editor (NotePad++)

2. Change the size(400,400) on line 12 to make your game larger

3. Update some of your graphic image commands using the advice below the code block.

4. Save your file with an HTML or HTM extension and open it with your favorite web browser.  No internet service will be required.

 

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript</title>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.8/processing.min.js"></script>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script>
    var canvas = document.getElementById("canvas");
    var processing = new Processing(canvas, function(processing) {
        processing.size(400, 400);
        processing.background(0xFFF);

        var mouseIsPressed = false;
        processing.mousePressed = function () { mouseIsPressed = true; };
        processing.mouseReleased = function () { mouseIsPressed = false; };

        var keyIsPressed = false;
        processing.keyPressed = function () { keyIsPressed = true; };
        processing.keyReleased = function () { keyIsPressed = false; };

        function getImage(s) {
            var url = "https://www.kasandbox.org/programming-images/" + s + ".png";
            processing.externals.sketch.imageCache.add(url);
            return processing.loadImage(url);
        }

        // use degrees rather than radians in rotate function
        var rotateFn = processing.rotate;
        processing.rotate = function (angle) {
            rotateFn(processing.radians(angle));
        };

        with (processing) {


            // INSERT YOUR KHAN ACADEMY PROGRAM HERE


        }
        if (typeof draw !== 'undefined') processing.draw = draw;
    });
  </script>
</body>
</html>

 

Some changes you will have to make to your code once it is out of Khan's editor...

1. Use direct reference to images rather than store them in a variable.  For example

Change this

var AirPlaneImage = getImage("space/beetleship");

 image(AirPlaneImage,this.x,this.y,this.w,this.h);

    to this

image(getImage("space/beetleship");,this.x,this.y,this.w,this.h);

 

2. Sounds don't seem to work well either.

 

3. You can customize the size of the screen on line 12.

processing.size(400, 400); 

In your program, if you used the number 400 in any calculation, you should change it to the variable height.