A small (751b) canvas wrapper to quickly make animations.
Github
<canvas id="canvas1"></canvas>
<script>
let canvas1 = tarp('#canvas1');
canvas1.render = (canvas, context)=>{
context.fillStyle = '#ff0000';
context.beginPath();
context.rect(20, 20, 150, 100);
context.fill();
}
</script>
<canvas id="canvas2"></canvas>
<script>
let object = {
color: '#ff0000',
size: {x: 20, y: 20, w: 150, h: 100}
};
let moveRight = setInterval(()=>{
object.size.x++;
if(object.size.x > 100){
clearInterval(moveRight)
}
}, 16);
let canvas2 = tarp('#canvas2');
canvas2.render = (canvas, context)=>{
context.fillStyle = object.color;
context.beginPath();
context.rect(object.size.x, object.size.y, object.size.w, object.size.h);
context.fill();
}
</script>
<canvas id="canvas3"></canvas>
<script>
let objects = [
{name: 'red box', color: '#ff0000', size: {x: 20, y: 20, w: 40, h: 40}},
{name: 'green box', color: '#00ff00', size: {x: 100, y: 20, w: 40, h: 40}},
{name: 'blue box', color: '#0000ff', size: {x: 100, y: 100, w: 40, h: 40}},
{name: 'purple box', color: '#ff00ff', size: {x: 20, y: 100, w: 40, h: 40}},
];
let player = objects[0];
document.body.addEventListener('keydown', (event)=>{
switch(event.key){
case 'w': case 'ArrowUp': player.size.y-= 5; break;
case 'a': case 'ArrowLeft': player.size.x-= 5; break;
case 's': case 'ArrowDown': player.size.y+= 5; break;
case 'd': case 'ArrowRight': player.size.x+= 5; break;
}
});
let canvas3 = tarp('#canvas3');
canvas3.render = (canvas, context)=>{
objects.forEach((object)=>{
context.fillStyle = object.color;
context.beginPath();
context.rect(object.size.x, object.size.y, object.size.w, object.size.h);
context.fill();
});
}
</script>
<canvas id="canvas4"></canvas>
<script>
// sprite
let sprite = {
img: tarpSprite('./tarp-sprite.png'),
sprites: {
walkingDown: [
{sx: 0, sy: 0, sw: 20, sh: 20, dx: 0, dy: 0, dw: 80, dh: 80,},
{sx:20, sy: 0, sw: 20, sh: 20, dx: 0, dy: 0, dw: 80, dh: 80,},
{sx:40, sy: 0, sw: 20, sh: 20, dx: 0, dy: 0, dw: 80, dh: 80,},
],
walkingLeft: [
{sx: 0, sy:20, sw: 20, sh: 20, dx: 0, dy: 0, dw: 80, dh: 80,},
{sx:20, sy:20, sw: 20, sh: 20, dx: 0, dy: 0, dw: 80, dh: 80,},
{sx:40, sy:20, sw: 20, sh: 20, dx: 0, dy: 0, dw: 80, dh: 80,},
],
walkingRight: [
{sx: 0, sy:40, sw: 20, sh: 20, dx: 0, dy: 0, dw: 80, dh: 80,},
{sx:20, sy:40, sw: 20, sh: 20, dx: 0, dy: 0, dw: 80, dh: 80,},
{sx:40, sy:40, sw: 20, sh: 20, dx: 0, dy: 0, dw: 80, dh: 80,},
],
walkingUp: [
{sx: 0, sy:60, sw: 20, sh: 20, dx: 0, dy: 0, dw: 80, dh: 80,},
{sx:20, sy:60, sw: 20, sh: 20, dx: 0, dy: 0, dw: 80, dh: 80,},
{sx:40, sy:60, sw: 20, sh: 20, dx: 0, dy: 0, dw: 80, dh: 80,},
],
},
spriteIndex: 0,
spriteSelected: 'walkingUp',
};
// key presses
document.body.addEventListener('keydown', (event)=>{
switch(event.key){
case 'w':
case 'ArrowUp': sprite.spriteSelected = 'walkingUp'; break;
case 'a':
case 'ArrowLeft': sprite.spriteSelected = 'walkingLeft'; break;
case 's':
case 'ArrowDown': sprite.spriteSelected = 'walkingDown'; break;
case 'd':
case 'ArrowRight': sprite.spriteSelected = 'walkingRight'; break;
}
});
// loop through sprite tiles
function changeAnimation(){
setTimeout(()=>{
sprite.spriteIndex++;
if(sprite.spriteIndex >= sprite.sprites[sprite.spriteSelected].length){
sprite.spriteIndex = 0
}
changeAnimation()
}, 100)
}
changeAnimation();
// render
let canvas4 = tarp('#canvas4');
canvas4.render = (canvas, context)=>{
context.drawImage(
sprite.img,
sprite.sprites[sprite.spriteSelected][sprite.spriteIndex].sx,
sprite.sprites[sprite.spriteSelected][sprite.spriteIndex].sy,
sprite.sprites[sprite.spriteSelected][sprite.spriteIndex].sw,
sprite.sprites[sprite.spriteSelected][sprite.spriteIndex].sh,
sprite.sprites[sprite.spriteSelected][sprite.spriteIndex].dx,
sprite.sprites[sprite.spriteSelected][sprite.spriteIndex].dy,
sprite.sprites[sprite.spriteSelected][sprite.spriteIndex].dw,
sprite.sprites[sprite.spriteSelected][sprite.spriteIndex].dh
);
};
</script>
<canvas id="canvas5"></canvas>
<script>
let sprites = [
{
name: 'Blue Pumpkin',
img: tarpSprite('./tarp-sprite-1.png'),
sprites: {
walkingDown: [
{sx: 0, sy: 0, sw: 20, sh: 20, dx: 0, dy: 0, dw: 80, dh: 80,},
{sx:20, sy: 0, sw: 20, sh: 20, dx: 0, dy: 0, dw: 80, dh: 80,},
{sx:40, sy: 0, sw: 20, sh: 20, dx: 0, dy: 0, dw: 80, dh: 80,},
],
walkingLeft: [
{sx: 0, sy:20, sw: 20, sh: 20, dx: 0, dy: 0, dw: 80, dh: 80,},
{sx:20, sy:20, sw: 20, sh: 20, dx: 0, dy: 0, dw: 80, dh: 80,},
{sx:40, sy:20, sw: 20, sh: 20, dx: 0, dy: 0, dw: 80, dh: 80,},
],
walkingRight: [
{sx: 0, sy:40, sw: 20, sh: 20, dx: 0, dy: 0, dw: 80, dh: 80,},
{sx:20, sy:40, sw: 20, sh: 20, dx: 0, dy: 0, dw: 80, dh: 80,},
{sx:40, sy:40, sw: 20, sh: 20, dx: 0, dy: 0, dw: 80, dh: 80,},
],
walkingUp: [
{sx: 0, sy:60, sw: 20, sh: 20, dx: 0, dy: 0, dw: 80, dh: 80,},
{sx:20, sy:60, sw: 20, sh: 20, dx: 0, dy: 0, dw: 80, dh: 80,},
{sx:40, sy:60, sw: 20, sh: 20, dx: 0, dy: 0, dw: 80, dh: 80,},
],
},
spriteIndex: 0,
spriteSelected: 'walkingUp',
},
{
name: 'Red Pumpkin',
img: tarpSprite('./tarp-sprite-2.png'),
sprites: {
walkingDown: [
{sx: 0, sy: 0, sw: 20, sh: 20, dx:90, dy: 0, dw: 80, dh: 80,},
{sx:20, sy: 0, sw: 20, sh: 20, dx:90, dy: 0, dw: 80, dh: 80,},
{sx:40, sy: 0, sw: 20, sh: 20, dx:90, dy: 0, dw: 80, dh: 80,},
],
walkingLeft: [
{sx: 0, sy:20, sw: 20, sh: 20, dx:90, dy: 0, dw: 80, dh: 80,},
{sx:20, sy:20, sw: 20, sh: 20, dx:90, dy: 0, dw: 80, dh: 80,},
{sx:40, sy:20, sw: 20, sh: 20, dx:90, dy: 0, dw: 80, dh: 80,},
],
walkingRight: [
{sx: 0, sy:40, sw: 20, sh: 20, dx:90, dy: 0, dw: 80, dh: 80,},
{sx:20, sy:40, sw: 20, sh: 20, dx:90, dy: 0, dw: 80, dh: 80,},
{sx:40, sy:40, sw: 20, sh: 20, dx:90, dy: 0, dw: 80, dh: 80,},
],
walkingUp: [
{sx: 0, sy:60, sw: 20, sh: 20, dx:90, dy: 0, dw: 80, dh: 80,},
{sx:20, sy:60, sw: 20, sh: 20, dx:90, dy: 0, dw: 80, dh: 80,},
{sx:40, sy:60, sw: 20, sh: 20, dx:90, dy: 0, dw: 80, dh: 80,},
],
},
spriteIndex: 0,
spriteSelected: 'walkingUp',
},
];
document.body.addEventListener('keydown', (event)=>{
switch(event.key){
case 'w':
case 'ArrowUp':
sprites[0].spriteSelected = 'walkingUp';
sprites[1].spriteSelected = 'walkingUp';
break;
case 'a':
case 'ArrowLeft':
sprites[0].spriteSelected = 'walkingLeft';
sprites[1].spriteSelected = 'walkingLeft';
break;
case 's':
case 'ArrowDown':
sprites[0].spriteSelected = 'walkingDown';
sprites[1].spriteSelected = 'walkingDown';
break;
case 'd':
case 'ArrowRight':
sprites[0].spriteSelected = 'walkingRight';
sprites[1].spriteSelected = 'walkingRight';
break;
}
});
function changeAnimation(){
setTimeout(()=>{
sprites.forEach((sprite)=>{
sprite.spriteIndex++;
if(sprite.spriteIndex >= sprite.sprites[sprite.spriteSelected].length){
sprite.spriteIndex = 0
}
});
changeAnimation()
}, 100)
}
// render
let canvas5 = tarp('#canvas5');
canvas5.render = (canvas, context)=>{
sprites.forEach((sprite)=>{
context.drawImage(
sprite.img,
sprite.sprites[sprite.spriteSelected][sprite.spriteIndex].sx,
sprite.sprites[sprite.spriteSelected][sprite.spriteIndex].sy,
sprite.sprites[sprite.spriteSelected][sprite.spriteIndex].sw,
sprite.sprites[sprite.spriteSelected][sprite.spriteIndex].sh,
sprite.sprites[sprite.spriteSelected][sprite.spriteIndex].dx,
sprite.sprites[sprite.spriteSelected][sprite.spriteIndex].dy,
sprite.sprites[sprite.spriteSelected][sprite.spriteIndex].dw,
sprite.sprites[sprite.spriteSelected][sprite.spriteIndex].dh
);
})
};
</script>