JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.createjs.com/createjs-2013.12.12.min.js"></script>
<script src="http://cdn.craig.is/js/mousetrap/mousetrap.min.js"></script>
<div>
<canvas id="MagicaFighter" width="600" height="300"></canvas>
<p>Developed by <a href="http://jemiloii.deviantart.com/">JemiloII</a>, art from <a href="http://konbe.deviantart.com/">Konbe</a>. Move Left and Right with A and D</p>
</div>
CSS
*{
margin: 0;
padding: 0;
}
.canvas{
width: 600px;
height: 300px;
margin: 0 auto;
border: 1px solid black;
}
JavaScript
var stage;
var canvasWidth;
var canvasHeight;
var background;
var right;
var speed;
function init() {
// Console Credits //
console.log('Magica HTML5 Fighter by @jemiloii');
var canvas = document.getElementById('MagicaFighter');
canvasWidth = canvas.width;
canvasHeight = canvas.height;
stage = new createjs.Stage(canvas);
/* BACKGROUND */
background = new createjs.Bitmap("http://th06.deviantart.net/fs70/PRE/i/2010/269/9/5/anime_background__country_side_by_azuki_sato-d2zi3uu.jpg");
stage.addChild(background);
background.regX = 50;
background.regY = 50;
background.scaleX = 9/10;
background.scaleY = 9/10;
background.y = -50;
stage.update();
var dataSayaka = {
images: ["http://i.imgur.com/rxDkp2Q.png"],
frames: {width:133, height:139, regX: 50, regY:50},
animations: {runRight:[0,1,2,3,4,5,6,7, "runRight"]}
};
var spriteSheetSayaka = new createjs.SpriteSheet(dataSayaka);
var animationSayaka = new createjs.Sprite(spriteSheetSayaka, "runRight");
sayaka = new createjs.Sprite(spriteSheetSayaka, animationSayaka);
stage.addChild(sayaka);
sayaka.y = canvasHeight-115;
createjs.Ticker.addEventListener("tick", handleTick);
}
function moveRight(){
var speed = 20;
sayaka.x += speed;
sayaka.scaleX= 1;
}
function moveLeft(){
var speed = 20;
sayaka.x -= speed;
sayaka.scaleX= -1;
}
Mousetrap.bind('a', function(){moveLeft();}, 'keydown');
Mousetrap.bind('d', function(){moveRight();}, 'keydown');
function handleTick(event) {
stage.update();
}
$(function(){
init();
});