Skip to content

Instantly share code, notes, and snippets.

View luizbills's full-sized avatar
I may be slow to respond.

Luiz Bills luizbills

I may be slow to respond.
View GitHub Profile
@luizbills
luizbills / code.html
Created February 24, 2025 16:52
How to make an html5 canvas center horizontally and vertically
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<style>
html,
body {
height: 100%;
}
@luizbills
luizbills / runn
Last active February 23, 2025 14:34
Bash script to run a command N times
#!/usr/bin/env bash
for (( i = 0; i < $1; i++ )); do
eval "${@:2}"
done
@luizbills
luizbills / code.js
Last active June 4, 2025 14:05
JavaScript Game Loop
// based on https://www.gafferongames.com/post/fix_your_timestep/
const TARGET_FPS = 60
const dt = 1/TARGET_FPS
const eventData = { deltaTime: dt, elapsed: 0 }
let _accumulated = 0
let _lastFrameTime = performance.now()
requestAnimationFrame(gameLoop);
/**
@luizbills
luizbills / code.js
Last active June 25, 2025 19:32
Simple shmup demo in Litecanvas
const gameScale = 2
litecanvas({
width: 640,
height: 480,
autoscale: false,
})
// Art Code: 8x8/# # 6 6 6 6 # # # # 6 6 6 6 # # # # 6 6 6 6 # # 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 # # 6 6 6 6 6 6 # # 6 6 6
const ship = paint(8, 8, [
@luizbills
luizbills / code.js
Created February 7, 2025 18:47
Tutorial: Simple Sprite Frame Animation
let anim = {}
litecanvas()
function init() {
// each frame of the animation
// for this example, lets create 3 circles
anim.frames = [
createFrame(3),
createFrame(4),
@luizbills
luizbills / code.js
Created February 3, 2025 18:43
Litecanvas - Draw a rect using dithering pattern
/**
* @version 1.0.0
*/
function rectdither(x, y, w, h, color1, color2) {
for (let dy = 0; dy < h; dy++) {
for (let dx = 0; dx < w; dx++) {
const c = (dx + dy) % 2 === 0 ? color1 : color2
rectfill(x + dx, y + dy, 1, 1, c)
}
}
@luizbills
luizbills / code.js
Last active July 12, 2025 15:26
Litecanvas Plugin: LOSPEC color palette loader
function pluginLospecPaletteLoader(engine, { cache = false }) {
if (!engine.LOADING) {
engine.setvar("LOADING", 0);
}
const cachePrefix = "lospec-palette-";
const updateColors = (palette) => {
engine.pal(palette.map((c) => '#' + c))
engine.setvar("PALETTE_SIZE", palette.length);
};
@luizbills
luizbills / code.js
Last active July 12, 2025 15:32
Simple Fourway movement to litecanvas games with WASD keys
let x, y, speed
litecanvas()
function init() {
x = W/2
y = H/2
speed = 250
}
@luizbills
luizbills / code.js
Last active June 26, 2025 20:16
Plugin to reset a litecanvas' instance
/**
* @version 1.2.0
* @see https://gist.github.com/luizbills/12ee7520d89e61109897010df8d3a5a5
*/
function pluginReset(engine, config = {}) {
return {
reset(hard = false) {
const settings = engine.stat(0)
settings.canvas = engine.canvas()
engine.quit()
@luizbills
luizbills / readme.md
Last active June 10, 2025 23:59
Tutorial: How to use `stats.js` with Litecanvas

How to use stats.js with Litecanvas

The stats.js library provides a simple info box that will help you monitor your code performance.

image