magicworld
Este commit está contenido en:
Your Name
114
testing/magicworld/web/js/connect.js
Archivo normal
114
testing/magicworld/web/js/connect.js
Archivo normal
@@ -0,0 +1,114 @@
|
||||
var socket;
|
||||
|
||||
function init() {
|
||||
var server = "mw.hatthieves.es";
|
||||
var host = "wss://" + server + "/?channelName=" + channel + "&username=" + userName;
|
||||
try {
|
||||
socket = new WebSocket(host);
|
||||
log('WebSocket - status ' + socket.readyState);
|
||||
socket.onopen = function (msg) {
|
||||
log("Welcome - status " + this.readyState);
|
||||
};
|
||||
socket.onmessage = function (msg) {
|
||||
data = msg.data;
|
||||
var username = data.split(" ")[0];
|
||||
var type = data.split(" ")[1];
|
||||
switch (type) {
|
||||
case "create":
|
||||
map = JSON.parse(data.split(" ")[2]);
|
||||
map.players = {};
|
||||
run(socket);
|
||||
break;
|
||||
|
||||
case "left":
|
||||
if (map.players[username]) {
|
||||
map.players[username].deleted = true;
|
||||
$("#chatOutput").html($("#chatOutput").html() + "<b>[" + [username] + "]</b>" + " left the game.<br>");
|
||||
$("#chatOutput").scrollTop($("#chatOutput").get(0).scrollHeight);
|
||||
}
|
||||
break;
|
||||
|
||||
case "chat":
|
||||
$("#chatOutput").html($("#chatOutput").html() + "<b>[" + [username] + "]</b>" + ": " + data.replace(username + " chat ", "") + "<br>");
|
||||
$("#chatOutput").scrollTop($("#chatOutput").get(0).scrollHeight);
|
||||
break;
|
||||
|
||||
default:
|
||||
if (username != userName) {
|
||||
if (!map.players) {
|
||||
map.players = {};
|
||||
}
|
||||
|
||||
if (!map.players[username]) {
|
||||
map.players[username] = {};
|
||||
}
|
||||
let jsonData = JSON.parse(data.replace(username + " ", ""));
|
||||
if (!map.players[username].item) {
|
||||
map.players[username].deleted = false;
|
||||
map.players[username].landscapeTexture = new PIXI.Texture.fromImage(map.player.url);
|
||||
map.players[username].texture = new PIXI.Texture(map.players[username].landscapeTexture);
|
||||
map.players[username].item = new PIXI.Sprite(map.players[username].texture);
|
||||
map.players[username].nameStyle = 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
|
||||
});
|
||||
map.players[username].username = username;
|
||||
map.players[username].name = new PIXI.Text([username], map.players[username].nameStyle);
|
||||
$("#chatOutput").html($("#chatOutput").html() + "<b>[" + [username] + "]</b>" + " join the game.<br>");
|
||||
$("#chatOutput").scrollTop($("#chatOutput").get(0).scrollHeight);
|
||||
}
|
||||
map.players[username].position = jsonData.position;
|
||||
map.players[username].direction = jsonData.direction;
|
||||
map.players[username].state = jsonData.state;
|
||||
map.players[username].scale = jsonData.scale;
|
||||
map.players[username].lives = jsonData.lives;
|
||||
map.players[username].score = jsonData.score;
|
||||
} else {
|
||||
let jsonData = JSON.parse(data.replace(username + " ", ""))
|
||||
position = jsonData.position;
|
||||
scale = jsonData.scale;
|
||||
lives = jsonData.lives;
|
||||
score = jsonData.score;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
};
|
||||
socket.onclose = function (msg) {
|
||||
reconnect();
|
||||
};
|
||||
|
||||
} catch (ex) {
|
||||
log(ex);
|
||||
}
|
||||
}
|
||||
|
||||
function quit() {
|
||||
if (socket != null) {
|
||||
log("Goodbye!");
|
||||
socket.close();
|
||||
socket = null;
|
||||
}
|
||||
}
|
||||
|
||||
function reconnect() {
|
||||
quit();
|
||||
init();
|
||||
}
|
||||
|
||||
function log(msg) {
|
||||
console.log(msg);
|
||||
}
|
||||
|
||||
init();
|
||||
172
testing/magicworld/web/js/connect_n.js
Archivo normal
172
testing/magicworld/web/js/connect_n.js
Archivo normal
@@ -0,0 +1,172 @@
|
||||
(function () {
|
||||
$(document).ready(function () {
|
||||
|
||||
class MWCallbackI extends MW.MWCallback {
|
||||
message(data) {
|
||||
var username = data.split(" ")[0];
|
||||
if (data.split(" ")[1] == "left") {
|
||||
if (map.players[username]) {
|
||||
map.players[username].deleted = true;
|
||||
$("#chatOutput").html($("#chatOutput").html() + "<b>[" + [username] + "]</b>" + " left the game.<br>");
|
||||
$("#chatOutput").scrollTop($("#chatOutput").get(0).scrollHeight);
|
||||
}
|
||||
} else if (data.split(" ")[1] == "chat") {
|
||||
$("#chatOutput").html($("#chatOutput").html() + "<b>[" + [username] + "]</b>" + ": " + data.replace(username + " chat ", "") + "<br>");
|
||||
$("#chatOutput").scrollTop($("#chatOutput").get(0).scrollHeight);
|
||||
} else {
|
||||
if (username != userName) {
|
||||
if (!map.players[username]) {
|
||||
map.players[username] = {};
|
||||
}
|
||||
let jsonData = JSON.parse(data.replace(username + " ", ""))
|
||||
if (!map.players[username].item) {
|
||||
map.players[username].deleted = false;
|
||||
map.players[username].landscapeTexture = new PIXI.Texture.fromImage(map.player.url);
|
||||
map.players[username].texture = new PIXI.Texture(map.players[username].landscapeTexture);
|
||||
map.players[username].item = new PIXI.Sprite(map.players[username].texture);
|
||||
map.players[username].nameStyle = 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
|
||||
});
|
||||
map.players[username].username = username;
|
||||
map.players[username].name = new PIXI.Text([username], map.players[username].nameStyle);
|
||||
$("#chatOutput").html($("#chatOutput").html() + "<b>[" + [username] + "]</b>" + " join the game.<br>");
|
||||
$("#chatOutput").scrollTop($("#chatOutput").get(0).scrollHeight);
|
||||
}
|
||||
map.players[username].px = jsonData.px;
|
||||
map.players[username].py = jsonData.py;
|
||||
map.players[username].direction = jsonData.direction;
|
||||
map.players[username].state = jsonData.state;
|
||||
map.players[username].scale = jsonData.scale;
|
||||
map.players[username].score = jsonData.score;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const State = {
|
||||
Disconnected: 0,
|
||||
Connecting: 1,
|
||||
Connected: 2
|
||||
};
|
||||
|
||||
let state = State.Disconnected;
|
||||
|
||||
async function runWithSession(router, session) {
|
||||
try {
|
||||
|
||||
const [timeout, category, adapter] = await Promise.all(
|
||||
[
|
||||
router.getACMTimeout(),
|
||||
router.getCategoryForClient(),
|
||||
router.ice_getCommunicator().createObjectAdapterWithRouter("", router)
|
||||
]);
|
||||
|
||||
const connection = router.ice_getCachedConnection();
|
||||
if (timeout > 0) {
|
||||
connection.setACM(timeout, undefined, Ice.ACMHeartbeat.HeartbeatAlways);
|
||||
}
|
||||
|
||||
connection.setCloseCallback(() => error("Connection lost"));
|
||||
|
||||
const callback = MW.MWCallbackPrx.uncheckedCast(
|
||||
adapter.add(new MWCallbackI(), new Ice.Identity("callback", category)));
|
||||
|
||||
await session.setCallback(callback);
|
||||
|
||||
state = State.Connected;
|
||||
|
||||
await new Promise(
|
||||
(resolve, reject) => {
|
||||
setTimeout(function () {
|
||||
run(session);
|
||||
}, 2000);
|
||||
$("#chatInput").keypress(
|
||||
e => {
|
||||
if (e.which === 13) {
|
||||
(async function () {
|
||||
const message = $(e.currentTarget).val();
|
||||
$(e.currentTarget).val("");
|
||||
try {
|
||||
await session.sendPosition("chat " + message);
|
||||
} catch (ex) {
|
||||
reject(ex);
|
||||
}
|
||||
|
||||
}());
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
$("#signout").click(() => {
|
||||
connection.setCloseCallback(null);
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
await router.destroySession();
|
||||
} finally {
|
||||
state = State.Disconnected;
|
||||
}
|
||||
}
|
||||
|
||||
async function signin() {
|
||||
let communicator;
|
||||
try {
|
||||
state = State.Connecting;
|
||||
|
||||
const port = "4064";
|
||||
if (window.location.hostname == "172.100.0.100") {
|
||||
var hostname = "172.100.0.102";
|
||||
} else if (window.location.hostname == "192.168.1.51") {
|
||||
var hostname = "192.168.1.51";
|
||||
} else {
|
||||
var hostname = "83.57.124.192";
|
||||
}
|
||||
|
||||
const proxy = "MWServer/router:ws -p " + port + " -h " + hostname;
|
||||
|
||||
const initData = new Ice.InitializationData();
|
||||
initData.properties = Ice.createProperties();
|
||||
initData.properties.setProperty("Ice.Default.Router", proxy);
|
||||
communicator = Ice.initialize(initData);
|
||||
|
||||
const router = await Glacier2.RouterPrx.checkedCast(communicator.getDefaultRouter());
|
||||
const session = await router.createSession(userName, "pass");
|
||||
await runWithSession(router, MW.MWSessionPrx.uncheckedCast(session));
|
||||
} catch (ex) {
|
||||
|
||||
if (ex instanceof Glacier2.PermissionDeniedException) {
|
||||
await error("permission denied:\n" + ex.reason);
|
||||
} else if (ex instanceof Glacier2.CannotCreateSessionException) {
|
||||
await error("cannot create session:\n" + ex.reason);
|
||||
} else if (ex instanceof Ice.ConnectFailedException) {
|
||||
await error("connection to server failed");
|
||||
} else {
|
||||
await error(ex.toString());
|
||||
}
|
||||
} finally {
|
||||
if (communicator) {
|
||||
await communicator.destroy();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function error(message) {
|
||||
console.log(message);
|
||||
state = State.Disconnected;
|
||||
}
|
||||
|
||||
signin();
|
||||
});
|
||||
}());
|
||||
123
testing/magicworld/web/js/functions.js
Archivo normal
123
testing/magicworld/web/js/functions.js
Archivo normal
@@ -0,0 +1,123 @@
|
||||
function percent(m, p){
|
||||
return (m * 100) / p;
|
||||
}
|
||||
|
||||
function getDirection(mouse, wx, wy){
|
||||
if(mouse.y < window.innerHeight/2){
|
||||
if(mouse.x < window.innerWidth/2){
|
||||
if(percent(mouse.x, wx) >= percent(mouse.y, wy)){
|
||||
direction = "up";
|
||||
}else{
|
||||
direction = "left";
|
||||
}
|
||||
}else{
|
||||
if(percent((mouse.x - wx)*-1, wx) >= percent(mouse.y, wy)){
|
||||
direction = "up";
|
||||
}else{
|
||||
direction = "right";
|
||||
}
|
||||
}
|
||||
}else{
|
||||
if(mouse.x < wx/2){
|
||||
if(percent(mouse.x, wx) >= percent((mouse.y - wy) * -1, wy)){
|
||||
direction = "down";
|
||||
}else{
|
||||
direction = "left";
|
||||
}
|
||||
}else{
|
||||
if(percent((mouse.x - wx)*-1, wx) >= percent((mouse.y - wy) * -1, wy)){
|
||||
direction = "down";
|
||||
}else{
|
||||
direction = "right";
|
||||
}
|
||||
}
|
||||
}
|
||||
return direction;
|
||||
}
|
||||
|
||||
function getLive(life){
|
||||
var r = ""
|
||||
for (var i = 0; i < map.player.lives; i++){
|
||||
r += "💗 ";
|
||||
}
|
||||
return r;
|
||||
}
|
||||
|
||||
function getParam(name) {
|
||||
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
|
||||
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
|
||||
var results = regex.exec(location.search);
|
||||
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
|
||||
};
|
||||
|
||||
function guid() {
|
||||
function s4() {
|
||||
return Math.floor((1 + Math.random()) * 0x10000)
|
||||
.toString(16)
|
||||
.substring(1);
|
||||
}
|
||||
return s4() + s4(); + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
|
||||
}
|
||||
|
||||
function comparePlayer(a, b) {
|
||||
if (a.py > b.py) {
|
||||
return -1;
|
||||
}
|
||||
if (a.py < b.py) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
function comparePlayerScore(a, b) {
|
||||
if (parseInt(a.score) > parseInt(b.score)) {
|
||||
return -1;
|
||||
}
|
||||
if (parseInt(a.score) < parseInt(b.score)) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
function is_touch_device() {
|
||||
try {
|
||||
document.createEvent("TouchEvent");
|
||||
return true;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function refreshScore(){
|
||||
|
||||
setInterval(function(){
|
||||
$("#scoreOutput").html("");
|
||||
var i = 1;
|
||||
var showPlayer = false;
|
||||
if(map.players){
|
||||
Object.values(map.players).sort(comparePlayerScore).map(function(element){
|
||||
if (score > element.score && !showPlayer){
|
||||
$("#scoreOutput").html($("#scoreOutput").html() + i + "º - " + userName + " - " + score + "<br>");
|
||||
i++;
|
||||
showPlayer = true;
|
||||
}
|
||||
if(!element.deleted){
|
||||
$("#scoreOutput").html($("#scoreOutput").html() + i + "º - " + element.username + " - " + element.score + "<br>");
|
||||
i++;
|
||||
}
|
||||
});
|
||||
}
|
||||
if(!showPlayer){
|
||||
$("#scoreOutput").html($("#scoreOutput").html() + i + "º - " + userName + " - " + score + "<br>");
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
function getUserRamdom(){
|
||||
function s4() {
|
||||
return Math.floor((1 + Math.random()) * 0x10000)
|
||||
.toString(16)
|
||||
.substring(1);
|
||||
}
|
||||
return "Guest-" + s4();
|
||||
}
|
||||
448
testing/magicworld/web/js/game.js
Archivo normal
448
testing/magicworld/web/js/game.js
Archivo normal
@@ -0,0 +1,448 @@
|
||||
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'
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
31
testing/magicworld/web/js/index.js
Archivo normal
31
testing/magicworld/web/js/index.js
Archivo normal
@@ -0,0 +1,31 @@
|
||||
|
||||
var audio = new Audio('/sounds/wonderworld.mp3');
|
||||
audio.loop = true
|
||||
audio.play();
|
||||
audio.volume = 0.5
|
||||
|
||||
function play(){
|
||||
audio.play();
|
||||
$("#musicStop").removeClass("d-none");
|
||||
$("#musicPlay").addClass("d-none");
|
||||
}
|
||||
|
||||
function stop(){
|
||||
audio.pause();
|
||||
$("#musicPlay").removeClass("d-none");
|
||||
$("#musicStop").addClass("d-none");
|
||||
}
|
||||
$(document).ready(function () {
|
||||
// stop();
|
||||
$("#username").val(getUserRamdom());
|
||||
|
||||
$("#username").on({
|
||||
keydown: function(e) {
|
||||
if (e.which === 32)
|
||||
return false;
|
||||
},
|
||||
change: function() {
|
||||
this.value = this.value.replace(/\s/g, "");
|
||||
}
|
||||
});
|
||||
});
|
||||
46
testing/magicworld/web/js/mosters.js
Archivo normal
46
testing/magicworld/web/js/mosters.js
Archivo normal
@@ -0,0 +1,46 @@
|
||||
var mosters_raw = [{
|
||||
width: 600,
|
||||
height: 400,
|
||||
img: "moaster2.png",
|
||||
code: "globe",
|
||||
nx: 12,
|
||||
ny: 8,
|
||||
px: 3,
|
||||
py: 4
|
||||
}, {
|
||||
width: 576,
|
||||
height: 384,
|
||||
img: "moster1.png",
|
||||
code: "globe",
|
||||
nx: 12,
|
||||
ny: 8,
|
||||
px: 3,
|
||||
py: 4
|
||||
}];
|
||||
|
||||
var mosters = mosters_raw.map(function (x) {
|
||||
|
||||
let aux = {
|
||||
up: getX(x, 3, 0, 0),
|
||||
down: getX(x, 0, 0, 0),
|
||||
left: getX(x, 1, 0, 0),
|
||||
right: getX(x, 2, 0, 0)
|
||||
}
|
||||
let res = {
|
||||
stop: aux,
|
||||
run: aux,
|
||||
attack: aux
|
||||
};
|
||||
return res;
|
||||
});
|
||||
|
||||
function getX(moster, state, mosterx, mostery) {
|
||||
var width = moster.width / moster.nx;
|
||||
var height = moster.height / moster.ny;
|
||||
var result = [];
|
||||
for (let i = 0; i <= moster.px - 1; i++) {
|
||||
result.push(new PIXI.Rectangle((i + (moster.px * mosterx)) * width, (state + (moster.py * mostery)) * height, width, height));
|
||||
}
|
||||
result.push(new PIXI.Rectangle((1 + (moster.px * mosterx)) * width, (state + (moster.py * mostery)) * height, width, height));
|
||||
return result;
|
||||
}
|
||||
85
testing/magicworld/web/js/playerSprite_old.js
Archivo normal
85
testing/magicworld/web/js/playerSprite_old.js
Archivo normal
@@ -0,0 +1,85 @@
|
||||
var sprite = {
|
||||
stop: {
|
||||
up:[
|
||||
new PIXI.Rectangle(210, 120, 22, 28)
|
||||
],
|
||||
down: [
|
||||
new PIXI.Rectangle(30, 0, 22, 28)
|
||||
],
|
||||
left: [
|
||||
new PIXI.Rectangle(331, 30, 20, 28)
|
||||
],
|
||||
right:[
|
||||
new PIXI.Rectangle(331, 120, 20, 28)
|
||||
]
|
||||
},
|
||||
run: {
|
||||
up: [
|
||||
new PIXI.Rectangle(0, 120, 22, 28),
|
||||
new PIXI.Rectangle(30, 120, 22, 28),
|
||||
new PIXI.Rectangle(60, 120, 22, 28),
|
||||
new PIXI.Rectangle(90, 120, 22, 28),
|
||||
new PIXI.Rectangle(120, 120, 22, 28),
|
||||
new PIXI.Rectangle(150, 120, 22, 28),
|
||||
new PIXI.Rectangle(180, 120, 22, 28),
|
||||
new PIXI.Rectangle(210, 120, 22, 28)
|
||||
],
|
||||
down: [
|
||||
new PIXI.Rectangle(0, 30, 22, 28),
|
||||
new PIXI.Rectangle(30, 30, 22, 28),
|
||||
new PIXI.Rectangle(60, 30, 22, 28),
|
||||
new PIXI.Rectangle(90, 30, 22, 28),
|
||||
new PIXI.Rectangle(120, 30, 22, 28),
|
||||
new PIXI.Rectangle(150, 30, 22, 28),
|
||||
new PIXI.Rectangle(180, 30, 22, 28),
|
||||
new PIXI.Rectangle(210, 30, 22, 28)
|
||||
],
|
||||
left: [
|
||||
new PIXI.Rectangle(240, 30, 20, 28),
|
||||
new PIXI.Rectangle(271, 30, 20, 28),
|
||||
new PIXI.Rectangle(300, 30, 20, 28),
|
||||
new PIXI.Rectangle(331, 30, 20, 28),
|
||||
new PIXI.Rectangle(360, 30, 20, 28),
|
||||
new PIXI.Rectangle(391, 30, 20, 28)
|
||||
],
|
||||
right: [
|
||||
new PIXI.Rectangle(240, 120, 20, 28),
|
||||
new PIXI.Rectangle(271, 120, 20, 28),
|
||||
new PIXI.Rectangle(300, 120, 20, 28),
|
||||
new PIXI.Rectangle(331, 120, 20, 28),
|
||||
new PIXI.Rectangle(360, 120, 20, 28),
|
||||
new PIXI.Rectangle(391, 120, 20, 28)
|
||||
]
|
||||
},
|
||||
attack: {
|
||||
up:[
|
||||
new PIXI.Rectangle(0, 182, 24, 25),
|
||||
new PIXI.Rectangle(27, 178, 25, 32),
|
||||
new PIXI.Rectangle(60, 176, 22, 37),
|
||||
new PIXI.Rectangle(88, 178, 26, 32),
|
||||
new PIXI.Rectangle(114, 180, 33, 26)
|
||||
],
|
||||
down: [
|
||||
new PIXI.Rectangle(0, 90, 22, 28),
|
||||
new PIXI.Rectangle(28, 90, 26, 28),
|
||||
new PIXI.Rectangle(59, 87, 24, 33),
|
||||
new PIXI.Rectangle(89, 87, 24, 33),
|
||||
new PIXI.Rectangle(113, 87, 30, 33),
|
||||
new PIXI.Rectangle(144, 87, 34, 33)
|
||||
],
|
||||
left: [
|
||||
new PIXI.Rectangle(241, 90, 22, 28),
|
||||
new PIXI.Rectangle(266, 90, 29, 26),
|
||||
new PIXI.Rectangle(295, 90, 32, 25),
|
||||
new PIXI.Rectangle(327, 90, 29, 25),
|
||||
new PIXI.Rectangle(358, 88, 25, 32)
|
||||
],
|
||||
right:[
|
||||
new PIXI.Rectangle(241, 180, 22, 28),
|
||||
new PIXI.Rectangle(266, 180, 29, 26),
|
||||
new PIXI.Rectangle(295, 180, 30, 25),
|
||||
new PIXI.Rectangle(327, 180, 29, 25),
|
||||
new PIXI.Rectangle(358, 178, 25, 32)
|
||||
]
|
||||
}
|
||||
};
|
||||
Referencia en una nueva incidencia
Block a user