JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<canvas id=can width=84 height=48></canvas>

CSS

canvas {
   
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
    
    width: calc(84px *4);
    height:calc(48px *4); 
    
    position:absolute;
    top:153px;
    left: 130px;
}
body {
  background-image: url(http://i.imgur.com/HVuzhA8.png);
  background-size: 1050px 700px;
}

JavaScript

//space invaders
// 16x8 pixel sprites, 1 bit color.

var sprites = [];
sprites.p1 = [
0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,
0,0,0,1,0,0,0,0,
0,0,0,1,0,0,0,0,
0,0,1,1,1,0,0,0,
0,1,1,1,1,1,0,0,
0,1,1,1,1,1,0,0,
0,0,0,0,0,0,0,0,
];
sprites.e1 = [[
0,0,0,1,0,0,0,0,
0,0,1,1,1,0,0,0,
0,0,1,1,1,0,0,0,
0,1,1,1,1,1,0,0,
0,0,0,1,0,0,0,0,
0,0,0,1,1,0,0,0,
0,0,0,1,1,0,0,0,
0,0,0,1,1,0,0,0,
],[
0,0,0,1,0,0,0,0,
0,0,1,1,1,0,0,0,
0,0,1,1,1,0,0,0,
0,1,1,1,1,1,0,0,
0,0,0,1,0,0,0,0,
0,0,0,1,1,0,0,0,
0,0,0,1,1,0,0,0,
0,0,0,0,1,1,0,0,
],[
0,0,0,1,0,0,0,0,
0,0,1,1,1,0,0,0,
0,0,1,0,1,0,0,0,
0,1,1,1,1,1,0,0,
0,0,0,1,0,0,0,0,
0,0,0,1,1,0,0,0,
0,0,0,1,1,0,0,0,
0,0,1,1,0,0,0,0
]];
sprites.ship = [
0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,
0,0,0,0,1,1,1,1,
0,0,1,1,1,1,1,1,
0,1,1,0,1,0,1,0,
1,1,1,1,1,1,1,1,
0,1,1,1,0,0,1,1,
0,0,1,0,0,0,0,0,
];
sprites.p1bullet = [
0,0,0,1,0,0,0,0,
0,0,0,1,0,0,0,0,
0,0,0,1,0,0,0,0,
0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,
];

ctx = can.getContext("2d");

var MAX_P1_BULLETS = 3,
		MAX_P1_MOV_SPEED = 4,
    MAX_P1_BUL_SPEED = 1,
    MAX_SHIP_SPEED = 10,//works inverse to expected
    MAX_ENEMY_SPEED = 2,
    MAX_ANI_FRAMES = 3,
    MAX_ANI_SPEED = 50;//works inverse to expected
    
var p1_bullets = [];
var p1_position = {x:20,y:40};
var ship_position = {x:100,y:0};
var ship_speed_step = 0;
var e1_sprite_ani_frame = 0;
var ani_speed_step = 0;

function update_animations () {
	//enemy1 sprite frames
  e1_sprite_ani_frame +=1;
  if(e1_sprite_ani_frame>=MAX_ANI_FRAMES) e1_sprite_ani_frame = 0;
}
function draw(){
  ctx.clearRect(0,0,84,48);
  ctx.fillStyle="rgba(0,0,0,0.7)";
  drawSprite('p1',p1_position.x,p1_position.y,0);
  drawSprite('ship',ship_position.x,ship_position.y,0);
  drawSprite('ship',ship_position.x+8,ship_position.y,1);
  drawSprite('e1',10,10,0);
  //draw player firing bullets
  for(i=0;i<p1_bullets.length;i++){
    drawSprite('p1bullet',p1_bullets[i].x,p1_bullets[i].y,0);
  }
 ...