Mario Kart 64 PC Port: SpaghettiKart Explained, Then Build Your Own Racer

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Original free kart racing tutorial: a two-lap time trial with steering, drift, boost and ordered gates."><title>Original game Stormwheel Rally · BINX Forge</title><link rel="stylesheet" href="game.css"><script type="module" src="main.mjs"></script></head>
<body><main><a id="guide" href="https://binxforge.com/guides/mario-kart-64-spaghettikart-build-original-racer">← Follow the BINX Forge guide</a><p class="eyebrow">ORIGINAL MIT KART TUTORIAL · 1.0</p><h1 id="name">Stormwheel Rally</h1>
<label for="lesson">Tutorial example</label><select id="lesson"><option value="kart">Stormwheel Rally · kart racing</option></select>
<p id="instructions">Enable JavaScript and start a small game. Source, licence and instructions remain available.</p><div class="hud"><p>Progress: <output id="score">0</output></p><p>Time: <output id="time">90</output></p></div>
<canvas id="game" width="640" height="360" tabindex="0" aria-label="Original game example area" aria-describedby="instructions status">This visual example requires Canvas and JavaScript. Read the guide and source for text instructions.</canvas>
<p id="status" role="status">Ready. Start a new run.</p><div class="actions"><button id="start" disabled>Start a new run</button><button id="pause" disabled>Pause</button></div>
<div class="actions"><button id="action0" disabled>Toggle drift</button><button id="action1" disabled>Reset to last gate</button><button id="action2" hidden disabled>Third action</button></div>
<div class="directions" role="group" aria-label="Movement controls"><button data-direction="up" aria-label="Up / accelerate">↑</button><button data-direction="left" aria-label="Left">←</button><button data-direction="down" aria-label="Down / brake">↓</button><button data-direction="right" aria-label="Right">→</button></div>
<p class="note">Focus the canvas for arrows or W/A/S/D, or hold the direction buttons. Actions also work with keyboard-focused buttons. Leaving the tab pauses and clears input. Resume is explicit. Examples have no accounts, network play, saving, third-party art or sound. Their 2D rules are a learning milestone; native input, phone and assistive-technology acceptance remains to be checked.</p>
<p><a href="stormwheel.zip">Download all complete files</a> · <a href="README.md">Run and test instructions</a> · <a href="LICENSE.txt">Original MIT source licence</a></p><noscript><p>Enable JavaScript to play. Read or download the complete source without an account.</p></noscript></main></body></html>

/* One frame owner · reuses Pocket Engine input/lifecycle/timing patterns · MIT. */
import {newState,advance,action,modes,lessons} from './worlds.mjs';
import {render} from './render.mjs';
import {createInput} from './input.mjs';
export function createController(doc,win){
 const byId=id=>doc.getElementById(id),canvas=byId('game'),ctx=canvas.getContext('2d');
 const requested=new URLSearchParams(win.location.search).get('mode');let mode=modes.includes(requested)?requested:'kart',state=newState(mode),previous=null,frameId=null,pausedFrom='running';
 const input=createInput(doc,win,canvas,pause);
 function sync(){
  const l=lessons[mode];byId('name').textContent=l.name;byId('instructions').textContent=l.instructions;
  byId('guide').href='https://binxforge.com/guides/'+l.guide;byId('lesson').value=mode;
  if(byId('status').textContent!==state.message)byId('status').textContent=state.message;
  byId('score').textContent=state.mode==='creatures'?state.party.length:state.score;
  byId('time').textContent=state.remaining===undefined?'—':Math.ceil(state.remaining);
  byId('pause').disabled=!['running','battle','upgrade','paused'].includes(state.status);byId('pause').textContent=state.status==='paused'?'Resume':'Pause';
  l.buttons.forEach((label,i)=>{const b=byId('action'+i);b.textContent=label;b.hidden=!label;b.disabled=state.mode==='creatures'?state.status!=='battle':state.mode==='survivors'?state.status!=='upgrade':state.status!=='running';if(state.mode==='kart'&&i===0)b.setAttribute('aria-pressed',String(state.drift));else b.removeAttribute('aria-pressed');});
 }
 function pause(){input.clear();if(['running','battle','upgrade'].includes(state.status)){pausedFrom=state.status;state.status='paused';state.message='Paused. Resume when ready.';}previous=null;sync();}
 function draw(){render(ctx,state);sync();}
 function loop(now){frameId=null;if(!doc.hidden&&previous!==null)advance(state,input.read(),(now-previous)/1000);previous=now;draw();frameId=win.requestAnimationFrame(loop);}
 function schedule(){if(frameId===null)frameId=win.requestAnimationFrame(loop);}
 byId('start').addEventListener('click',()=>{input.clear();state=newState(mode);state.status='running';state.message=lessons[mode].instructions;previous=null;canvas.focus();draw();});
 byId('pause').addEventListener('click',()=>{if(state.status==='paused'&&!doc.hidden){state.status=pausedFrom;state.message='Resumed.';previous=null;canvas.focus();sync();}else pause();});
 byId('lesson').addEventListener('change',()=>{const value=byId('lesson').value;if(!modes.includes(value))return;input.clear();mode=value;state=newState(mode);previous=null;draw();});
 for(let i=0;i<3;i++)byId('action'+i).addEventListener('click',()=>{action(state,i);input.clear();canvas.focus();draw();});
 win.addEventListener('pagehide',()=>{pause();if(frameId!==null)win.cancelAnimationFrame(frameId);frameId=null;});
 win.addEventListener('pageshow',()=>{previous=null;schedule();});
 byId('start').disabled=false;draw();schedule();return Object.freeze({getState:()=>state});
}
if(typeof document!=='undefined')createController(document,window);

