JSFiddle - React, Tailwind, and code Playground

by atesgoral

HTML

<canvas id="c" width="256" height="256"></canvas>

JavaScript

const pgm = [
	'MOVI 2'
];

/***/

const ram = [ 10, 10 ,10];

let pc = 0;
let r0;
let a0;

setInterval(() => {
  const statement = pgm[pc++];

  if (!statement) return;

  const opcode = statement.slice(0, 4);
  const operand = statement.slice(5);
  
  console.log('opcode', opcode, 'operand', operand);
  
  ({
  	MOVI: (v) => {
    	r0 = v;
    }
  })[opcode](operand);
  
  console.log('pc', pc, 'r0', r0);
  
  const x = c.getContext('2d');
  
  for (let i = 0; i < 65536; i++) {
		x.fillStyle = `hsl(0, 0%, ${(ram[i] || 0) * 10}%)`;
    x.fillRect(i & 255, i >> 8, 1, 1);
  }
}, 1000);