Programming for kids, part 5: more javascript

In a previous post, we created a program in Scratch. In this post, we are going to explore javascript more in depth to rewrite (most of) the Scratch program in  HTML and javascript. It is advised to study javascript first, for example via e.g.  Reference Designer.

This javascript program uses the graphics from the Scracth program:  as "background"  a picture of the moon and as "animated parts" a soccer ball and and a tennis bal (in green and red).
The <script> parts of the javascript program are modelled according to the scripts in Scratch.

Below, we will describe all HTML and javascript elements.

---

First, we need 3 HTML elements: 1 canvas (to draw the animation on) and 2 buttons (START and STOP).

<canvas id="myCanvas" width="480" height="360"></canvas>
<br>
<button onclick="startAnimation()">START</button>
<button onclick="stopAnimation()">STOP</button>

---

The 1st script describes the soccer ball in an Object Oriented way.

When the object is created (by the 5th script), it loads it's image. After that loading, the object is ready for use and waiting for invokes of its functions (start, stop, getImage, getX, getY).

When the object gets a start order, it is starting a program similar to the Scratch script.

It is the task of this object to calculate each 30 millisecond its location, "forever".
When asked (via getX, getY), it reports the value to the requesting entity.

When the soccer ball hits the wall. it bounces (dx = -dx or dy = -dy). When the soccer ball hits the tennis ball, it sends a message to the tennis ball. It is up to the tennis ball, to react on that message.

<script>
var Sprite1 = function()
{
    this.start = function() {
       function move(dx, dy) {
           x = x + dx; y = y + dy;
       }
       function forever() {
         move(dx, dy);
         if (x >= 448) { dx= -dx; }
         if (x < 0) { dx = -dx; }
         if (y >= 328) { dy = - dy; }
         if (y < 0) { dy = -dy; }
         if ((Math.abs(s1.getX() - s2.getX()) < 30) &&
             (Math.abs(s1.getY() - s2.getY()) < 30)) {       
                  s2.message(); }
      }
      id = setInterval(forever,30);    // draw every 30 ms
    }
    this.stop = function() { clearInterval(id); }
    this.getImage = function() { return img; }
    this.getX = function() { return x; }
    this.getY = function() { return y; }

    var x = 100; var y = 100;
    var dx=10; var dy=5;
    var id;
    var img = new Image;
    img.src = '/soccer_ball.png';
}
</script>

---

The 2nd script describes the tennis ball, also in an Object Oriented way, similar to the soccer ball. It has 2 additional things compared to the soccer ball:

1. This object loads 2 images (green and red ones), because it can change its appearance.
2. This object can receive a message, and acts on this (i.e. it changes its appearance for a few seconds).

<script>
var Sprite2 = function()
{
    this.start = function() {
       function forever() {
         dx = (s1.getX() - x) / 20;
         dy = (s1.getY() - y) / 20;
         x = x + dx; y = y + dy;
      }
      id = setInterval(forever,30);    // draw every 30 ms
    }
    this.stop = function() { clearInterval(id); }
    this.getImage = function() {
       if (img_A_B == "A") {
        return img_A; } else { return img_B; }
      }
    this.getX = function() { return x; }
    this.getY = function() { return y; }
    this.message = function() {
         img_A_B = "B";
         setTimeout(function(){img_A_B = "A"},500);
     }

    var x = 200 + Math.floor((Math.random()*200)+1);
    var y = 100 + Math.floor((Math.random()*200)+1);
    var dx=0; var dy=0;
    var id;
    var img_A_B = "A";
    var img_A = new Image;
    img_A.src = '/tennis_ball_green.jpg';
    var img_B = new Image;
    img_B.src = '/tennis_ball.red.jpg';
}
</script>

---

The 3rd script is executed when the START button is pressed, i.e. when the animation is started.

The "sprites" are started, i.e. they start calculating their position each 30 milliseconds.

<script>
function startAnimation() {
   s1.start();
   s2.start();
}
</script>

---

The 4th script is executed when the STOP  button is pressed, i.e. when the animation is stopped.

The "sprites" are stopped, i.e. they don't calculate new positions anymore. And so report from now on a fixed position.

<script>
function stopAnimation() {
     s1.stop();
     s2.stop();
}
</script>

---

The 5th script is executed when the webpage is loaded.

The background image is loaded. The "sprite" is created. And the program is redrawing the canvas each 30 milliseconds.

<script>
   var canvas=document.getElementById("myCanvas");
   var ctx=canvas.getContext('2d');

   var img3 = new Image;
   img3.src = '/background.jpg';
   ctx.drawImage(img3,0,0);

   var s1 = new Sprite1();
   var s2 = new Sprite2();

   function forever() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img3,0,0);
      ctx.drawImage(s1.getImage(),s1.getX(),s1.getY());
      ctx.drawImage(s2.getImage(),s2.getX(),s2.getY());
   }
   var id = setInterval(forever,30);    // draw every 30 ms
</script>

---

When you add these HTML and javascript together, you get this.