/* Pocket Engine1.0 · adapted from BINX Forge Coin Dash1.0 · MIT. */
const directions={ArrowUp:'up',ArrowDown:'down',ArrowLeft:'left',ArrowRight:'right',w:'up',s:'down',a:'left',d:'right'};
export function createInput(doc,win,canvas,pause) {
  const keys=new Set(),pointers=new Map(),listeners=[];
  function listen(target,name,handler){target.addEventListener(name,handler);listeners.push(()=>target.removeEventListener(name,handler));}
  const inside=element=>element===canvas||element?.matches?.('[data-direction]');
  const direction=key=>directions[key.length===1?key.toLowerCase():key];
  function clear(){keys.clear();pointers.clear();}
  function leave(){clear();pause();}
  listen(doc,'keydown',event=>{const d=direction(event.key);if(!d||!inside(doc.activeElement))return;event.preventDefault();keys.add(d);});
  listen(doc,'keyup',event=>{const d=direction(event.key);if(d)keys.delete(d);});
  for(const button of doc.querySelectorAll('[data-direction]')){
    listen(button,'pointerdown',event=>{if(event.pointerType==='mouse'&&event.button!==0)return;button.setPointerCapture(event.pointerId);pointers.set(event.pointerId,button.dataset.direction);});
    for(const name of ['pointerup','pointercancel','lostpointercapture'])listen(button,name,event=>pointers.delete(event.pointerId));
  }
  listen(doc,'focusout',event=>{if(inside(event.target))keys.clear();});
  listen(win,'blur',leave);listen(doc,'visibilitychange',()=>{if(doc.hidden)leave();});
  return Object.freeze({read:()=>Object.fromEntries([...keys,...pointers.values()].map(d=>[d,true])),clear,destroy(){clear();for(const remove of listeners)remove();}});
}

