448 líneas
13 KiB
JavaScript
448 líneas
13 KiB
JavaScript
var userName = getParam("username") ? getParam("username") : getUserRamdom(),
|
|
channel = getParam("map") ? getParam("map") : "forest",
|
|
score = 0,
|
|
wx = window.innerWidth,
|
|
wy = window.innerHeight,
|
|
wx2 = window.innerWidth / 2,
|
|
wy2 = window.innerHeight / 2,
|
|
stateScale = wx < 1000 ? 0.5 : 1,
|
|
zoom = wx < 1000 ? 2 : 1,
|
|
scaleDivisor = wx < 1000 ? 1 : 2,
|
|
map,
|
|
scale = 0,
|
|
lives = 0,
|
|
direction = "down",
|
|
state = "stop",
|
|
position = {
|
|
x: 0,
|
|
y: 0
|
|
},
|
|
vx = 0,
|
|
vy = 0,
|
|
key = 0;
|
|
|
|
window.scrollTo(0, 1);
|
|
|
|
function run(session) {
|
|
$(document).ready(function () {
|
|
|
|
$("#chatInput").keypress(
|
|
e => {
|
|
if (e.which === 13) {
|
|
(async function () {
|
|
const message = $(e.currentTarget).val();
|
|
$(e.currentTarget).val("");
|
|
session.send(userName + " chat " + message);
|
|
}());
|
|
return false;
|
|
}
|
|
});
|
|
|
|
$(document).keydown(
|
|
e => {
|
|
if (e.which === 87) {
|
|
vy = 100;
|
|
key + 1;
|
|
}
|
|
if (e.which === 83) {
|
|
vy = -100;
|
|
key + 1;
|
|
}
|
|
if (e.which === 68) {
|
|
vx = -150;
|
|
key + 1;
|
|
}
|
|
if (e.which === 65) {
|
|
vx = 150;
|
|
key + 1;
|
|
};
|
|
});
|
|
|
|
$(document).keyup(
|
|
e => {
|
|
if (e.which === 87) {
|
|
vy = 0;
|
|
key -= 1;
|
|
}
|
|
if (e.which === 83) {
|
|
vy = 0;
|
|
key -= 1;
|
|
}
|
|
if (e.which === 68) {
|
|
vx = 0;
|
|
key -= 1;
|
|
}
|
|
if (e.which === 65) {
|
|
vx = 0;
|
|
key -= 1;
|
|
}
|
|
key = key > 0 ? key : 0;
|
|
});
|
|
|
|
// Cargamos variables
|
|
var Container = PIXI.Container,
|
|
autoDetectRenderer = PIXI.autoDetectRenderer,
|
|
loader = PIXI.loader,
|
|
resources = PIXI.loader.resources,
|
|
Sprite = PIXI.Sprite,
|
|
responsiveScale = 1,
|
|
maxFrame = 7,
|
|
af = 0,
|
|
df = 5, // Imagenes por segundo
|
|
stop = true,
|
|
msg = {},
|
|
touch;
|
|
|
|
scale = map.player.scale;
|
|
|
|
// Creamos el render (Esto lo cambiare)
|
|
var renderer = autoDetectRenderer(wx, wy);
|
|
|
|
// Lo añadimos
|
|
document.body.appendChild(renderer.view);
|
|
|
|
// Creamos la stage y le añadimos los eventos del raton
|
|
var stage = new Container();
|
|
|
|
stage.scale.set(wx < 1000 ? 0.5 : 1);
|
|
|
|
stage.interactive = true;
|
|
stage.on('mousedown', clickdown)
|
|
.on('mouseup', clickup)
|
|
.on('mouseupoutside', clickup)
|
|
.on('touchstart', clickdown)
|
|
.on('touchend', clickup)
|
|
.on('touchendoutside', clickup);
|
|
|
|
// Eventos del raton
|
|
function clickdown(e) {
|
|
af = 0;
|
|
state = "attack";
|
|
if (is_touch_device()) {
|
|
touch = e.data.global;
|
|
}
|
|
}
|
|
|
|
function clickup(e) {
|
|
af = 0;
|
|
state = "run";
|
|
}
|
|
|
|
// Caragmos, cetramos y añadimos el fondo.
|
|
var landscapeTexture = PIXI.Texture.fromImage(map.background.url),
|
|
texture = new PIXI.Texture(landscapeTexture),
|
|
background = new PIXI.Sprite(texture);
|
|
|
|
bx = (window.innerWidth / scaleDivisor) - (map.size.x / 2);
|
|
by = (window.innerHeight / scaleDivisor) - (map.size.y / 2);
|
|
background.position.x = bx;
|
|
background.position.y = by;
|
|
stage.addChild(background);
|
|
|
|
// Caragmos, cetramos y añadimos el frente.
|
|
if (map.front) {
|
|
var landscapeTexture2 = PIXI.Texture.fromImage(map.front.url),
|
|
texture2 = new PIXI.Texture(landscapeTexture2),
|
|
front = new PIXI.Sprite(texture2);
|
|
|
|
front.position.x = bx;
|
|
front.position.y = by;
|
|
}
|
|
|
|
|
|
//Ptexture = new PIXI.Texture(PlandscapeTexture);
|
|
|
|
// Caragmos y cetramos los objetos.
|
|
map.objects.map(function (element) {
|
|
element.landscapeTexture = PIXI.Texture.fromImage(element.url);
|
|
element.texture = new PIXI.Texture(element.landscapeTexture);
|
|
element.item = new PIXI.Sprite(element.texture);
|
|
element.item.position.x = bx;
|
|
element.item.position.y = by;
|
|
});
|
|
|
|
// Renderizamos la stage
|
|
renderer.render(stage);
|
|
renderer.view.style.position = "absolute";
|
|
renderer.view.style.display = "block";
|
|
renderer.autoResize = true;
|
|
renderer.resize(window.innerWidth, window.innerHeight);
|
|
loader.add("player", map.player.url).load(setup);
|
|
|
|
// Creamos marcador. Primero el estilo del texto depues el objeto, lo pocicionamos y lo agregamos.
|
|
var scoreStyle = new PIXI.TextStyle({
|
|
fontFamily: 'komtit',
|
|
fontSize: 36,
|
|
fill: ['#FFF1E1', '#FFF1E1'], // gradient
|
|
stroke: '#35130B',
|
|
strokeThickness: 10,
|
|
dropShadow: true,
|
|
dropShadowColor: '#724833',
|
|
dropShadowBlur: 4,
|
|
dropShadowAngle: Math.PI / 2,
|
|
dropShadowDistance: 3,
|
|
wordWrap: false,
|
|
wordWrapWidth: 440,
|
|
padding: 20
|
|
});
|
|
|
|
var scoreText = new PIXI.Text('Score: ', scoreStyle);
|
|
scoreText.x = 30;
|
|
scoreText.y = 20;
|
|
|
|
stage.addChild(scoreText);
|
|
|
|
var heartTexture = PIXI.Texture.fromImage('/img/gui/heart.png');
|
|
|
|
var heartTilingSprite = new PIXI.extras.TilingSprite(
|
|
heartTexture,
|
|
44 * lives,
|
|
37
|
|
);
|
|
heartTilingSprite.x = 35;
|
|
heartTilingSprite.y = 80;
|
|
heartTilingSprite.scale.set(0.75);
|
|
stage.addChild(heartTilingSprite);
|
|
|
|
// Cargamos el juegador
|
|
var player,
|
|
playerTexture,
|
|
playersName,
|
|
playersNameStyle;
|
|
|
|
function setup() {
|
|
playersNameStyle = new PIXI.TextStyle({
|
|
fontFamily: 'komtit',
|
|
fontSize: 24,
|
|
fill: ['#FFF1E1', '#FFF1E1'], // gradient
|
|
stroke: '#35130B',
|
|
strokeThickness: 5,
|
|
dropShadow: true,
|
|
dropShadowColor: '#724833',
|
|
dropShadowBlur: 4,
|
|
dropShadowAngle: Math.PI / 2,
|
|
dropShadowDistance: 1,
|
|
wordWrap: false,
|
|
wordWrapWidth: 440,
|
|
padding: 20
|
|
});
|
|
playersName = new PIXI.Text(userName, playersNameStyle);
|
|
|
|
playerTexture = loader.resources["player"].texture;
|
|
playerTexture.frame = map.player.sprite[state][direction][0];
|
|
player = new Sprite(playerTexture);
|
|
player.scale.set(scale);
|
|
player.x = window.innerWidth / scaleDivisor;
|
|
player.y = window.innerHeight / scaleDivisor;
|
|
|
|
playersName.scale.set(scale / map.player.scale);
|
|
playersName.x = player.x + (player.width / 2) - (playersName.width / 2);
|
|
playersName.y = player.y - (player.height / 6);
|
|
|
|
|
|
stage.addChild(player);
|
|
stage.addChild(playersName);
|
|
renderer.render(stage);
|
|
// Comienza el loop
|
|
gameLoop();
|
|
refreshScore();
|
|
}
|
|
|
|
function gameLoop() {
|
|
// Empieza el loop y carga las varibles
|
|
var mouse;
|
|
if (is_touch_device()) {
|
|
mouse = touch ? touch : {
|
|
x: 0,
|
|
y: 0
|
|
};
|
|
} else {
|
|
mouse = renderer.plugins.interaction.mouse.global;
|
|
}
|
|
|
|
// Cargamos la direcion del sprite y aplicamos los ajustes
|
|
direction = getDirection(mouse, wx, wy);
|
|
|
|
if (direction == "up" || direction == "down") {
|
|
maxFrame = 8;
|
|
df = 5;
|
|
}
|
|
if (direction == "left" || direction == "right") {
|
|
maxFrame = 6;
|
|
df = 8;
|
|
}
|
|
|
|
// Vemos que el personaje no tenga el raton encima (Parado)
|
|
if (player) {
|
|
if (mouse.y > wy2 - (player.height / 2) && mouse.y < wy2 + (player.height / 2) &&
|
|
mouse.x > wx2 - (player.width / 2) && mouse.x < wx2 + (player.width / 2)) {
|
|
if (state != "attack") {
|
|
state = "stop";
|
|
}
|
|
stop = true;
|
|
} else {
|
|
if (state != "attack") {
|
|
state = "run";
|
|
}
|
|
stop = false;
|
|
}
|
|
}
|
|
|
|
if (key == 0) {
|
|
if (stop == false) {
|
|
var px = percent(mouse.x, wx) - 50,
|
|
py = percent(mouse.y, wy) - 50;
|
|
|
|
vx = (px < 0 ? (px < -25 ? -115 : px * 3) : (px > 25 ? 115 : px * 3)) * -1,
|
|
vy = (py < 0 ? (py < -25 ? -115 : py * 3) : (py > 25 ? 115 : py * 3)) * -1;
|
|
} else {
|
|
vx = 0,
|
|
vy = 0;
|
|
}
|
|
}
|
|
|
|
background.position.x = (bx) - position.x;
|
|
background.position.y = (by) - position.y;
|
|
|
|
|
|
if (map.front) {
|
|
front.position.x = bx - position.x;
|
|
front.position.y = by - position.y;
|
|
}
|
|
|
|
map.objects.map(function (element) {
|
|
element.item.position.x = bx - position.x + element.x;
|
|
element.item.position.y = by - position.y + element.y;
|
|
});
|
|
|
|
|
|
//Mandamos pocisicon al server;
|
|
msg = userName + ` {"vx":${ vx ? vx : 0 },"vy":${ vy ? vy : 0} ,"state": "${state}", "direction":"${direction}", "width":"${player.width}", "height":"${player.height}" } `;
|
|
session.send(msg);
|
|
|
|
// Ajusta el fotograma
|
|
if (af >= maxFrame) {
|
|
af = 0;
|
|
} else {
|
|
af += 1 / df;
|
|
}
|
|
|
|
// Aplica el foto grama
|
|
if (playerTexture) {
|
|
playerTexture.frame = map.player.sprite[state][direction][Math.floor(af)] ? map.player.sprite[state][direction][Math.floor(af)] : map.player.sprite[state][direction][0];
|
|
}
|
|
|
|
// Borramos todos los obejetos de la pantalla
|
|
stage.removeChild(player);
|
|
stage.removeChild(playersName);
|
|
|
|
map.objects.map(function (element) {
|
|
stage.removeChild(element.item);
|
|
});
|
|
|
|
jQuery.each(map.players, function (i, element) {
|
|
if (element.item) {
|
|
stage.removeChild(element.item);
|
|
stage.removeChild(element.name);
|
|
}
|
|
});
|
|
|
|
if (map.front) {
|
|
stage.removeChild(front);
|
|
}
|
|
|
|
stage.removeChild(heartTilingSprite);
|
|
stage.removeChild(scoreText);
|
|
|
|
// Calculamos la posicion del jugador
|
|
player.scale.set(scale);
|
|
player.x = (wx / scaleDivisor) - ((player.width / scaleDivisor) / zoom);
|
|
player.y = (wy / scaleDivisor) - ((player.height / scaleDivisor) / zoom);
|
|
|
|
playersName.scale.set(scale / map.player.scale);
|
|
playersName.x = player.x + (player.width / 2) - (playersName.width / 2);
|
|
playersName.y = player.y - (player.height / 6);
|
|
|
|
// Dibujamos los objetos
|
|
map.objects.map(function (element, key) {
|
|
if (position.y > element.yv && position.x > element.xv) {
|
|
stage.addChild(element.item);
|
|
}
|
|
});
|
|
|
|
var paintedPlayer = false;
|
|
if (map.players) {
|
|
Object.values(map.players).sort(comparePlayer).map(function (element) {
|
|
if (element.position.y > position.y && !paintedPlayer) {
|
|
stage.addChild(player);
|
|
stage.addChild(playersName);
|
|
paintedPlayer = true;
|
|
}
|
|
if (!element.deleted) {
|
|
try {
|
|
element.item.scale.set(element.scale);
|
|
element.texture.frame = map.player.sprite[element.state][element.direction][Math.floor(af)] ? map.player.sprite[element.state][element.direction][Math.floor(af)] : map.player.sprite[element.state][element.direction][0];
|
|
element.item.position.x = (wx / scaleDivisor) - position.x + (element.position.x - (element.item.width / 2));
|
|
element.item.position.y = (wy / scaleDivisor) - position.y + (element.position.y - (element.item.height / 2));
|
|
element.name.scale.set(element.scale / map.player.scale);
|
|
element.name.x = element.item.position.x + (element.item.width / 2) - (element.name.width / 2);
|
|
element.name.y = element.item.position.y - (element.item.height / 6);
|
|
stage.addChild(element.item);
|
|
stage.addChild(element.name);
|
|
}
|
|
catch(error) {
|
|
console.error(error);
|
|
}
|
|
|
|
} else {
|
|
delete element.item;
|
|
delete element.name;
|
|
}
|
|
});
|
|
}
|
|
|
|
if (!paintedPlayer) {
|
|
stage.addChild(player);
|
|
stage.addChild(playersName);
|
|
}
|
|
|
|
if (map.front) {
|
|
stage.addChild(front);
|
|
}
|
|
|
|
//Actualizamos el marcador.
|
|
scoreText.text = 'Score: ' + score + '\n';
|
|
heartTilingSprite.width = 44 * lives;
|
|
stage.addChild(heartTilingSprite);
|
|
stage.addChild(scoreText);
|
|
|
|
// Lo renderizamos y mandamos la proxima llamada del bucle.
|
|
stage.scale.set(stateScale);
|
|
renderer.render(stage);
|
|
requestAnimationFrame(gameLoop);
|
|
}
|
|
|
|
window.onresize = function (event) {
|
|
setTimeout(function () {
|
|
wx = window.innerWidth;
|
|
wy = window.innerHeight;
|
|
wx2 = window.innerWidth / 2;
|
|
wy2 = window.innerHeight / 2;
|
|
bx = (window.innerWidth / scaleDivisor) - (map.size.x / 2);
|
|
by = (window.innerHeight / scaleDivisor) - (map.size.y / 2);
|
|
|
|
stateScale = wx < 1000 ? 0.5 : 1;
|
|
zoom = wx < 1000 ? 2 : 1;
|
|
scaleDivisor = wx < 1000 ? 1 : 2;
|
|
|
|
renderer.resize(wx, wy);
|
|
window.onresize();
|
|
});
|
|
}
|
|
|
|
$("#chatInput").css({
|
|
"font-family": 'oswald'
|
|
});
|
|
|
|
});
|
|
} |