Dave's Site

My Personal Web Presence

18 October 2022

JavaScript in Jekyll

by DL

Testing JS with PixiJS

let canvas_width = 640;
let canvas_height = 360;

// Create the application helper and add its render target to the page
let app = new PIXI.Application({ width: canvas_width, height: canvas_height });
document.getElementById("pixijs_div").appendChild(app.view);

// Create the sprite and add it to the stage
let sprite = PIXI.Sprite.from('/assets/images/ship.png');
let sprite_half_width = 88;
let sprite_x_center = -192.0;
let sprite_canvas_x_center = sprite_x_center + (canvas_width/2);
let x_delta_width = (canvas_width/2) - sprite_half_width;

app.stage.addChild(sprite);

// Add a ticker callback to move the sprite back and forth
let elapsed = 0.0;
app.ticker.add((delta) => {
elapsed += delta;
sprite.x = sprite_canvas_x_center + Math.cos(elapsed/15.0) * x_delta_width;
});
tags: JavaScript - PixiJS
categories: JavaScript - jekyll