Web Version of My_first_sdl

Introduction

We created this version of my_first_sdl for Smart Mobile Studio so that you can see the motion graphic in action on this web page. We draw the ellipses by drawing circles on a scaled canvas, and need to compensate for the scaling when supplying the coordinates of the centre. (You may prefer to use the Ellipse procedure that takes as parameters the coordinates of the top left and bottom right corners of the bounding rectangle).

If MyFirstJS does not run in your current browser, please try another (such as Chrome). If you see no display at school, the security system might have blocked it. You can try instead this direct link to the program running on its own page.

The Program

unit MyFirstJS;
{
    Copyright (c) 2011 Steven Binns

    Licensed under the Apache License, Version 2.0 (the "License"); you may not
    use this file except in compliance with the License, as described at
    http://www.apache.org/licenses/ and http://www.pp4s.co.uk/licenses/

    Converted for Smart Mobile Studio by PPS (2013)

}

interface

uses 
  W3System, W3Components, W3Application, W3Game, W3GameApp, W3Graphics;

type
  TApplication = class(TW3CustomGameApplication)
  private
    x, y :  integer;
    scaleX, scaleY : real;
  protected
    procedure  ApplicationStarting; override;
    procedure  ApplicationClosing; override;
    procedure  PaintView(Canvas: TW3Canvas); override;
  end;

implementation

procedure TApplication.ApplicationStarting;
begin
  inherited;
  GameView.Delay := 15;
  x := 0;
  y := 200;
  GameView.Width := 400;
  GameView.Height := 400;
  GameView.StartSession(True);
end;

procedure TApplication.ApplicationClosing;
begin
  GameView.EndSession;
  inherited;
end;

procedure TApplication.PaintView(Canvas: TW3Canvas);
begin
  if x = 0 then // Clear background
    begin
      Canvas.FillStyle := 'rgb(0, 0, 99)';
      Canvas.FillRectF(0, 0, GameView.Width, GameView.Height);
    end;
  if x <= 200 then
     x += 1
  else
     x := 0;
   if y >= 0 then
      y -= 1
   else
     y := 200;
  Canvas.FillStyle := 'green';
  Canvas.StrokeStyle := 'green';
  Canvas.Save;
  Canvas.BeginPath;
  scalex := x / 200;
  scaley := y / 200;
  Canvas.Scale(scaleX, scaleY);
  Canvas.ArcF(200 / scaleX, 200 / scaleY, 200, 0, PI * 2, true);
  Canvas.ClosePath;
  Canvas.Stroke;
  Canvas.Fill;
  Canvas.Restore;
end;

end.