WWWBasic

Bringing Nike System Game to the Web

July 28, 2018

Brad Nelson / @flagxor

Motivation

  • Ed's Nike Hercules Simulation
  • BASIC as a scoped problem
  • Run the code as-is

Features Required

  • Arrays, Integer, Double, Single, Strings
  • Structured IF/ELSEIF/ELSE/END IF
  • SELECT CASE
  • CONST, {} Initialization
  • Labels
  • GOSUB, RETURN
  • 1280x1024 Mode 21
  • LINE, PSET, CIRCLE
  • GETMOUSE
  • LOCATE, PRINT, PRINT USING
  • +=, -=, ATAN2

Approach

  • Parse upfront
  • Simple tokenizer
  • Recursive descent parser
  • Allocate variables in TypedArrays
  • Emit JavaScript code current 'op'
  • Start new 'op' when landing point or fixup needed
  • Store current 'op' index into dictionary keyed on label / line number

Embedding

  • Minimum incantation for full page
  • Support Node.js

Usage (Inline)


<!DOCTYPE html>


          

Usage (Inline)

Usage (Inline)


<!DOCTYPE html>



---- foo.bas ----

PRINT "Hello World!"
FOR i = 1 to 10
  PRINT "Counting "; i
NEXT i

          

Same Origin Policy

  • All XMLHTTPRequest from same site
  • Images and JavaScript "special"

Usage (Node.js)


var basic = require('./wwwbasic.js');
basic.Basic(
`
PRINT "Hello World!"
FOR i = 1 to 10
  PRINT "Counting "; i
NEXT i
`);
          

Graphics


SCREEN 21
FOR i = 1 to 40
  FOR j = 1 to 30
    CIRCLE (i * 30, j * 30), _
    10, i * 6 * 65536 + j * 6 * 256,,,,F
  NEXT j
NEXT i
          

Graphics

Graphics


SCREEN 21
FOR i = 1 to 1000
  x1 = INT(RND() * 1280)
  y1 = INT(RND() * 1024)
  x2 = INT(RND() * 1280)
  y2 = INT(RND() * 1024)
  c = INT(RND() * 256 * 256 * 256)
  LINE (x1, y1)-(x2, y2), c
NEXT i
          

Graphics

Mouse


SCREEN 21
GETMOUSE x, y, nw, nb
' Wait for mouse events.
DO
  GETMOUSE nx, ny, nw, nb
LOOP WHILE x = nx and y = ny
x = nx : y = ny
' Draw a green line following the mouse.
Again:
  GETMOUSE nx, ny, nw, nb
  LINE (x, y)-(nx, ny), 256 * 255
  x = nx : y = ny
GOTO Again
          

Graphics

Testing

  • Run via Node.js
  • Travis-CI

Testing


basic_test.BASIC_TEST('PrintUsing', 'SimpleDecimal', `
PRINT USING "abc #.#### def"; 1.23
`, `
abc 1.2300 def
`);
          

What Missing?

  • Graphics Performance
  • Enforce type checks
  • Text scrolling + text modes
  • CGA / EGA / VGA Modes
  • GET / PUT
  • SUB / END SUB
  • READ / DATA / RESTORE
  • INPUT
  • Files

Next Goals

  • Interative Mode?
  • DONKEY.BAS
  • GORILLA.BAS

DONKEY.BAS

GORILLA.BAS

Lessons for a Web Forth

  • Let a single use case drive it
  • Make graphics easy
  • JS Function per Basic Block isn't too bad

wwwbasic source and slides at:
github.com/flagxor

Thank you