WWWBasic
Bringing Nike System Game to the Web
July 28, 2018
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>
<script src="wwwbasic.js"></script>
<script type="text/basic">
PRINT "Hello World!"
FOR i = 1 to 10
PRINT "Counting "; i
NEXT i
</script>Usage (Inline)
Usage (Separate .BAS)
<!DOCTYPE html>
<script src="wwwbasic.js"></script>
<script type="text/basic" src="foo.bas"></script>
---- foo.bas ----
PRINT "Hello World!"
FOR i = 1 to 10
PRINT "Counting "; i
NEXT iSame 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 iGraphics
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 iGraphics
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 AgainMouse
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
WWWBasic Bringing Nike System Game to the Web July 28, 2018 Brad Nelson / @flagxor