Web Version of My_first_sdl
by Steven Binns: Y11 Age ~15, converted for Smart Mobile Studio by PPS
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.