/* Stormwheel Rally 1.0 — original independent MIT tutorial, adapted from BINX Forge Genre Lab's public kart rules. */
export const W=640,H=360;
const clamp=(n,a,b)=>Math.max(a,Math.min(b,n));
const distance=(a,b)=>Math.hypot(a.x-b.x,a.y-b.y);
export const modes=['kart'];
export const lessons={kart:{name:'Stormwheel Rally',guide:'mario-kart-64-spaghettikart-build-original-racer',instructions:'Finish two clockwise laps in 90 seconds. Up accelerates, down brakes, left/right steer. Toggle Drift while turning; release it for a boost. The cyan pickup supplies turbo.',buttons:['Toggle drift','Reset to last gate','']}};
export function newState(mode='kart'){if(mode!=='kart')throw Error('Choose the kart lesson.');return {mode,status:'ready',age:0,message:'Ready. Start a new run.',player:{x:560,y:180},score:0,angle:Math.PI/2,speed:0,remaining:90,nextGate:1,laps:0,drift:false,charge:0,boost:0,pickupCooldown:0,lastGate:0};}
export const gates=[{x:560,y:180},{x:320,y:300},{x:80,y:180},{x:320,y:60}];
export function acceptGate(s,index,forward){
 if(s.status!=='running'||s.mode!=='kart'||!forward||index!==s.nextGate)return false;
 s.lastGate=index;s.nextGate=(index+1)%4;
 if(index===0){s.laps++;s.score=s.laps;if(s.laps===2){s.status='won';s.message='Two laps complete! Start a new run.';}}
 return true;
}
function kartStep(s,input,dt){
 s.remaining=Math.max(0,s.remaining-dt);s.boost=Math.max(0,s.boost-dt);s.pickupCooldown=Math.max(0,s.pickupCooldown-dt);
 s.speed=clamp(s.speed+((input.up?105:0)-(input.down?200:0)-(!input.up&&!input.down?45:0))*dt,0,s.boost>0?240:170);
 const steering=Number(!!input.right)-Number(!!input.left);
 s.angle+=steering*1.8*(s.speed/170)*(s.drift?1.3:1)*dt;
 if(s.drift&&steering&&s.speed>60)s.charge=Math.min(1.5,s.charge+dt);
 const before={...s.player};s.player.x+=Math.cos(s.angle)*s.speed*dt;s.player.y+=Math.sin(s.angle)*s.speed*dt;
 const radius=Math.hypot((s.player.x-320)/240,(s.player.y-180)/120);
 if(radius<0.70||radius>1.30){s.player=before;s.speed*=0.4;s.charge=0;s.message='Track edge: steer back onto the road.';}
 const gate=gates[s.nextGate],tangents=[{x:0,y:1},{x:-1,y:0},{x:0,y:-1},{x:1,y:0}],t=tangents[s.nextGate];
 const prevSide=(before.x-gate.x)*t.x+(before.y-gate.y)*t.y,side=(s.player.x-gate.x)*t.x+(s.player.y-gate.y)*t.y;
 if(prevSide<0&&side>=0&&distance(s.player,gate)<65)acceptGate(s,s.nextGate,true);
 if(s.pickupCooldown===0&&distance(s.player,{x:320,y:60})<22){s.boost=1;s.pickupCooldown=8;s.message='Turbo pickup: one second of boost.';}
 if(s.remaining===0&&s.status==='running'){s.status='lost';s.message='Time is up. Start a new run.';}
}
export function step(s,input={},dt){if(s.status!=='running'||!Number.isFinite(dt)||dt<=0||dt>0.01+1e-9)return;s.age+=dt;kartStep(s,input,dt);}
export function advance(s,input,elapsed){
 if(!Number.isFinite(elapsed)||elapsed<=0)return;const time=Math.min(0.1,elapsed),count=Math.ceil(time/0.01);for(let i=0;i<count;i++)step(s,input,time/count);
}
export function action(s,index){
 if(s.mode==='kart'&&s.status==='running'){
  if(index===0){s.drift=!s.drift;if(!s.drift){if(s.charge>=0.6){s.boost=0.8;s.message='Drift release: boost!';}s.charge=0;}}
  if(index===1){s.player={...gates[s.lastGate]};s.angle=[Math.PI/2,Math.PI,-Math.PI/2,0][s.lastGate];s.speed=0;s.charge=0;s.drift=false;s.message='Reset to last valid gate; progress preserved.';}return;
 }
}

