mario pixijs

HTML

<script src="http://pixijs.download/dev/pixi.js"></script>
<script src="https://pixijs.download/dev/pixi.js"></script>
<canvas></canvas>

CSS

canvas{
      
      transform-origin: 0 0;
      image-rendering: 'pixelated';
      }

JavaScript

PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;

(function(){

function startRuntime(update, render, subscriptions, model){
var currentSubs = [];

function onEvent(ev){
    modelTask = update(ev, model);
    model = modelTask[0];
    var task = modelTask[1];
    runEffect(task);
    currentSubs = handleSubs(subscriptions(model));
    render(model);
}

function runEffect(effec){
  effec();
}
  
function partitionById(subsN, subsC){
    const act = [], dis = [];
    const subsNFlatten = subsN.map( (sn) => { return sn[0] } );
    subsC.forEach( sc => {
      if(subsNFlatten.includes(sc[0])){
        act.push(sc)
      }else{
        dis.push(sc)
      }
    });
    return [act,dis];
  }
  
  function handleSubs(comingSubs){
    const newSubs = [];
    const activesAndDiscard = partitionById(comingSubs, currentSubs);
    const actives = activesAndDiscard[0];
    const discard = activesAndDiscard[1];
    const onlyNews = partitionById(actives, comingSubs)[1];
    onlyNews.forEach(on => newSubs.push([on[0],on[1](onEvent)]) );
    discard.forEach(ds => ds[1]() );
    actives.forEach( ac => newSubs.push(ac) )
    return newSubs;
  }
  
  onEvent(new CustomEvent('start', {'detail': ''}))
}

var canvas = document.querySelector("canvas");
var stage = new PIXI.Container();
 renderer = PIXI.autoDetectRenderer(
320,
180,
{view:canvas, antialias: false, transparent: true, resolution:3}
);  


let id = [];
let mario = {};



PIXI.loader
.add("https://salc2.github.io/mario.json")
.load(function(){
   id = PIXI.loader.resources["https://salc2.github.io/mario.json"].textures; 
   mario = new PIXI.Sprite(id["stand_right.gif"]);
   stage.addChild(mario);
});

const floorY = 180-35;

const model = {x: 320 / 2, y:  floorY, vx: 0, vy: 0 ,dir: 'right', t: 0.0};


const PassageOfTime = 'PassageOfTime';
const ArrowLeftPressed = 'ArrowLeftPressed';
const ArrowRightPressed = 'ArrowRightPressed';
const ArrowLeftReleased = 'ArrowLeftReleased';
const ArrowRightReleased =...