source-code/
break-the-web
Public
typescript36 lines893 B
import { Scene } from 'phaser';
export class Game extends Scene
{
camera: Phaser.Cameras.Scene2D.Camera;
background: Phaser.GameObjects.Image;
msg_text : Phaser.GameObjects.Text;
constructor ()
{
super('Game');
}
create ()
{
this.camera = this.cameras.main;
this.camera.setBackgroundColor(0x00ff00);
this.background = this.add.image(512, 384, 'background');
this.background.setAlpha(0.5);
this.msg_text = this.add.text(512, 384, 'Make something fun!\nand share it with us:\nsupport@phaser.io', {
fontFamily: 'Arial Black', fontSize: 38, color: '#ffffff',
stroke: '#000000', strokeThickness: 8,
align: 'center'
});
this.msg_text.setOrigin(0.5);
this.input.once('pointerdown', () => {
this.scene.start('GameOver');
});
}
}
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