From e5e8185b7f4c3ece9891920e3f79c061898b7b1c Mon Sep 17 00:00:00 2001 From: Luiz Bills Date: Fri, 25 Oct 2024 00:23:37 -0300 Subject: [PATCH] add Litecanvas --- package.json | 1 + src/litecanvas.html | 13 ++++++ src/partials/header.html | 1 + src/scripts/litecanvas.js | 85 +++++++++++++++++++++++++++++++++++++++ 4 files changed, 100 insertions(+) create mode 100644 src/litecanvas.html create mode 100644 src/scripts/litecanvas.js diff --git a/package.json b/package.json index ed5872d..78d35c3 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "hilojs": "^2.0.2", "kaboom": "^2000.2.10", "kontra": "^8.0.0", + "litecanvas": "0.66.4", "melonjs": "^14.5.0", "phaser": "^3.55.2", "pixi.js": "^7.1.0", diff --git a/src/litecanvas.html b/src/litecanvas.html new file mode 100644 index 0000000..ab368c5 --- /dev/null +++ b/src/litecanvas.html @@ -0,0 +1,13 @@ + + + {{#> head }} Canvas — JS Game Rendering Benchmark {{/head}} + + {{> header }} +
+ {{> container }} + +
+ {{> footer }} + + + diff --git a/src/partials/header.html b/src/partials/header.html index 9405a48..3f1c486 100644 --- a/src/partials/header.html +++ b/src/partials/header.html @@ -9,6 +9,7 @@ Phaser Three.js Pixi.js + Litecanvas Canvas DOM diff --git a/src/scripts/litecanvas.js b/src/scripts/litecanvas.js new file mode 100644 index 0000000..927fae3 --- /dev/null +++ b/src/scripts/litecanvas.js @@ -0,0 +1,85 @@ +import Engine from './engine.js'; +import litecanvas from 'litecanvas'; + +function init() {} + +class LitecanvasEngine extends Engine { + constructor() { + super(); + } + init() { + super.init(); + + // Clear the canvas + this.canvas.innerHTML = ''; + window.cancelAnimationFrame(this.request); + + // Start the Litecanvas + if (!this.engine) { + this.engine = litecanvas({ + canvas: this.canvas, + width: this.width, + height: this.height, + autoscale: false, + + // disable the built-in game loop + animate: false, + loop: {}, + global: false, + }); + } + + // Load the sprite + if (this.type === 'sprite') { + this.sprite = new Image(); + this.sprite.src = 'sprite.png'; + } + + // Particle creation + const particles = new Array(this.count); + const rnd = [1, -1]; + for (let i = 0; i < this.count; i++) { + const size = 10 + Math.random() * 80; + const x = Math.random() * this.width; + const y = Math.random() * (this.height - size); + const [dx, dy] = [ + 3 * Math.random() * rnd[Math.floor(Math.random() * 2)], + 3 * Math.random() * rnd[Math.floor(Math.random() * 2)], + ]; + particles[i] = { x, y, size: size, dx, dy }; + } + this.particles = particles; + } + render() { + // Clear the canvas + this.engine.cls(); + + // Particle animation + const particles = this.particles; + for (let i = 0; i < this.count; i++) { + const r = particles[i]; + r.x -= r.dx; + r.y -= r.dy; + if (r.x + r.size < 0) r.dx *= -1; + else if (r.y + r.size < 0) r.dy *= -1; + if (r.x > this.width) r.dx *= -1; + else if (r.y > this.height) r.dy *= -1; + if (this.type === 'sprite') { + if (this.sprite.complete) { + this.engine.image(r.x, r.y, this.sprite); + } + } else { + if (this.type === 'fill') this.engine.circfill(r.x, r.y, r.size, 3); + if (this.type != 'sprite') this.engine.circ(r.x, r.y, r.size, 1); + } + } + + this.fpsmeter.tick(); + this.request = window.requestAnimationFrame(() => this.render()); + } +} + +document.addEventListener('DOMContentLoaded', () => { + const engine = new LitecanvasEngine(); + engine.render(); +});