/* Original geometric top-down kart render; not a commercial game screenshot. MIT. */
import {W,H,gates,lessons} from './worlds.mjs';
function circle(c,x,y,r,colour){c.fillStyle=colour;c.beginPath();c.arc(x,y,r,0,Math.PI*2);c.fill();}
function text(c,value,x,y,size=16,colour='#f3f6fa'){c.fillStyle=colour;c.font=size+'px system-ui';c.fillText(value,x,y);}
export function render(c,s){c.clearRect(0,0,W,H);c.fillStyle='#14293a';c.fillRect(0,0,W,H);
  c.strokeStyle='#486173';c.lineWidth=70;c.beginPath();c.ellipse(320,180,240,120,0,0,Math.PI*2);c.stroke();
  for(let i=0;i<4;i++){circle(c,gates[i].x,gates[i].y,12,i===s.nextGate?'#ffe58d':'#93aabb');text(c,i===0?'Finish':String(i),gates[i].x-18,gates[i].y-24,14);}
  if(s.pickupCooldown===0)circle(c,320,60,8,'#82d7ff');
  c.save();c.translate(s.player.x,s.player.y);c.rotate(s.angle);c.fillStyle=s.boost>0?'#82d7ff':'#ffae80';c.fillRect(-14,-9,28,18);c.fillStyle='#102033';c.fillRect(-9,-13,7,5);c.fillRect(4,-13,7,5);c.fillRect(-9,8,7,5);c.fillRect(4,8,7,5);c.restore();
  text(c,'Lap '+s.laps+'/2 · Next gate '+s.nextGate,196,168);text(c,'Drift '+(s.drift?'ON':'OFF')+' · Charge '+s.charge.toFixed(1),196,193,14);

 if(['ready','paused','won','lost','upgrade'].includes(s.status)){c.fillStyle='#071625e8';c.fillRect(100,130,440,90);text(c,s.status==='ready'?lessons[s.mode].name:s.status==='upgrade'?'Choose your upgrade below':s.status.toUpperCase(),164,168,23);text(c,['won','lost'].includes(s.status)?'Start a new run to play again':s.status==='paused'?'Use Resume to continue':'See instructions and controls below',164,199,14);}
}

:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #101c2b; color: #f3f6fa; }
* { box-sizing: border-box; }
body { margin: 0; padding: 20px; }
main { max-width: 720px; margin: auto; }
a { color: #9be2ff; }
h1 { margin: .4em 0; }
p { line-height: 1.6; }
.eyebrow { color: #8cd8e9; font-size: .75rem; letter-spacing: .1em; }
.hud, .actions { display: flex; flex-wrap: wrap; gap: 16px; }
.hud { justify-content: space-between; }
.hud p { margin: 8px 0; }
canvas { display: block; width: 100%; height: auto; border: 2px solid #53788c; border-radius: 12px; background: #14293a; }
button { min-width: 64px; min-height: 48px; padding: 10px 16px; border: 2px solid #8cd8e9; border-radius: 8px; background: #163b50; color: #fff; font: inherit; cursor: pointer; }
button:disabled { opacity: .55; cursor: default; }
:focus-visible { outline: 3px solid #ffde80; outline-offset: 3px; }
.directions { display: grid; grid-template-columns: repeat(3, 64px); gap: 8px; justify-content: center; margin-top: 20px; }
.directions button { touch-action: none; user-select: none; }
[data-direction="up"] { grid-column: 2; }
[data-direction="left"] { grid-column: 1; grid-row: 2; }
[data-direction="down"] { grid-column: 2; grid-row: 2; }
[data-direction="right"] { grid-column: 3; grid-row: 2; }
.note { color: #b8c9d6; font-size: .875rem; }

select{display:block;max-width:100%;min-height:48px;background:#163b50;color:#fff;border:2px solid #8cd8e9;font:inherit;padding:8px;border-radius:8px}.actions{margin:14px 0}[hidden]{display:none!important}

# Stormwheel Rally 1.0

An independent MIT 2D top-down kart time trial. Adapted from the existing public BINX Forge Genre Lab kart rules; no commercial game code, characters or assets.

Extract all nine files in the stormwheel folder. Serve over HTTP using python -m http.server 8080 and open /index.html; .mjs must use JavaScript MIME. Run node check.mjs (Node 24.19.0). No external library or asset purchase is required.

Up/W accelerates, Down/S brakes, Left/A and Right/D steer. Toggle Drift while turning and release after charging to boost. Cyan turbo pickup refreshes after eight seconds. Cross all four gates clockwise for two laps before 90 seconds. Reset restores the last accepted gate without awarding progress. Pause/resume and restart use the same one-loop controller.

This reference contains one geometric oval, one kart and a timer. AI rivals, weapon pickups, saving, 3D models, wet-road physics, campaign and the generated seaside concept artwork are proposed upgrades, not current features. Tab/window leave pauses; touch uses multiple pointer IDs. Browser/phone/audio/clipboard acceptance is separate from simulation tests.

Publish all files on a static HTTPS host preserving relative paths. Test first load, controls, direction, gates, win/timeout, focus, two restarts and phone layout on the actual target. Source notices stay with every redistributed copy.

MIT License

Copyright (c) 2026 BINX Forge

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

import assert from 'node:assert/strict';
import {newState,advance,action,acceptGate,gates} from './worlds.mjs';
let n=0;const check=(name,fn)=>{fn();n++;console.log('PASS '+name);};
function drive(rate){const s=newState();s.status='running';for(let i=0;i<rate*90&&s.status==='running';i++){const a=Math.atan2((s.player.y-180)/120,(s.player.x-320)/240)+.24,tx=320+240*Math.cos(a),ty=180+120*Math.sin(a),d=Math.atan2(ty-s.player.y,tx-s.player.x),e=Math.atan2(Math.sin(d-s.angle),Math.cos(d-s.angle));advance(s,{up:true,left:e<-.04,right:e>.04},1/rate);}return s;}
check('complete real two-lap route at 15/30/60/120 update rates',()=>{for(const r of [15,30,60,120]){const s=drive(r);assert.equal(s.status,'won');assert.equal(s.laps,2);assert.ok(s.remaining>0);}});
check('ordered forward gates reject skipped, reverse and duplicate crossings',()=>{const s=newState();s.status='running';assert.equal(acceptGate(s,0,true),false);assert.equal(acceptGate(s,1,false),false);assert.equal(acceptGate(s,1,true),true);assert.equal(acceptGate(s,1,true),false);assert.equal(s.nextGate,2);assert.equal(s.laps,0);});
check('drift charge is bounded and release awards one boost',()=>{const s=newState();s.status='running';s.speed=100;action(s,0);advance(s,{up:true,right:true},.1);assert.ok(s.charge>0);s.charge=1;action(s,0);assert.equal(s.boost,.8);assert.equal(s.charge,0);advance(s,{},.1);assert.ok(s.boost<.8);});
check('reset preserves accepted gate and cannot award a lap',()=>{const s=newState();s.status='running';acceptGate(s,1,true);s.player.x=12;action(s,1);assert.deepEqual(s.player,gates[1]);assert.equal(s.nextGate,2);assert.equal(s.laps,0);assert.equal(s.speed,0);});
check('invalid time freezes state and long debt is capped',()=>{const s=newState();s.status='running';const before=JSON.stringify(s);for(const t of [NaN,Infinity,0,-1])advance(s,{up:true},t);assert.equal(JSON.stringify(s),before);advance(s,{up:true},100);assert.ok(s.age<=.100001);});
check('pause and both outcomes freeze; runs are independent',()=>{for(const status of ['ready','paused','won','lost']){const s=newState();s.status=status;const before=JSON.stringify(s);advance(s,{up:true,right:true},.1);action(s,0);assert.equal(JSON.stringify(s),before);}const a=newState(),b=newState();a.player.x=0;assert.equal(b.player.x,560);});
check('timer produces loss while outside-track movement rolls back',()=>{const s=newState();s.status='running';s.remaining=.001;advance(s,{},.01);assert.equal(s.status,'lost');const a=newState();a.status='running';a.angle=0;a.speed=170;a.player.x=632;const before={...a.player};advance(a,{up:true},.01);assert.deepEqual(a.player,before);assert.ok(a.speed<100);});
console.log(n+' kart rule checks passed; browser/phone acceptance is separate.');

UI Pack · Impact Sounds

Review or select the upgrade text.

Godot · Racing Kit · City Kit (Roads)

Review or select the upgrade text.

Godot · Racing Kit · UI Pack

Review or select the upgrade text.