https://gamedevacademy.org/creating-mobile-games-with-phaser-3-and-cordova/
PARA QUE FUNCIONE EN ANDROID, LA RUTA A PHASER TIENE QUE SER LOCAL!!
Ej de codigo:
<!DOCTYPE html>
<html>
<head>
<script src="./node_modules/phaser/dist/phaser.js"></script>
</head>
<body>
<script>
var config = {
type: Phaser.AUTO,
width: 400,
height: 600,
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
var bmd;
var tooltip;
var sprite;
var pelota;
var rojo_strong;
var rojo_soft;
var verde_strong;
var verde_soft;
var amarillo_strong;
var amarillo_soft;
var boton_comenzar;
//------------------
var ensecuencia = false;
var finsecuencia = false;
var ind = 0;
var vecX = new Array();
var fin = false;
var interv;
var intervInicial;
var enjuego = false;
var indclick = 0;
const TIEMPO_ON = 300;
ensecuencia = false;
habilitar(false);
//------------------
function preload ()
{
this.load.image('pelota', 'assets/pelota.png');
this.load.image('rojo_strong', 'assets/rojo_strong.png');
this.load.image('rojo_soft', 'assets/rojo_soft.png');
this.load.image('verde_strong', 'assets/verde_strong.png');
this.load.image('verde_soft', 'assets/verde_soft.png');
this.load.image('amarillo_strong', 'assets/amarillo_strong.png');
this.load.image('amarillo_soft', 'assets/amarillo_soft.png');
this.load.image('azul_strong', 'assets/azul_strong.png');
this.load.image('azul_soft', 'assets/azul_soft.png');
this.load.image('naranja_strong', 'assets/naranja_strong.png');
this.load.image('naranja_soft', 'assets/naranja_soft.png');
this.load.image('magenta_strong', 'assets/magenta_strong.png');
this.load.image('magenta_soft', 'assets/magenta_soft.png');
this.load.image('boton_comenzar', 'assets/bitmap.png');
}
function create ()
{
var xSprite = 200;
pelota = this.add.sprite(xSprite, 300, 'pelota');
rojo_soft = this.add.sprite(xSprite, 300, 'rojo_soft').setInteractive({ pixelPerfect: true });
rojo_strong = this.add.sprite(xSprite, 300, 'rojo_strong');
verde_soft = this.add.sprite(xSprite, 300, 'verde_soft').setInteractive({ pixelPerfect: true });
verde_strong = this.add.sprite(xSprite, 300, 'verde_strong');
amarillo_soft = this.add.sprite(xSprite, 300, 'amarillo_soft').setInteractive({ pixelPerfect: true });
amarillo_strong = this.add.sprite(xSprite, 300, 'amarillo_strong');
azul_soft = this.add.sprite(xSprite, 300, 'azul_soft').setInteractive({ pixelPerfect: true });
azul_strong = this.add.sprite(xSprite, 300, 'azul_strong');
naranja_soft = this.add.sprite(xSprite, 300, 'naranja_soft').setInteractive({ pixelPerfect: true });
naranja_strong = this.add.sprite(xSprite, 300, 'naranja_strong');
magenta_soft = this.add.sprite(xSprite, 300, 'magenta_soft').setInteractive({ pixelPerfect: true });
magenta_strong = this.add.sprite(xSprite, 300, 'magenta_strong');
boton_comenzar = this.add.sprite(xSprite, 378, 'boton_comenzar').setInteractive({ pixelPerfect: true });
rojo_strong.visible = false;
verde_strong.visible = false;
amarillo_strong.visible = false;
azul_strong.visible = false;
naranja_strong.visible = false;
magenta_strong.visible = false;
rojo_soft.on('pointerdown', function(pointer){
if (enjuego) {
selecciono('6');
rojo_strong.visible = true;
setTimeout(function() {
rojo_strong.visible = false;
}, TIEMPO_ON);
}
});
verde_soft.on('pointerdown', function(pointer){
if (enjuego) {
selecciono('1');
verde_strong.visible = true;
setTimeout(function() {
verde_strong.visible = false;
}, TIEMPO_ON);
}
});
amarillo_soft.on('pointerdown', function(pointer){
if (enjuego) {
selecciono('2');
amarillo_strong.visible = true;
setTimeout(function() {
amarillo_strong.visible = false;
}, TIEMPO_ON);
}
});
azul_soft.on('pointerdown', function(pointer){
if (enjuego) {
selecciono('3');
azul_strong.visible = true;
setTimeout(function() {
azul_strong.visible = false;
}, TIEMPO_ON);
}
});
naranja_soft.on('pointerdown', function(pointer){
if (enjuego) {
selecciono('4');
naranja_strong.visible = true;
setTimeout(function() {
naranja_strong.visible = false;
}, TIEMPO_ON);
}
});
magenta_soft.on('pointerdown', function(pointer){
if (enjuego) {
selecciono('5');
magenta_strong.visible = true;
setTimeout(function() {
magenta_strong.visible = false;
}, TIEMPO_ON);
}
});
boton_comenzar.on('pointerdown', function(pointer){
if (!enjuego) {
start();
}
});
}
function update ()
{
}
function comenzar() {
Math.random();
habilitar(true);
agregar();
secuenciar();
}
function start() {
Math.random();
habilitar(true);
agregar();
secuenciar();
}
function habilitar(habil) {
boton_comenzar.visible = !habil;
enjuego = habil;
}
function iluminar(color, mantener=false) {
if (mantener)
t = TIEMPO_ON * 4;
else
t = TIEMPO_ON;
if (color == 1) {
verde_strong.visible = true;
setTimeout(function() {
verde_strong.visible = false;
}, t);
}
if (color == 2) {
amarillo_strong.visible = true;
setTimeout(function() {
amarillo_strong.visible = false;
}, t);
}
if (color == 3) {
azul_strong.visible = true;
setTimeout(function() {
azul_strong.visible = false;
}, t);
}
if (color == 4) {
naranja_strong.visible = true;
setTimeout(function() {
naranja_strong.visible = false;
}, t);
}
if (color == 5) {
magenta_strong.visible = true;
setTimeout(function() {
magenta_strong.visible = false;
}, t);
}
if (color == 6) {
rojo_strong.visible = true;
setTimeout(function() {
rojo_strong.visible = false;
}, t);
}
}
function agregar() {
vecX.push(Math.floor(Math.random() * 6) + 1);
}
function secuenciar() {
iluminar(vecX[ind]);
ind++;
if (ind > vecX.length-1)
{
ensecuencia = false;
ind = 0;
return;
}
interv = setInterval(function() {
iluminar(vecX[ind]);
ind++;
if (ind > vecX.length-1)
{
clearInterval(interv);
ensecuencia = false;
ind = 0;
}
}, 1000);
}
function selecciono(numero)
{
if (!enjuego)
return;
if (vecX[indclick] == numero)
{
indclick++
if (indclick > vecX.length-1)
{
indclick = 0;
setTimeout(function() {
agregar();
secuenciar();
}, 1000);
}
}
else {
iluminar(vecX[indclick], true);
detener();
}
}
function detener() {
clearInterval(interv);
clearInterval(intervInicial);
vecX.length = 0;
ind = 0;
indclick = 0;
habilitar(false);
}
</script>
</body>
</html>
