Hi all…
I am using integration between react and phaser,
I want to go to next component using “this.props.history.push(”/") because I want to go to another react component. What should I do?
here my code,
if (this.state.initialTime <= 0) {
this.state.gameover = true
console.log("time's up")
this.timeText.setText("0")
this.graph = this.add.graphics({
fillStyle: {
color: 0x000000,
alpha: 0.1
}
})
this.rect = new Phaser.Geom.Rectangle(0, 0, 700, 1000);
this.graph.fillRectShape(this.rect)
this.gameOverText.visible = true
this.props.history.push("/didyouknow")
} else {
this.timeText.setText(this.state.initialTime);
}
I don’t know how you’re putting your phaser game in the page, but if you aren’t doing anything special then it won’t have a reference to “props” inside of a scene.
If you need access to whatever is passed into the props as history, then you’ll need to pass that through to phaser somehow, it won’t be there magically.
@snowbillr
in the onEvent function, I make function ‘nextPage’. I want to direct to other react component, but I can’t .
I am using phaser in react like this,
import Phaser from "phaser";
import React, {Component} from "react";
export class Scene extends Component {
state = {
score: 0,
initialTime: 5,
gameover: false
}
componentDidMount = () => {
this.game = new Phaser.Game({
type: Phaser.AUTO,
width: 700,
height: 1000,
backgroundColor: '0x444444',
parent: 'scene',
scene: [Scene],
physics: {
default: 'arcade',
arcade: {
debug: false,
}
}
})
}
nextPage = () => {
this.props.history.push("/didyouknow")
}
render() {
return (
<div id="scene">
</div>
)
}
preload () {
}
create () {
function onEvent ()
{
this.state.initialTime -= 1;
if (this.state.initialTime <= 0) {
this.state.gameover = true
this.timeText.setText("0")
setTimeout(()=>this.nextPage(),500)
} else {
this.timeText.setText(this.state.initialTime);
}
}