SVG: Car on the road and schedule of events

Showing a car driving down the road and causing an event when it gets its way.

A car is an image that is dynamically added to the scenery. She turns to the "NEW YORK" sign, which she touches and tilts.
To implement this animation, a double goal is defined: 1) move forward and 2) knock down the panel, which is very easy to write in goal-oriented programming: establish an AND relationship between the value of the position x to be achieved and the call of the function that tilts the panel.

The program tests the second term AND relations only when the first has a true meaning. So until position x reaches this value, the function is not called.

It returns true when called, which causes both conditions to be true and the condition to be met, the goal to be achieved, and the animation to stop.

x =

Source Code Description...

Make up the decor

We paint the sky and the road with two rectangles and insert two images into the svg tag to create a static decor.

<svg id="road" width="640" height="250">
  <rect x="0" y="0" width="640" height="240" style="fill:rgb(240,248,255);" />
  <rect x="0" y="240" width="640" height="8" style="fill:rgb(0,128,0);" />
  <image width="280" height="328" xlink:href="code/tree.svg" transform="scale(0.7) translate(350, 16)"/>
  <image id="sign" width="141" height="140" xlink:href="code/sign.svg" transform="scale(0.8) translate(600, 162)"/>
</svg>

Add an image dynamically

The car is not part of the decor, it is normal to add it dynamically.

The <image> tag is created and appended to the <svg> tag by the appendChild DOM method.

var road = document.getElementById("road");
var car
function addCar() {
  car = document.createElementNS('http://www.w3.org/2000/svg','image');
  car.setAttributeNS('http://www.w3.org/1999/xlink','href',"code/car.svg");
  car.setAttribute("width", 715);
  car.setAttribute("height", 296);
  car.setAttribute("transform", "scale(0.4) translate(10,305)");
  road.appendChild(car);
}

Move Images

One function is created to move the car, the other to tilt the sign when the car touches it.

function moveCar(x) {
  var t = "scale(0.4) translate(" + x + " 305)";
  car.setAttribute("transform", t);
}

function toppleSign() {
  var sign = document.getElementById("sign");
  sign.setAttribute("transform", "scale(0.8) translate(600, 162) rotate(30,60,100)");
  return true;
}

Main program: just assign a goal

The main program consists of one instruction: the goal is determined, which is represented by the condition, and it is said how to achieve this goal: the position x increases and is called the moveCar () function.

In Script:

int x = 10
void move()
  to ((x > 720) and toppleSign()) for 20, 4
    x + 1
    moveCar(x)
  /to
return	

Converted to JavaScript:

var x=10;
function move()
{
   scriptol.goal(function() { 
      return(((x>720)&&toppleSign()))},20*1000,function(){
        x+=1;
        moveCar(x);
   },4);
   return;
}

"For 20.4" in Script code has the following meaning: Animation has a time limit of 20 seconds, and each movement occurs after a delay of 4 milliseconds to make the speed independent of the speed of the computer.

Download source code and SVG images (MIT license):

The car.html file is created from the car.sol file with the command: solj -w car. (See scripting language guide).