JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<canvas id="canvas" tabindex="0" width="400" height="400" style="border: 1px solid"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var sprite;
var speed = 2;

canvas.onkeydown = function(e) {
    sprite.speedX = 0;
    sprite.speedY = 0;
    switch (e.keyCode) {
    case 37:
        // left arrow
        sprite.setSprite("walk_left");
        sprite.speedX = -speed;
        break;
    case 38:
        // up arrow 
        sprite.setSprite("walk_up");
        sprite.speedY -= speed;
        break;
    case 39:
        // right arrow
        sprite.setSprite("walk_right");
        sprite.speedX += speed;
        break;
    case 40:
        // down arrow 
        sprite.setSprite("walk_down");
        sprite.speedY += speed;
        break;
    default:
        break;
    }
};

canvas.onkeyup = function(e) {
    sprite.setSprite("idle");
    sprite.speedX = 0;
    sprite.speedY = 0;
}

var image = new Image();

image.onload = function() {
    sprite = new Character({
        mapWidth: canvas.width,
        mapHeight: canvas.height,
        image: image,
        frameWidth: 32,
        frameHeight: 48,
        interval: 100,
        left: 10,
        top: 10,
    });

    sprite.addSprite({
        name: "idle",
        startFrame: 0,
        framesCount: 1
    });

    sprite.addSprite({
        name: "walk_down",
        startFrame: 0,
        framesCount: 4
    });

    sprite.addSprite({
        name: "walk_left",
        startFrame: 4,
        framesCount: 4
    });
    sprite.addSprite({
        name: "walk_right",
        startFrame: 8,
        framesCount: 4
    });
    sprite.addSprite({
        name: "walk_up",
        startFrame: 12,
        framesCount: 4
    });
    sprite.setSprite("walk_left");
    setInterval(function() {
        sprite.update();
        canvas.width = canvas.width;
        sprite.draw(context);
    }, 1000 / 60);
};

image.src = 'http://yinyangit.files.wordpress.com/2012/05/jasperrun.png';
// CHARACTER

function Character(data) {

    this.mapWidth = data.mapWidth;
   ...