Penvas is a light 2D video game framework. It's free and open-source. Install it with npm and use bin file from dist/penvas.js.
npm install --save penvas
<!DODCTYPE html> <html lang="em"> <head> <meta charset="utf-8"/> <script src="node_modules/penvas/dist/penvas.js" type="text/javascript"></script> </head> <body></body> </html>
That's all :D Enjoy <3
You can also use classes files into a babel javascript application. For example : import { Application } from 'penvas/src/application';
var layer = { create: function() { this.cube = new Model(10, 10, 100, 100); }, step: function() { this.cube.x += 1; if (this.cube.x > this.width) { this.cube.x = -this.cube.width; } }, render: function() { this.clearLayer(); this.ctx.save(); this.ctx.beginPath(); this.ctx.fillRect(this.cube.x, this.cube.y, this.cube.width, this.cube.height); this.ctx.closePath(); this.ctx.restore(); } }; var app = new Appliction(); app.addLayer(layer, 'home');