~firefox
23 itemsDownload ./*

23 itemsDownload ./*

..
stylish
circuit-canvas.html
gamemaker.html
hidecaption.ahk
homepage-centered-iframe.html
homepage-centered-slideshow.html
homepage-masonry.html
homepage-panels.html
homepage-sidebar.html
homepage-slide3d.html
homepage-stars.html
mailorder.html
noise.html
noise2.html
noise3.html
remoteButter.html
simple-homepage.html
slideshow.html
template.ajax.php
template.html
template.min.html
trigonometry.html
videoeditor.html


firefoxgamemaker.html
360•  6 months ago•  DownloadRawClose
6 months ago•  360

{}
<!DOCTYPE html>
<!--

    Author:        Twily  2015 - 2023
    Description:   Game/map continous loading simulation
    Website:       http://twily.info/

-->
<html>
<head>
<title>&gt;_</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">&nbsp;</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">&nbsp;</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
twily at twily dot info



2 045 146 visits
... ^ v