mirror of
https://github.com/gooba42/adventureland.git
synced 2026-10-15 10:59:29 -05:00
310 lines
7.2 KiB
HTML
Executable File
310 lines
7.2 KiB
HTML
Executable File
{% extends "base.html" %}
|
|
{% block "content" %}
|
|
<style>
|
|
body{
|
|
background-image: url("/rpgapp/images/128-25.jpg");
|
|
background-repeat: repeat;
|
|
}
|
|
body{cursor: url('/rpgapp/images/blank.gif'), default !important;}
|
|
</style>
|
|
<script src="//lordkaan.com:1080/socket.io/socket.io.js"></script>
|
|
<script>{% include "common.js" %}</script>
|
|
<script>
|
|
var HEIGHT=600,WIDTH=800,inited=0;
|
|
var c_x=200,c_y=200,dx=2,dy=2,to_x=-1,to_y=-1,s_x,s_y,moving=0;
|
|
var mouse_x=0,mouse_y=0;
|
|
var direction=0;
|
|
var gameCanvas,context;
|
|
var loaded=0;
|
|
var players=Array(),npeople;
|
|
var maps=new Object();
|
|
var curmap=0;
|
|
var steps=0;
|
|
var cworld=0;
|
|
var on_chat=0;
|
|
var cursor_type=1,c_cursor=0;
|
|
var gofleft=0,goftop=0;
|
|
</script>
|
|
<div id="loading" style="color: #E9F607; font-size: 1.8em; font-weight: bold; padding-top: 200px;"><img src="/rpgapp/images/ajax-loader.gif" /> Loading ...</div>
|
|
<canvas id="gameCanvas" width="800" height="600">
|
|
This text is displayed if your browser does not support HTML5 Canvas.
|
|
</canvas>
|
|
<div id="game-infos" unselectable="on" class="unselectable">
|
|
<div id="game-info" align="left" unselectable="on" class="unselectable">
|
|
</div>
|
|
<input type="text" id="field" onkeydown=" if (event.keyCode==13) {
|
|
socket.emit('msg',my_nick+': '+$('#field').val());
|
|
$('#field').val('');
|
|
}" />
|
|
</div>
|
|
<div id="cursor" onclick="return false;" unselectable="on" class="unselectable"></div>
|
|
|
|
<script>
|
|
var socket,my_id="{{user.appuser.id}}",my_nick="{{char.nick}}";
|
|
window.onload=function()
|
|
{
|
|
document.getElementById('saudio').volume=0.1;
|
|
document.getElementById('saudio').addEventListener('ended', function(){
|
|
this.currentTime = 0;
|
|
}, false);
|
|
gameCanvas = document.getElementById('gameCanvas');
|
|
context = gameCanvas.getContext('2d');
|
|
inited=1;
|
|
|
|
socket= io.connect('http://lordkaan.com:1080');
|
|
|
|
socket.emit('setuser',{"id":"{{user.appuser.id}}","pass":"{{user.rpguser.password}}","appid":"{{app.db.appid}}","char":"{{char.id}}"});
|
|
|
|
socket.on('msg', function (data) {
|
|
console.log(data);
|
|
html=$("#game-info").html();
|
|
$("#game-info").html(html+"<div class='message' unselectable='on' class='unselectable'>"+data["msg"]+"</div>");
|
|
});
|
|
|
|
socket.on('world', function (data) {
|
|
if(loaded && inited)
|
|
{
|
|
for(var i=0;i<data.players.length;i++)
|
|
{
|
|
var c=data.players[i];
|
|
if(c.id==my_id)
|
|
c_x=c.x,c_y=c.y;
|
|
}
|
|
cworld=data;
|
|
}
|
|
});
|
|
|
|
socket.on('disconnect', function (data) {
|
|
window.top.location="//apps.facebook.com/{{app.db.slug}}/";
|
|
});
|
|
|
|
socket.on('ready', function (data) {
|
|
if(!data.map)
|
|
data.map="start";
|
|
loadMap(data.map);
|
|
|
|
});
|
|
|
|
|
|
}
|
|
window.addEventListener('keydown',doKeyDown,true);
|
|
window.addEventListener('click',doClick,true);
|
|
window.addEventListener('mousemove',doMove,true);
|
|
|
|
function walk()
|
|
{
|
|
var s=0;
|
|
if(to_x!=-1)
|
|
{
|
|
if(to_x>c_x)
|
|
{
|
|
c_x+=10;
|
|
if(to_x<=c_x)
|
|
to_x=-1;
|
|
}
|
|
else
|
|
{
|
|
c_x-=10;
|
|
if(to_x>=c_x)
|
|
to_x=-1;
|
|
}
|
|
s=1;
|
|
}
|
|
if(to_y!=-1)
|
|
{
|
|
if(to_y>c_y)
|
|
{
|
|
c_y+=10;
|
|
if(to_y<=c_y)
|
|
to_y=-1;
|
|
}
|
|
else
|
|
{
|
|
c_y-=10;
|
|
if(to_y>=c_y)
|
|
to_y=-1;
|
|
}
|
|
s=1;
|
|
}
|
|
if(s) { moving=1; send_coord(); }
|
|
else if(moving){
|
|
moving=0;
|
|
send_coord();
|
|
}
|
|
}
|
|
|
|
function stepper(){
|
|
steps=steps+1;
|
|
}
|
|
function setCursor()
|
|
{
|
|
if(c_cursor!=cursor_type)
|
|
{
|
|
if(cursor_type==1)
|
|
$("#cursor").css("background","url('/rpgapp/images/gam1229.gif')");
|
|
else if(cursor_type==2)
|
|
$("#cursor").css("background","url('/rpgapp/images/cur886.gif')");
|
|
}
|
|
$("#cursor").css("top",mouse_y-30);
|
|
$("#cursor").css("left",mouse_x-30);
|
|
}
|
|
setInterval(stepper,200);
|
|
setInterval(walk,200);
|
|
function doMove(e){
|
|
if(inited && loaded)
|
|
{
|
|
var x;
|
|
var y;
|
|
if (e.pageX || e.pageY) {
|
|
x = e.pageX;
|
|
y = e.pageY;
|
|
}
|
|
else {
|
|
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
|
|
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
|
|
}
|
|
mouse_x=x;
|
|
mouse_y=y;
|
|
x-=gofleft;
|
|
y-=goftop;
|
|
if(x>=0 && x<=200 && y>=0 && y<=200)
|
|
{
|
|
if(!on_chat) $("#game-infos").addClass("onit");
|
|
on_chat=1;
|
|
}
|
|
else
|
|
{
|
|
if(on_chat) $("#game-infos").removeClass("onit");
|
|
on_chat=0;
|
|
}
|
|
}
|
|
setCursor();
|
|
}
|
|
|
|
function doClick(e){
|
|
if(inited && loaded)
|
|
{
|
|
var x;
|
|
var y;
|
|
if (e.pageX || e.pageY) {
|
|
x = e.pageX;
|
|
y = e.pageY;
|
|
}
|
|
else {
|
|
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
|
|
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
|
|
}
|
|
x -= gameCanvas.offsetLeft;
|
|
y -= gameCanvas.offsetTop;
|
|
var dispx=WIDTH/2-c_x,dispy=HEIGHT/2-c_y;
|
|
if(!on_chat)
|
|
{
|
|
to_x=x-dispx;
|
|
to_y=y-dispy;
|
|
}
|
|
}
|
|
if(on_chat)
|
|
$("#field").select();
|
|
}
|
|
|
|
function doKeyDown(evt){
|
|
switch (evt.keyCode) {
|
|
case 38:
|
|
break;
|
|
}
|
|
}
|
|
|
|
setInterval(draw_world,250);
|
|
|
|
function draw_world(data)
|
|
{
|
|
if(!cworld) return;
|
|
data=cworld;
|
|
if(!curmap) return;
|
|
WIDTH=context.canvas.width = window.innerWidth;
|
|
HEIGHT=context.canvas.height = window.innerHeight;
|
|
var dispx=WIDTH/2-pa(c_x),dispy=HEIGHT/2-pa(c_y);
|
|
var pnx,pny;
|
|
for(var i=0;i<WIDTH/32;i++)
|
|
for(var j=0;j<HEIGHT/32;j++)
|
|
{
|
|
context.drawImage(dge(curmap.def.tile),curmap.def.x,curmap.def.y,32,32,i*32,j*32,32,32);
|
|
}
|
|
for(var i=0;i<curmap.items.length;i++)
|
|
{
|
|
var c=curmap.items[i];
|
|
c=c.split("|");
|
|
if(c[0][0]=="r")
|
|
{
|
|
var t,y;
|
|
pnx=parseInt(c[3])+dispx;
|
|
pny=parseInt(c[4])+dispy;
|
|
if(-40<=pnx && pnx<=WIDTH+40 && -40<=pny && pny<=HEIGHT+40)
|
|
context.drawImage(dge(c[1]),pa(c[5]),pa(c[6]),pa(c[2]),pa(c[2]),pnx,pny,pa(c[2]),pa(c[2]));
|
|
}
|
|
else if(c[0][0]=='m')
|
|
{
|
|
for(var j=0;j<pa(c[7]);j++)
|
|
for(var k=0;k<pa(c[8]);k++)
|
|
{
|
|
pnx=pa(c[3])+j*pa(c[2])+dispx;
|
|
pny=pa(c[4])+k*pa(c[2])+dispy;
|
|
if(-40<=pnx && pnx<=WIDTH+40 && -40<=pny && pny<=HEIGHT+40)
|
|
context.drawImage(dge(c[1]),pa(c[5]),pa(c[6]),pa(c[2]),pa(c[2]),pnx,pny,pa(c[2]),pa(c[2]));
|
|
}
|
|
}
|
|
}
|
|
for(var i=0;i<data.players.length;i++)
|
|
{
|
|
var cur=data.players[i];
|
|
var c=cur.character;
|
|
c=c.split("|");
|
|
if(c[0]=="r")
|
|
{
|
|
context.fillStyle="green";
|
|
context.fillText(cur.nick,cur.x-20+dispx,cur.y-48+dispy,50);
|
|
pnx=cur.x-16+dispx;
|
|
pny=cur.y-48+dispy;
|
|
if(-40<=pnx && pnx<=WIDTH+40 && -40<=pny && pny<=HEIGHT+40)
|
|
context.drawImage(dge(c[1]),pa(c[2])*96+(steps%3)*32*pa(cur.m),pa(c[3])*192+cur.d*48,32,48,pnx,pny,32,48);
|
|
}
|
|
}
|
|
$("#game-infos").css("left",$("#gameCanvas").offset().left);
|
|
$("#game-infos").css("top",$("#gameCanvas").offset().top+HEIGHT-220);
|
|
gofleft=$("#game-infos").offset().left;
|
|
goftop=$("#game-infos").offset().top;
|
|
}
|
|
</script>
|
|
<script>
|
|
|
|
function loadMap(name)
|
|
{
|
|
if(maps[name])
|
|
{
|
|
curmap=maps[name];
|
|
}
|
|
else
|
|
{
|
|
$.get("/rpgapp/getmap/{{app.adventure}}-"+name,function(data){
|
|
$("body").css("background","none");
|
|
$("#loading").hide();
|
|
curmap=maps[name]=eval("("+data+")");
|
|
c_x=curmap.spawn.x;
|
|
c_y=curmap.spawn.y;
|
|
loaded=1;
|
|
});
|
|
}
|
|
}
|
|
|
|
function send_coord()
|
|
{
|
|
socket.emit('coord',{x:c_x,y:c_y,d:direction,m:moving});
|
|
}
|
|
</script>
|
|
<audio id="saudio" loop="loop" volume="0.2">
|
|
<source src="/rpgapp/images/CloudTopLoops.ogg" type="audio/ogg" />
|
|
No Audio Support, Upgrade your Browser
|
|
</audio>
|
|
{% include "resources.html" %}
|
|
|
|
{% endblock %} |