source-code/
break-the-web
Public
javascript33 lines1 KB
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
page.on('console', msg => {
console.log(`PAGE LOG [${msg.type()}]:`, msg.text());
if (msg.type() === 'error') {
console.log('Error details:', msg.args().map(a => a.toString()));
}
});
page.on('pageerror', err => {
console.log('PAGE ERROR:', err.message);
});
await page.goto('http://localhost:8080/');
console.log('Page loaded. Clicking #game-box...');
await page.click('#game-box');
console.log('Waiting 5 seconds for Phaser to start...');
await new Promise(r => setTimeout(r, 5000));
const canvasExists = await page.evaluate(() => {
const c = document.querySelector('canvas');
return c ? { width: c.width, height: c.height, display: c.style.display } : null;
});
console.log('Canvas element:', canvasExists);
await browser.close();
})();
About
Interact with the web page itself using HTML5 Drag-and-Drop to pull inputs and images directly into the Phaser physics engine. Alter the website state through bi-directional communication between React and Phaser, unlocking a glitchy horror mode. The game is built using React, Phaser 3, Zustand for state management, and Vanilla CSS.
linknre.codes
ReactPhaser 3TypeScriptZustandVite