JSFiddle - React, Tailwind, and code Playground

by Nathan Piper

HTML

<canvas id="game" width="1000" height="800">
<img src="http://www.piskelapp.com/static/resources/home/features/[email protected]" alt="Squid Cat" id="sprite" style="width:100px;height:100px;">

JavaScript

function canvas(id){
	return document.getElementById(id).getContext('2d');
}
var height = 800;
var width = 1000;
var sprite = document.getElementById("sprite");
var game = canvas("game");
var player = {
	x:100,
  y:100,
  width:200,
  height:200,
  speed:5,
  render:function(){
  	game.drawImage(sprite, this.x, this.y);
  },
  tick:function(){
        if (Key.up && this.y > 0) this.y -= this.speed;
        if (Key.down && this.y < height - 20) this.y += this.speed;
        if (Key.left && this.x > 0) this.x -= this.speed;
        if (Key.right && this.x < width - 20) this.x += this.speed;
  }
}

var Key = {
    up: false,
    down: false,
    right: false,
    left: false,
}

//What Happens When You Press The Key
addEventListener("keydown", function (e) {
    var keyCode = (e.keyCode) ? e.keyCode : e.which;

    switch (keyCode) {
        case 38:
            Key.up = true;
            break;
        case 40:
            Key.down = true;
            break;
        case 39:
            Key.right = true;
            break;
        case 37:
            Key.left = true;
            break;
    }
}, false);

//What Happens When You Release The Key
addEventListener("keyup", function (e) {
    var keyCode = (e.keyCode) ? e.keyCode : e.which;

    switch (keyCode) {
        case 38:
            Key.up = false;
            break;
        case 40:
            Key.down = false;
            break;
        case 39:
            Key.right = false;
            break;
        case 37:
            Key.left = false;
            break;
    }
}, false);

function render(){
	game.clearRect(player.x, player.y, player.x + player.width, player.y+player.height);
	player.render();
}
function tick(){
	player.tick();
}
setInterval(function(){
	render();
  tick();
}, 1000/60);