Web (JavaScript) version of Roller

Introduction

This version (converted from RollerApplet by PPS) takes advantage of the game project in Smart Mobile Studio, in which the graphics are drawn repeatedly after a set interval. The source, written in the Smart dialect of Pascal, translates to an HTML5 file with CSS and JavaScript. 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.

If RollerJS does not run in your current browser, please try another (such as Chrome).

The Code of RollerJS.pas

unit RollerJS;
{
    Applet Version Copyright (c) 2013 Neil
    Converted to run in Smart Mobile Studio by PPS

    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/ }
interface

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

type
  TApplication = class(TW3CustomGameApplication)
  private
    pX, pY, barbX, barbY, Distance : integer;
    ballMovement : String;
    playAgain, Collision : Boolean;
  protected
    procedure  ApplicationStarting; override;
    procedure  ApplicationClosing; override;
    procedure  PaintView(Canvas: TW3Canvas); override;
  end;

implementation

procedure TApplication.ApplicationStarting;
begin
  inherited;
  GameView.Left := GameView.ClientWidth div 2 - 320;
  GameView.Top := 50;
  GameView.Width := 640;
  GameView.Height := 360;
  GameView.Delay := 5;
  pX := 100;
  pY := 200;
  barbX := 615;
  barbY := round(random * 43 + 224);
  ballMovement := 'stationary';
  playAgain := false;
  GameView.OnMouseDown := procedure(o : TObject; b : TMouseButton; t : TShiftState; x, y : integer)
    begin
      if pY = 200 then
        ballMovement := 'up';
      if Collision = true then
        playAgain := true;
    end;
  GameView.StartSession(True);
end;

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

procedure TApplication.PaintView(Canvas: TW3Canvas);
const
  barb = '*';
begin
  // Clear background
  Canvas.FillStyle := 'LightBlue';
  Canvas.FillRectF(0, 0, GameView.Width, GameView.Height);
  if (playAgain = false) and (collision = false) then
		barbX := barbX - 9;
  if ballMovement = 'up' then
    pY := pY - 6;
  if pY <= 100 then
     ballMovement := 'down';
  if ballMovement = 'down' then
     pY := pY + 6;
  if pY >= 200 then
     ballMovement := 'stationary';
  //Calculate distance between centres using Pythagoras
  Distance := (barbX + 25 - pX) * (barbX + 25 - pX) + (barbY - 66 - pY) *(barbY - 66 - pY);
  if Distance < 1500 then
    Collision := true;

  if ((barbX <= 0) and (playAgain = false) and (Collision = false)) or
      ((playAgain = true) and (Collision = true)) then
    begin
      barbX := 615;
      barbY := round(random * 43 + 224);
    end;
  Canvas.FillStyle := 'red';
  Canvas.StrokeStyle := 'red';
  Canvas.BeginPath;
  Canvas.ArcF(pX, pY, 18, 0, PI * 2, true);
  Canvas.ClosePath;
  Canvas.Stroke;
  Canvas.Fill;

  Canvas.FillStyle := 'green';
  Canvas.FillRectF(0, 218, 640, 360);
  Canvas.FillStyle := 'black';
  Canvas.Font := '90pt arial';
  Canvas.FillTextF(barb, barbX, barbY, MAX_INT);

  if Collision = true then
    begin
      Canvas.Font := '42pt courier';
      Canvas.FillStyle := 'black';
      Canvas.FillTextF('YOU LOSE', 220, 50, MAX_INT);
      Canvas.Font := '30pt courier';
      Canvas.FillTextF('Click to play again.', 130, 100, MAX_INT);
      ballMovement := 'stationary';
    end;

  if playAgain = true then
    begin
      Collision := false;
      playAgain := false;
      pY := 200;
    end;
end;

end.