mirror of
https://github.com/gooba42/adventureland.git
synced 2026-10-14 18:39:27 -05:00
Open source
This commit is contained in:
Kaan Soral
Executable
+310
@@ -0,0 +1,310 @@
|
||||
{% 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 %}
|
||||
Reference in New Issue
Block a user