mario canvas

by salc2

HTML

<canvas></canvas>

CSS

canvas{
      transform: scale(3.0, 3.0);
      transform-origin: 0 0;
      image-rendering: 'pixelated';
      }

JavaScript

(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 ctx = canvas.getContext('2d');
  canvas.width = 320;
  canvas.height = 180;
  document.body.appendChild(canvas);
  const floorY = 180-35;

  var mario = new Image
  mario.src = "https://salc2.github.io/mario.png"

  var frames = {};
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://salc2.github.io/mario.json', true);

  xhr.responseType = 'text';
  xhr.onload = function () {
    if (xhr.readyState === xhr.DONE) {
      if (xhr.status === 200) {
       console.log(frames)
        frames = JSON.parse(xhr.responseText).frames;
        
        const model = {x: 320 / 2, y:  floorY, vx: 0, vy: 0 ,dir: 'right', t: 0.0};


  const PassageOfTime = 'PassageOfTime';
  const ArrowLeftPressed =...