24 items •
Download ./*
24 items •
Download ./*
firefoxgamemaker.html
1 year ago• 641
{}
<!DOCTYPE html>
<!--
Author: Twily 2015 - 2023
Description: Game/map continous loading simulation
Website: http://twily.info/
-->
<html>
<head>
<title>>_</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<!--<meta name='viewport' content='width=device-width,initial-scale=1'>-->
<meta name='viewport' content='width=600,initial-scale=1'>
<!--<link id="favicon" rel="shortcut icon" href="http://twily.info/favicon.ico" />-->
<!--<link rel="stylesheet" type="text/css" href="./css/style.css?v=1" />-->
<style type="text/css">
html,body {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: auto;
font-family: "Droid Sans", "Liberation Sans", "DejaVu Sans", "Segoe UI", Sans;
font-size: 12pt; font-weight: bold;
background: #17181A; color: #AAABAD;
user-select: none;
}
* { box-sizing: border-box; }
*:focus { outline: none !important; }
a:link, a:visited { color: #606163; text-decoration: none; }
a:hover, a:active { color: #EA75BC; }
.tbl { display: table; width: 100%; height: 100%; }
.tr { display: table-row; }
.td { display: table-cell; vertical-align: top; border: 1px solid #606163; box-shadow: inset 0 0 2px 2px #000; }
.sidebar { width: 200px; min-width: 100px; }
/*
#wrap { width: 100%; height: 100%; display: flex; position: absolute; z-index: 9; }
#wrap #box { padding: 128px; background: #111113; margin: auto; display: inline-block; position: relative; }*/
#leftJoyContainer {
background: rgba(255,255,255,.1);
width: 100px; height: 100px;
border-radius: 200px;
/*position: absolute; bottom: 50px; left: 50px;
z-index: 999;
display: none;*/
position: relative;
}
#rightJoyContainer {
background: rgba(255,255,255,.1);
width: 100px; height: 100px;
border-radius: 200px;
/*position: absolute; bottom: 50px; right: 50px;
z-index: 999;
display: none;*/
position: relative;
}
#leftJoyStick {
background: rgba(255,255,255,.3);
width: 50px; height: 50px;
border-radius: 100px;
position: absolute; top: 50%; left: 50%;
margin-left: -25px; margin-top: -25px;
}
#rightJoyStick {
background: rgba(255,255,255,.3);
width: 50px; height: 50px;
border-radius: 100px;
position: absolute; top: 50%; left: 50%;
margin-left: -25px; margin-top: -25px;
}
.slidebar {
position: relative; width: 100px; height: 5px;
background: #444; margin: 12px 0;
}
.dragball {
position: absolute; width: 24px; height: 24px;
top: 0; left: 7%; margin-left: -12px; margin-top: -12px;
background: #777; border-radius: 24px;
}
#logcont { height: 100%; width: 100%; overflow: auto; }
#txtlog {
height: auto;
color: #080;
}
</style>
<!--<script type="text/javascript" src="./js/main.js?v=1"></script>-->
<script type="text/javascript">
var $=function(id) { return document.getElementById(id); };
function ajaxSource() {
var xhr;
if(window.XMLHttpRequest) xhr=new XMLHttpRequest();
else xhr=new ActiveXObject("Microsoft.XMLHTTP");
var data;
xhr.onreadystatechange=function() {
if(xhr.readyState==4 && xhr.status==200) {
data=xhr.responseText;
console.log(data);
}
}
xhr.open("GET","./testdata.json",true);
xhr.send(null);
}
var cnv,ctx;
function initCanvas() {
cnv=$('canvas');
ctx=cnv.getContext('2d');
cnv.width="350";
cnv.height="700";
cnv.style.width="350px";
cnv.style.height="700px";
loopCanvas();
}
var player={
position: { x: 120, y: 165 },
tiles: { last: "", current: "", loaded: [], preloaded: [], unflagged: [] }
}
var grid={
tiles: { x: 7, y: 14 },
tilesize: { x: 50, y: 50 }, // simluation was built for 1 tile = 1 square km
chunksize: { x: 5, y: 5 }, // chunk 100 meter
preload: "" // w n e s & nw ne se sw ?
}
var margX=20*grid['tilesize']['x']/100;
var margY=20*grid['tilesize']['y']/100; // 10 - 20%
var fps=60;
var lCT;
var delta=0;
var speed=20;
var lTS=0;
function loopCanvas() {
clearTimeout(lCT);
var tnow=Date.now();
delta=(tnow-lTS)/1000;
lTS=tnow;
//console.log(lTS);
//var tspeed=speed/20;
var tspeed=speed;
if(joyRead['left'].isHeld) {
var ratio=1;
if(joyRead['left'].ratio) {
ratio=joyRead['left'].ratio/50;
var x=(tspeed*ratio)*parseFloat(Math.sin((joyRead['left'].angle-90)*(Math.PI/180))); // pi/180 = radian
var y=(tspeed*ratio)*parseFloat(Math.cos((joyRead['left'].angle+90)*(Math.PI/180)));
player['position']['x']+=x * delta;
player['position']['y']+=y * delta;
}
} else {
if((isWPressed || isSPressed) && (isAPressed || isDPressed)) {
tspeed-=tspeed/3;
}
if(isWPressed) player['position']['y']-=tspeed * delta;
else if(isSPressed) player['position']['y']+=tspeed * delta;
if(isAPressed) player['position']['x']-=tspeed * delta;
else if(isDPressed) player['position']['x']+=tspeed * delta;
}
if(player['position']['x']<0) player['position']['x']=0;
else if(player['position']['x']+1>(grid['tiles']['x']*grid['tilesize']['x'])) player['position']['x']=grid['tiles']['x']*grid['tilesize']['x']-1;
if(player['position']['y']<0) player['position']['y']=0;
else if(player['position']['y']+1>(grid['tiles']['y']*grid['tilesize']['y'])) player['position']['y']=grid['tiles']['y']*grid['tilesize']['y']-1;
//
ctx.clearRect(0,0,350,700);
ctx.fillStyle="black";
ctx.fillRect(0,0,350,700);
var posX,posY;
var playerPosX=Math.floor(player['position']['x']/grid['tilesize']['x']);
var playerPosY=Math.floor(player['position']['y']/grid['tilesize']['y']);
var tileChanged=false;
player['tiles']['current']='x'+(playerPosX+1)+'y'+(playerPosY+1);
if(player['tiles']['last']!=player['tiles']['current']) {
crossing="a";
if(player['tiles']['last']!="") {
var oldTile=player['tiles']['last'].split("y");
var newTile=player['tiles']['current'].split("y");
if(oldTile[0].substr(1)>newTile[0].substr(1)) {
// west
crossing="W";
} else if(oldTile[0].substr(1)<newTile[0].substr(1)) {
// east
crossing="E";
}
if(oldTile[1]>newTile[1]) {
// north
crossing="N";
} else if(oldTile[1]<newTile[1]) {
// south
crossing="S";
}
}
tileChanged=true;
txtlog('--tileChange [x'+(playerPosX+1)+'y'+(playerPosY+1)+"] crossing ["+crossing+"]");
for(var i=-1;i<=1;i++) {
player['tiles']['loaded'][(i+1)]=[];
for(var j=-1;j<=1;j++) {
var tileZ='x'+(playerPosX+1+j)+'y'+(playerPosY+1+i);
player['tiles']['loaded'][(i+1)].push(tileZ);
if(player['tiles']['last']=="") {
txtlog("First time load adding ["+tileZ+"]");
}
}
}
//console.log('tile current: '+player['tiles']['current']);
//console.log(grid['preload']);
//console.log('full data'+', total '+player['tiles']['preloaded'].length);
//console.log(player['tiles']['preloaded']);
if(grid['preload'].indexOf("W")!=-1) {
var c=0;
for(var i=0;i<player['tiles']['preloaded'].length;i++) {
var tileSplit=player['tiles']['preloaded'][i].split('y'); // 0='x1' 1='1'
if(tileSplit[0]=="Wx"+(playerPosX-1+1)) {
txtlog("[W] preloaded "+player['tiles']['preloaded'][i]+" moved to loaded");
player['tiles']['preloaded'].splice(i,1);
i--;
c++;
} else {
//console.log('[W] check '+tileSplit[0]+' == Wx'+(playerPosX-1+1)+' false');
}
}
//console.log('[W] moved '+c+' , remaining '+player['tiles']['preloaded'].length);
} else if(grid['preload'].indexOf("E")!=-1) {
var c=0;
for(var i=0;i<player['tiles']['preloaded'].length;i++) {
var tileSplit=player['tiles']['preloaded'][i].split('y'); // 0='x1' 1='1'
if(tileSplit[0]=="Ex"+(playerPosX+1+1)) {
txtlog("[E] preloaded "+player['tiles']['preloaded'][i]+" moved to loaded");
player['tiles']['preloaded'].splice(i,1);
i--;
c++;
} else {
//console.log('[E] check '+tileSplit[0]+' == Ex'+(playerPosX+1+1)+' false');
}
}
//console.log('[E] moved '+c+' , remaining '+player['tiles']['preloaded'].length);
}
//console.log(grid['preload']);
//console.log('first pass W/E clear');
//console.log(player['tiles']['preloaded']);
if(grid['preload'].indexOf("N")!=-1) {
var c=0;
for(var i=0;i<player['tiles']['preloaded'].length;i++) {
var tileSplit=player['tiles']['preloaded'][i].split('y'); // 0='x1' 1='1'
//if('y'+tileSplit[1]=='y'+(playerPosY-2+1)) {
if('y'+tileSplit[1]=='y'+(playerPosY-1+1)) {
txtlog("[N] preloaded "+player['tiles']['preloaded'][i]+" moved to loaded");
player['tiles']['preloaded'].splice(i,1);
i--;
c++;
} else {
//console.log('[N] check y'+tileSplit[1]+' == y'+(playerPosY-1+1)+' false');
}
}
//console.log('[N] moved '+c+' , remaining '+player['tiles']['preloaded'].length);
} else if(grid['preload'].indexOf("S")!=-1) {
var c=0;
for(var i=0;i<player['tiles']['preloaded'].length;i++) {
var tileSplit=player['tiles']['preloaded'][i].split('y'); // 0='x1' 1='1'
//if('y'+tileSplit[1]=='y'+(playerPosY+2+1)) {
if('y'+tileSplit[1]=='y'+(playerPosY+1+1)) {
txtlog("[S] preloaded "+player['tiles']['preloaded'][i]+" moved to loaded");
player['tiles']['preloaded'].splice(i,1);
i--;
c++;
} else {
//console.log('[S] check y'+tileSplit[1]+' == y'+(playerPosY+1+1)+' false');
}
}
//console.log('[S] moved '+c+' , remaining '+player['tiles']['preloaded'].length);
}
//console.log(grid['preload']);
//console.log('second pass N/S clear');
//console.log(player['tiles']['preloaded']);
for(var k=0;k<player['tiles']['preloaded'].length;k++) {
//if(player['tiles']['preloaded'][k].substr(0,1)=="E" ||
// player['tiles']['preloaded'][k].substr(0,1)=="W") {
txtlog("new tile unflagging "+player['tiles']['preloaded'][k]);
player['tiles']['unflagged'].push(player['tiles']['preloaded'][k]);
player['tiles']['preloaded'].splice(k,1);
k--;
//}
}
//console.log("---");
player['tiles']['last']=player['tiles']['current'];
grid['preload']="";
txtlog('--grid current');
txtlog('--['+player['tiles']['loaded'][0].toString()+']');
txtlog('--['+player['tiles']['loaded'][1].toString()+']');
txtlog('--['+player['tiles']['loaded'][2].toString()+']');
}
$('bottext').innerHTML='X: '+Math.round(player['position']['x'])+' ['+(playerPosX+1)+'] , Y: '+Math.round(player['position']['y'])+' ['+(playerPosY+1)+']';
for(var i=0;i<grid['tiles']['y'];i++) {
for(var j=0;j<grid['tiles']['x'];j++) {
posX=j*grid['tilesize']['x'];
posY=i*grid['tilesize']['y'];
ctx.strokeStyle="blue";
ctx.beginPath();
ctx.moveTo(posX,posY);
ctx.lineTo(posX,posY+grid['tilesize']['y']);
ctx.stroke();
ctx.strokeStyle="green";
ctx.beginPath();
ctx.moveTo(posX,posY);
ctx.lineTo(posX+grid['tilesize']['x'],posY);
ctx.stroke();
var adjX=null;
var adjY=null;
if(playerPosY==i) { // standing row
if(playerPosX==j) { // standing tile
adjX=0;
adjY=0;
var unset=0;
var rightX=posX+grid['tilesize']['x'];
var bottomY=posY+grid['tilesize']['y'];
var TRIG=grid['preload'];
var updateTRIG=false;
var loadingTiles=[]; // just for print
var unloadingTiles=[]; // just for print
if(player['position']['y']>=bottomY-margY) { // trigger SOUTH
if(TRIG.indexOf("S")==-1) {
// unload W/E ?
for(var k=0;k<player['tiles']['preloaded'].length;k++) {
if(player['tiles']['preloaded'][k].substr(0,1)=="E" ||
player['tiles']['preloaded'][k].substr(0,1)=="W") {
txtlog("new [S] unflagging "+player['tiles']['preloaded'][k]);
player['tiles']['unflagged'].push(player['tiles']['preloaded'][k]);
player['tiles']['preloaded'].splice(k,1);
k--;
}
}
//player['tiles']['preloaded']=[];
loadingTiles=[];
for(var k=-1;k<=1;k++) {
var newtile="x"+(playerPosX+1+k)+"y"+(playerPosY+1+2);
var refreshed=false;
for(var m=0;m<player['tiles']['unflagged'].length;m++) {
if(player['tiles']['unflagged'][m]=="S"+newtile) {
player['tiles']['unflagged'].splice(m,1);
m--;
refreshed=true;
}
}
if(tileChanged) {
if(crossing=="N") {
refreshed=true;
}
}
if(!refreshed) {
loadingTiles.push(newtile);
}
player['tiles']['preloaded'].push("S"+newtile);
}
TRIG="S";
txtlog("preloading south tiles ["+loadingTiles.toString()+"]");
updateTRIG=true;
}
} else if(player['position']['y']<=posY+margY) { // trigger NORTH
if(TRIG.indexOf("N")==-1) {
// unload W/E ?
for(var k=0;k<player['tiles']['preloaded'].length;k++) {
if(player['tiles']['preloaded'][k].substr(0,1)=="E" ||
player['tiles']['preloaded'][k].substr(0,1)=="W") {
txtlog("new [N] unflagging "+player['tiles']['preloaded'][k]);
player['tiles']['unflagged'].push(player['tiles']['preloaded'][k]);
player['tiles']['preloaded'].splice(k,1);
k--;
}
}
//player['tiles']['preloaded']=[];
loadingTiles=[];
for(var k=-1;k<=1;k++) {
var newtile="x"+(playerPosX+1+k)+"y"+(playerPosY+1-2);
var refreshed=false;
for(var m=0;m<player['tiles']['unflagged'].length;m++) {
if(player['tiles']['unflagged'][m]=="N"+newtile) {
player['tiles']['unflagged'].splice(m,1);
m--;
refreshed=true;
}
}
if(tileChanged) {
if(crossing=="S") {
refreshed=true;
}
}
if(!refreshed) {
loadingTiles.push(newtile);
}
player['tiles']['preloaded'].push("N"+newtile);
}
TRIG="N";
txtlog("preloading north tiles ["+loadingTiles.toString()+"]");
updateTRIG=true;
}
} else { // unloading N/S --
if(TRIG.indexOf("N")!=-1) {
unloadingTiles=[];
for(var k=-1;k<=1;k++) {
var tileCheck="x"+(playerPosX+1+k)+"y"+(playerPosY+1-2);
unloadingTiles.push(tileCheck);
for(var l=0;l<player['tiles']['preloaded'].length;l++) {
if(player['tiles']['preloaded'][l]=="N"+tileCheck) {
player['tiles']['preloaded'].splice(l,1);
l--;
}
}
}
TRIG=TRIG.replace('N','');
txtlog("unloading north tiles ["+unloadingTiles.toString()+"]");
updateTRIG=true;
}
if(TRIG.indexOf("S")!=-1) {
unloadingTiles=[];
for(var k=-1;k<=1;k++) {
var tileCheck="x"+(playerPosX+1+k)+"y"+(playerPosY+1+2);
unloadingTiles.push(tileCheck);
for(var l=0;l<player['tiles']['preloaded'].length;l++) {
if(player['tiles']['preloaded'][l]=="S"+tileCheck) {
player['tiles']['preloaded'].splice(l,1);
l--;
}
}
}
TRIG=TRIG.replace('S','');
txtlog("unloading south tiles ["+unloadingTiles.toString()+"]");
updateTRIG=true;
}
}
if(player['position']['x']>=rightX-margX) { // trigger EAST
if(TRIG.indexOf("E")==-1) {
var k=-1;
var l=1;
//if(TRIG=="N") k=-2
//if(TRIG=="S") l=2
loadingTiles=[];
for(k;k<=l;k++) {
var newtile="x"+(playerPosX+1+2)+"y"+(playerPosY+1+k);
var refreshed=false;
for(var m=0;m<player['tiles']['unflagged'].length;m++) {
if(player['tiles']['unflagged'][m]=="E"+newtile) {
player['tiles']['unflagged'].splice(m,1);
m--;
refreshed=true;
}
}
if(tileChanged) {
if(crossing=="W") {
refreshed=true;
}
}
if(!refreshed) {
loadingTiles.push(newtile);
}
player['tiles']['preloaded'].push("E"+newtile);
}
TRIG+="E";
txtlog("preloading east tiles ["+loadingTiles.toString()+"]");
updateTRIG=true;
}
} else if(player['position']['x']<=posX+margX) { // trigger WEST
if(TRIG.indexOf("W")==-1) {
var k=-1;
var l=1;
//if(TRIG=="N") k=-2
//if(TRIG=="S") l=2
loadingTiles=[];
for(k;k<=l;k++) {
var newtile="x"+(playerPosX+1-2)+"y"+(playerPosY+1+k);
var refreshed=false;
for(var m=0;m<player['tiles']['unflagged'].length;m++) {
if(player['tiles']['unflagged'][m]=="W"+newtile) {
player['tiles']['unflagged'].splice(m,1);
m--;
refreshed=true;
}
}
if(tileChanged) {
if(crossing=="E") {
refreshed=true;
}
}
if(!refreshed) {
loadingTiles.push(newtile);
}
player['tiles']['preloaded'].push("W"+newtile);
}
TRIG+="W";
txtlog("preloading west tiles ["+loadingTiles.toString()+"]");
updateTRIG=true;
}
} else { // unloading W/E --
if(TRIG.indexOf("W")!=-1) {
unloadingTiles=[];
for(var k=-1;k<=1;k++) {
var tileCheck="x"+(playerPosX+1-2)+"y"+(playerPosY+1+k);
unloadingTiles.push(tileCheck);
for(var l=0;l<player['tiles']['preloaded'].length;l++) {
if(player['tiles']['preloaded'][l]=="W"+tileCheck) {
player['tiles']['preloaded'].splice(l,1);
l--;
}
}
}
TRIG=TRIG.replace('W','');
txtlog("unloading west tiles ["+unloadingTiles.toString()+"]");
updateTRIG=true;
}
if(TRIG.indexOf("E")!=-1) {
unloadingTiles=[];
for(var k=-1;k<=1;k++) {
var tileCheck="x"+(playerPosX+1+2)+"y"+(playerPosY+1+k);
unloadingTiles.push(tileCheck);
for(var l=0;l<player['tiles']['preloaded'].length;l++) {
if(player['tiles']['preloaded'][l]=="E"+tileCheck) {
player['tiles']['preloaded'].splice(l,1);
l--;
}
}
}
TRIG=TRIG.replace('E','');
txtlog("unloading east tiles ["+unloadingTiles.toString()+"]");
updateTRIG=true;
}
}
for(var m=0;m<player['tiles']['unflagged'].length;m++) {
//if(player['tiles']['unflagged'][m]=="S"+newtile) {
txtlog("cleanup unloading unflagged leftover tile "+player['tiles']['unflagged'][m]);
player['tiles']['unflagged'].splice(m,1);
m--;
//refreshed=true;
//}
}
if(updateTRIG) {
//TRIG=TRIG.substr(TRIG.length-2);
grid['preload']=TRIG;
}
$('toptext').innerHTML='crossing - '+grid['preload'];
} else if(playerPosX-1==j) { // west block
adjX=-1;
adjY=0;
} else if(playerPosX+1==j) { // east block
adjX=1;
adjY=0;
}
} else if(playerPosY+1==i) { // south row
if(playerPosX==j) { // south block
adjX=0;
adjY=1;
} else if(playerPosX-1==j) { // south west block
adjX=-1;
adjY=1;
} else if(playerPosX+1==j) { // south east block
adjX=1;
adjY=1;
}
} else if(playerPosY-1==i) { // north row
if(playerPosX==j) { // north block
adjX=0;
adjY=-1;
} else if(playerPosX-1==j) { // north west block
adjX=-1;
adjY=-1;
} else if(playerPosX+1==j) { // north east block
adjX=1;
adjY=-1;
}
}
if(adjX!==null && adjY!==null) {
ctx.fillStyle="purple";
var drawMargin=false;
if(adjX==0 && adjY==0) {
if(grid['preload']=="") {
ctx.fillStyle="blue";
} else {
ctx.fillStyle="green";
}
drawMargin=true;
}
adjX*=grid['tilesize']['x'];
adjY*=grid['tilesize']['y'];
ctx.fillRect((playerPosX*grid['tilesize']['x'])+adjX,(playerPosY*grid['tilesize']['y'])+adjY,grid['tilesize']['x'],grid['tilesize']['y']);
var grassDist=2;
var objectDist=4;
var treeDist=7; // max 10 for 10 chunks in tile ahead
// draw chunks here ?
var chunknumX=Math.floor(grid['tilesize']['x']/grid['chunksize']['x']);
var chunknumY=Math.floor(grid['tilesize']['y']/grid['chunksize']['y']);
var subgridPosX=(j-playerPosX)+1; // -1 0 1 = west middle east to 0 1 2
var subgridPosY=(i-playerPosY)+1; // -1 0 1 = north middle south to 0 1 2
var edgeX=(j-subgridPosX)*grid['tilesize']['x'];
var edgeY=(i-subgridPosY)*grid['tilesize']['y'];
var subplayerX=Math.floor(player['position']['x']-edgeX);
var subplayerY=Math.floor(player['position']['y']-edgeY);
var chunkplayerX=Math.floor(subplayerX/grid['chunksize']['x']);
var chunkplayerY=Math.floor(subplayerY/grid['chunksize']['y']);
//subgridPosX+=1; // to 1 2 3
//subgridPosY+=1; // to 1 2 3
//txtlog("edgeX = "+edgeX);
//txtlog("subgridPosX = "+subgridPosX);
//txtlog("subplayerX = "+subplayerX);
//txtlog("chunkplayerX = "+chunkplayerX);
for(var k=0;k<chunknumY;k++) {
for(var l=0;l<chunknumX;l++) {
var subposX=l+(chunknumX*subgridPosX);
var subposY=k+(chunknumY*subgridPosY);
if((subposX<chunkplayerX+grassDist && subposX>chunkplayerX-grassDist) && (subposY<chunkplayerY+grassDist && subposY>chunkplayerY-grassDist)) {
// rect
ctx.fillStyle="green";
ctx.fillRect(posX+(l*grid['chunksize']['x']),posY+(k*grid['chunksize']['y']),grid['chunksize']['x'],grid['chunksize']['y']);
}
else if((subposX<chunkplayerX+objectDist && subposX>chunkplayerX-objectDist) && (subposY<chunkplayerY+objectDist && subposY>chunkplayerY-objectDist)) {
// rect
ctx.fillStyle="cyan";
ctx.fillRect(posX+(l*grid['chunksize']['x']),posY+(k*grid['chunksize']['y']),grid['chunksize']['x'],grid['chunksize']['y']);
} else if((subposX<chunkplayerX+treeDist && subposX>chunkplayerX-treeDist) && (subposY<chunkplayerY+treeDist && subposY>chunkplayerY-treeDist)) {
// rect
ctx.fillStyle="yellow";
ctx.fillRect(posX+(l*grid['chunksize']['x']),posY+(k*grid['chunksize']['y']),grid['chunksize']['x'],grid['chunksize']['y']);
}
ctx.strokeStyle="#666600";
ctx.beginPath();
ctx.moveTo(posX+(l*grid['chunksize']['x']),posY+(k*grid['chunksize']['y']));
ctx.lineTo(posX+(l*grid['chunksize']['x']),posY+(k*grid['chunksize']['y'])+grid['chunksize']['y']);
ctx.stroke();
ctx.strokeStyle="#666600";
ctx.beginPath();
ctx.moveTo(posX+(l*grid['chunksize']['x']),posY+(k*grid['chunksize']['y']));
ctx.lineTo(posX+(l*grid['chunksize']['x']+grid['chunksize']['x']),posY+(k*grid['chunksize']['y']));
ctx.stroke();
}
}
if(drawMargin) {
ctx.strokeStyle="red";
ctx.strokeRect(playerPosX*grid['tilesize']['x']+margX,playerPosY*grid['tilesize']['y']+margY,grid['tilesize']['x']-(margX*2),grid['tilesize']['y']-(margY*2));
}
}
for(var k=0;k<player['tiles']['preloaded'].length;k++) {
var tileCheck=player['tiles']['preloaded'][k].split('y');
if(tileCheck[0].substr(2)==(j+1) && tileCheck[1]==(i+1)) {
ctx.fillStyle="yellow";
ctx.fillRect(j*grid['tilesize']['x'],i*grid['tilesize']['y'],grid['tilesize']['x'],grid['tilesize']['y']);
}
}
var adjX2=null;
var adjY2=null;
if(grid['preload'].length>0) {
if(grid['preload'].indexOf("N")!=-1) {
if(i==playerPosY-2) {
if(j==playerPosX-1) adjX2=-1;
else if(j==playerPosX) adjX2=0;
else if(j==playerPosX+1) adjX2=1;
if(adjX2!=null) {
adjY2=-2;
}
}
} else if(grid['preload'].indexOf("S")!=-1) {
if(i==playerPosY+2) {
if(j==playerPosX-1) adjX2=-1;
else if(j==playerPosX) adjX2=0;
else if(j==playerPosX+1) adjX2=1;
if(adjX2!=null) {
adjY2=2;
}
}
}
if(grid['preload'].indexOf("W")!=-1) {
if(j==playerPosX-2) {
if(i==playerPosY-1) adjY2=-1;
else if(i==playerPosY) adjY2=0;
else if(i==playerPosY+1) adjY2=1;
if(adjY2!=null) {
adjX2=-2;
}
}
} else if(grid['preload'].indexOf("E")!=-1) {
if(j==playerPosX+2) {
if(i==playerPosY-1) adjY2=-1;
else if(i==playerPosY) adjY2=0;
else if(i==playerPosY+1) adjY2=1;
if(adjY2!=null) {
adjX2=2;
}
}
}
}
if(adjX2!==null && adjY2!==null) {
adjX2*=grid['tilesize']['x'];
adjY2*=grid['tilesize']['y'];
ctx.fillStyle="grey";
ctx.fillRect((playerPosX*grid['tilesize']['x'])+adjX2,(playerPosY*grid['tilesize']['y'])+adjY2,grid['tilesize']['x'],grid['tilesize']['y']);
}
}
}
ctx.fillStyle="red";
ctx.fillRect(player['position']['x']-3,player['position']['y']-3,6,6);
lCT=setTimeout(function() { loopCanvas(); },1000/fps);
}
var isWPressed=false;
var isSPressed=false;
var isAPressed=false;
var isDPressed=false;
document.addEventListener('keydown',(e) => {
if(e.keyCode==87 || e.keyCode==38) isWPressed=true;
if(e.keyCode==65 || e.keyCode==37) isAPressed=true;
if(e.keyCode==83 || e.keyCode==40) isSPressed=true;
if(e.keyCode==68 || e.keyCode==39) isDPressed=true;
});
document.addEventListener('keyup',(e) => {
if(e.keyCode==87 || e.keyCode==38) isWPressed=false;
if(e.keyCode==65 || e.keyCode==37) isAPressed=false;
if(e.keyCode==83 || e.keyCode==40) isSPressed=false;
if(e.keyCode==68 || e.keyCode==39) isDPressed=false;
});
var loglines=[];
function txtlog(txt="") {
//$('txtlog').innerHTML+=txt+"<br />\n";
loglines.push(txt);
if(loglines.length>100) {
loglines.splice(0,1);
var newprint="";
$('txtlog').innerHTML="";
for(var i=0;i<loglines.length;i++) {
newprint+=loglines[i]+"<br />";
}
$('txtlog').innerHTML=newprint;
} else {
$('txtlog').innerHTML+=txt+"<br />";
}
$('logcont').scrollTop=$('logcont').scrollHeight;
}
function init() {
//ajaxSource();
initCanvas();
}
</script>
</head>
<body onload="init();" ontouchmove="moveJoy(event);" onmousemove="moveJoy(event);" ontouchend="holdJoy(event,false,'left');" onmouseup="holdJoy(event,false,'left');">
<div class="tbl">
<div class="tr" style="height: 50px;">
<div class="td" style="text-align: center; vertical-align: middle;">
<span id="toptext"> </span>
</div>
</div>
<div class="tr">
<div class="td">
<div class="tbl">
<div class="tr">
<div class="td" style="width: 420px;vertical-align: middle;">
<center>
<canvas id="canvas"></canvas>
</center>
</div>
<div class="td" style="width: 150px; vertical-align: middle;">
<center>
<div id="leftJoyContainer" ontouchstart="holdJoy(event,true,'left');" onmousedown="holdJoy(event,true,'left');">
<div id="leftJoyStick"></div>
</div>
<br />
<br />
Speed: <span id="txtspeed">20%</span>
<br />
<div class="slidebar" ontouchstart="dragBall(event,true);" onmousedown="dragBall(event,true);">
<div class="dragball" id="dragBall1"></div>
</div>
</center>
</div>
<div class="td" style="vertical-align: top;">
<div id="logcont">
<span id="txtlog"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tr" style="height: 50px;">
<div class="td" style="text-align: center; vertical-align: middle;">
<span id="bottext"> </span>
</div>
</div>
</div>
<!--<div id="rightJoyContainer" ontouchstart="holdJoy(event,true,'right');"ontouchend="holdJoy(event,false,'right');" onmousedown="holdJoy(event,true,'right');" onmouseup="holdJoy(event,false,'right');">
<div id="rightJoyStick"></div>
</div>-->
<script type="text/javascript">
var joy={
left: $('leftJoyStick'), leftC: $('leftJoyContainer'),
right: $('rightJoyStick'), rightC: $('rightJoyContainer')
};
var touchIndex={touch1: null, touch2: null};
var draggingBall=false;
function dragBall(e,hold=false) {
if(hold) {
draggingBall=true;
} else {
draggingBall=false;
}
}
function holdJoy(e,hold=false,side="left") {
var register=false;
if(hold) {
if(touchIndex['touch1']==null) {
touchIndex['touch1']=side;
register=true;
} else if(touchIndex['touch2']==null) {
touchIndex['touch2']=side;
register=true;
}
} else {
joy[side].style.left="50%";
joy[side].style.top="50%";
joyRead[side].isHeld=false;
joyRead[side].ratio=0;
if(touchIndex['touch1']==side) {
touchIndex['touch1']=null;
}
if(touchIndex['touch2']==side) {
touchIndex['touch2']=null;
}
dragBall(e,false);
}
}
var joyRead={
left: { isHeld: false, ratio: 0, angle: 0 },
right: { isHeld: false, ratio: 0, angle: 0 },
};
var plX=-1;
var plY=-1;
var orbit=25;
function moveJoy(e) {
e=event || window.event;
var lX=e.clientX || e.targetTouches[0].pageX;
var lY=e.clientY || e.targetTouches[0].pageY;
var sY=window.scrollY;
var sX=window.scrollX;
plX=lX;
plY=lY;
if(touchIndex['touch1']!=null) {
e.preventDefault();
var side1=touchIndex['touch1'];
var eL=joy[side1+"C"].offsetLeft;
var eT=joy[side1+"C"].offsetTop;
var eW=joy[side1+"C"].clientWidth;
var eH=joy[side1+"C"].clientHeight;
var radian=Math.PI/180;
var eX=lX-eL; // bounding box = box to circle ?
if(eX<0) eX=0;
var eY=lY-eT;
if(eY<0) eY=0;
if(eX>eW) eX=eW;
if(eY>eH) eY=eH;
var pX=eX*100/eW; // percent 0 - 100
var pY=eY*100/eH;
var cangle=(Math.atan2(pY-50,pX-50) * 180) / Math.PI;
var rX=Math.round(Math.cos(cangle*radian)*orbit+25)+25;
var rY=Math.round(Math.sin(cangle*radian)*orbit+25)+25;
//console.log("pY: "+pY+" pX: "+pX);
//console.log("rY: "+pY+" rX: "+pX);
//console.log("cangle: "+cangle);
if(pX<50) {
if(pX<rX) pX=rX;
} else {
if(pX>rX) pX=rX;
}
if(pY<50) {
if(pY<rY) pY=rY;
} else {
if(pY>rY) pY=rY;
}
joy[side1].style.left=(pX)+"px";
joy[side1].style.top=(pY)+"px";
var a=50-pX;
var b=50-pY;
var c=Math.sqrt( a*a + b*b );
var v=cangle+180;
joyRead[side1].ratio=c*2;
joyRead[side1].angle=v;
joyRead[side1].isHeld=true;
//console.log('c * 2 ='+(c*2));
}
if(touchIndex['touch2']!=null) {
e.preventDefault();
var side2=touchIndex['touch2'];
var eX=lX-eL;
if(eX<0) eX=0;
var eY=lY-eT;
if(eY<0) eY=0;
if(eX>eW) eX=eW;
if(eY>eH) eY=eH;
var pX=eX*100/eW;
var pY=eY*100/eH;
var cangle=(Math.atan2(pY-50,pX-50) * 180) / Math.PI;
var rX=Math.round(Math.cos(cangle*radian)*orbit+25)+25;
var rY=Math.round(Math.sin(cangle*radian)*orbit+25)+25;
//console.log("pY: "+pY+" pX: "+pX);
//console.log("rY: "+pY+" rX: "+pX);
//console.log("cangle: "+cangle);
if(pX<50) {
if(pX<rX) pX=rX;
} else {
if(pX>rX) pX=rX;
}
if(pY<50) {
if(pY<rY) pY=rY;
} else {
if(pY>rY) pY=rY;
}
joy[side2].style.left=(pX)+"px";
joy[side2].style.top=(pY)+"px";
// cangle -90 forward
// 0 right
// 90 down
// 180 backward
// 270 = -90
// or cangle + 90
// 0 forward
// 180 back
var a=50-pX;
var b=50-pY;
var c=Math.sqrt( a*a + b*b ); // dist max 50~
var v=cangle+180;
joyRead[side2].ratio=c*2; // ~ 0-100
joyRead[side2].angle=v;
joyRead[side2].isHeld=true;
}
}
var plX,plY;
function mouse_position(e) {
e=event || window.event;
var lX=e.clientX || e.targetTouches[0].pageX;
var lY=e.clientY || e.targetTouches[0].pageY;
var sY=window.scrollY;
var sX=window.scrollX;
plX=lX;
plY=lY;
if(draggingBall) {
var ball=$('dragBall1');
var bX=ball.parentNode.offsetLeft;
var bW=ball.parentNode.clientWidth;
var diff=lX-bX;
if(diff>bW) diff=bW;
else if(diff<0) diff=0;
//var per=test*bW/100;
var per=diff*310/bW;
ball.style.left=(per/3.1)+"%";
if(per<1) per=1;
speed=per;
$('txtspeed').innerHTML=per+"%";
}
}
var leftJoyHold=false;
var rightJoyHold=false;
window.addEventListener('mousemove',function(e) {
if(leftJoyHold || rightJoyHold || draggingBall) {
mouse_position(e);
}
});
window.addEventListener('touchmove',function(e) {
if(leftJoyHold || rightJoyHold || draggingBall) {
mouse_position(e);
}
});
</script>
</body>
</html>
Top
©twily.info 2013 - 2024
2 167 619 visits