Exercice:Game File ou Face
App.js
import React from 'react';
import './App.css';
class App extends React.Component{
constructor(props)
{
super(props);
this.images=['images/Rien.png','images/Pile.png','images/Face.png']
this.state={
points:0,
indexRandom:(Math.floor(Math.random()*2)+1),
lechoixduRandom:this.images[0],
disable:""
}
}
//Initialer le jeux
initialerGame=()=>{
this.setState(
{
indexRandom:(Math.floor(Math.random()*2)+1),
lechoixduRandom:"images/Rien.png",
disable:""
}
)
}
//Récupérer le choix de l'utilisateur et Vérifier
choixUtilisateur=(e)=>
{
this.setState({
disable:"disabled"
})
let choixUser=e.target.name;
switch(choixUser)
{
//Utilisateur a choisé Pile
case 'pile':
//Vérifier le choix de Random
if(this.state.indexRandom==1) //1=>Pile.png selon le tableux image
{
this.setState(
{
points:this.state.points+1,
lechoixduRandom:this.images[1]
}
)
}
//le choix de Random est Face.png
else
{
this.setState(
{
points:this.state.points-1
}
)
}
break;
//Utilisateur a choisé Face
case 'face':
//Vérifier le choix de Random
if(this.state.indexRandom==2) //2=>Face.png selon le tableux image
{
this.setState(
{
points:this.state.points+1,
lechoixduRandom:this.images[2]
}
)
}
//le choix de Random est Face.png
else
{
this.setState(
{
points:this.state.points-1
}
)
}
break;
}
//intialiser le jeux aprés 3seconds
setTimeout(this.initialerGame,3000);
}
render()
{
return (
<div>
<fieldset>
<legend>Pile Face Game:{this.state.indexRandom}</legend>
<img src={this.state.lechoixduRandom}className="maxWidth"/>
<table>
<tr>
<td><button disabled={this.state.disable} name="pile" onClick={this.choixUtilisateur} className='width100'>Pile</button></td>
<td><button disabled={this.state.disable} name="face" onClick={this.choixUtilisateur} className='width100'>Face</button></td>
</tr>
</table>
<h1><center>Points:{this.state.points}</center></h1>
</fieldset>
</div>
);
}
}
export default App;
