Lost

From 39d593054de993469809170ebf53a231caac92fb Mon Sep 17 00:00:00 2001 From: Mike Buland Date: Mon, 24 Oct 2016 14:14:19 -0600 Subject: It's all responsive now. Also it can loop. --- js/lost.css | 46 +++++++++++ js/lost.html | 27 ++++++ js/lost.js | 266 +++++++++++++++++++++++++++++++++++++++-------------------- 3 files changed, 248 insertions(+), 91 deletions(-) create mode 100644 js/lost.css diff --git a/js/lost.css b/js/lost.css new file mode 100644 index 0000000..7c51760 --- /dev/null +++ b/js/lost.css @@ -0,0 +1,46 @@ +@media (orientation: portrait) { +} + +@media (orientation: landscape) { + #maze-box { + display:inline-block; + vertical-align: middle; + } + #button-box { + display: inline-block; + vertical-align: middle; + } + #floor-box { + display: block; + vertical-align: top; + } + #sidebar { + display: inline-block; + vertical-align: top; + } + #ui-box { + text-align: center; + vertical-align: top; + } +} + +#maze-box { + text-align: center; +} + +#button-box { + text-align: center; +} + +#button-box table { + margin-left: auto; + margin-right: auto; +} + +.float-clear { + clear: both; +} + +#floor-box { + text-align: center; +} diff --git a/js/lost.html b/js/lost.html index 820b1fc..d4443ab 100644 --- a/js/lost.html +++ b/js/lost.html @@ -2,8 +2,35 @@ Lost + + +

Provide a number below for each dimension in the new maze. The numbers are the size of each dimension. Entering "10, 3" will create a maze that is 10 wide and 3 tall. Entering "5, 5, 5, 5, 5" will create a 5 dimensional maze, every dimension will be 5 wide.

+ + diff --git a/js/lost.js b/js/lost.js index a9d9556..20311f2 100644 --- a/js/lost.js +++ b/js/lost.js @@ -321,7 +321,7 @@ Map.prototype.get = function get( Position ) return this.aCell[this.getIndex( Position )]; } -Map.prototype.addWorm = function addWorm( pStart ) +Map.prototype.addWorm = function addWorm( pStart, dLoopChance ) { if( this.pPlayer === null ) { @@ -337,7 +337,8 @@ Map.prototype.addWorm = function addWorm( pStart ) new Worm( iNewId, pStart, - this + this, + dLoopChance ) ); return iNewId; @@ -440,13 +441,14 @@ function Vector( pPos, iDir ) // // Class: Worm // -function Worm( iId, pStart, rMap ) +function Worm( iId, pStart, rMap, dLoopChance ) { // Initialize basic state, we start with distance set to 1 this.iId = iId; this.pPosition = pStart; this.rMap = rMap; this.iDist = 1; + this.dLoopChance = dLoopChance; // Setup walls here to create an opening. We're only going to do // this on the first two dimensions. This assumes that we have at least @@ -480,10 +482,14 @@ Worm.prototype.timestep = function timestep() // Possible directions let pDirs = []; + let pLoopDirs; + let cCur; for(;;) { + cCur = this.rMap.get( this.pPosition ); let pBack = null; + pLoopDirs = []; for( let j = 0; j < iDims; j++ ) { let iSize = this.rMap.getSize( j ); @@ -500,6 +506,11 @@ Worm.prototype.timestep = function timestep() { pBack = pPos; } + else if( (cCur.iWalls&(1<<(j*2))) === 0 && + xCell.iPath === this.iId ) + { + pLoopDirs.push( new Vector( pPos, j*2 ) ); + } } pPos = this.pPosition.translate( j, 1 ); @@ -515,6 +526,11 @@ Worm.prototype.timestep = function timestep() { pBack = pPos; } + else if( (cCur.iWalls&(1<<(j*2+1))) === 0 && + xCell.iPath === this.iId ) + { + pLoopDirs.push( new Vector( pPos, j*2+1 ) ); + } } } @@ -536,25 +552,34 @@ Worm.prototype.timestep = function timestep() } } + cCur = this.rMap.get( this.pPosition ); let iSel = randInt( pDirs.length ); - let cCur = this.rMap.get( this.pPosition ); cCur.iWalls |= (1< 0 && lRand.random() <= this.dLoopChance ) + { + iSel = pLoopDirs[randInt( pLoopDirs.length )]; + cCur.iWalls |= (1< window.innerHeight/2 ) + iTargetSize = window.innerHeight/2; + } + + this.iBorder = 3; + this.iIconSize = Math.floor( + ((iTargetSize/this.rMap.getSize( 0 ))-3-(this.iIconSquare*3))/this.iIconSquare + ); + if( this.iIconSize > 15 ) + this.iIconSize = 15; + this.iCellSize = this.iBorder + this.iIconSquare*(this.iIconSize+this.iBorder); @@ -622,7 +676,7 @@ function RenderCanvas2D( rMap, eParent ) this.eCanvas = document.createElement('canvas'); this.eCanvas.width = this.iCellSize*this.rMap.getSize( 0 ); this.eCanvas.height = this.iCellSize*this.rMap.getSize( 1 ); - eParent.appendChild( this.eCanvas ); + eMazeContainer.appendChild( this.eCanvas ); this.ctx = this.eCanvas.getContext("2d"); this.ctx.lineWidth = 1.0; this.ctx.font = Math.ceil(this.iIconSize) + 'px sans serif'; @@ -632,10 +686,11 @@ function RenderCanvas2D( rMap, eParent ) this.render(); - this.btnBox = document.createElement('div'); - eParent.appendChild( document.createElement('br') ); - eParent.appendChild( document.createElement('br') ); - eParent.appendChild( this.btnBox ); + this.btnBox = eUIContainer; + this.readoutBox = eReadoutBox; + this.readoutNode = document.createTextNode(''); + this.readoutBox.appendChild( this.readoutNode ); + this.updateReadout(); let cardTbl; let cardRow; @@ -698,25 +753,28 @@ function RenderCanvas2D( rMap, eParent ) this.btnBox.appendChild( cardTbl ); - cardTbl = document.createElement('table'); - for( let j = 3; j < this.rMap.getDims(); j++ ) + if( this.rMap.getDims() >= 3 ) { - cardRow = document.createElement('tr'); - cardTbl.appendChild( cardRow ); + cardTbl = document.createElement('table'); + for( let j = 3; j < this.rMap.getDims(); j++ ) + { + cardRow = document.createElement('tr'); + cardTbl.appendChild( cardRow ); - cardTd = document.createElement('td'); - this.aMoveButtons[j*2] = cardTd.appendChild( - createMoveButton( this.rMap, j, -1, (j+1) + '-' ) - ); - cardRow.appendChild( cardTd ); - - cardTd = document.createElement('td'); - this.aMoveButtons[j*2+1] = cardTd.appendChild( - createMoveButton( this.rMap, j, 1, (j+1) + '+' ) - ); - cardRow.appendChild( cardTd ); + cardTd = document.createElement('td'); + this.aMoveButtons[j*2] = cardTd.appendChild( + createMoveButton( this.rMap, j, -1, (j+1) + '-' ) + ); + cardRow.appendChild( cardTd ); + + cardTd = document.createElement('td'); + this.aMoveButtons[j*2+1] = cardTd.appendChild( + createMoveButton( this.rMap, j, 1, (j+1) + '+' ) + ); + cardRow.appendChild( cardTd ); + } + this.btnBox.appendChild( cardTbl ); } - this.btnBox.appendChild( cardTbl ); this.updateButtons(); } @@ -739,7 +797,23 @@ RenderCanvas2D.prototype.render = function render() let iPlayerIcon = Math.floor(this.iIconSquare*0.5) + Math.floor(this.iIconSquare*0.5) * this.iIconSquare; + + this.ctx.beginPath(); + this.ctx.strokeStyle = 'whitesmoke'; + for( let x = 0; x < this.rMap.getSize( 0 ); x++ ) + { + this.ctx.moveTo( x*iSize, 0 ); + this.ctx.lineTo( x*iSize, this.rMap.getSize( 1 )*iSize ); + } + for( let y = 0; y < this.rMap.getSize( 1 ); y++ ) + { + this.ctx.moveTo( 0, y*iSize ); + this.ctx.lineTo( this.rMap.getSize( 0 )*iSize, y*iSize ); + } + this.ctx.stroke(); + this.ctx.beginPath(); + this.ctx.strokeStyle = 'black'; for( let x = 0; x < this.rMap.getSize( 0 ); x++ ) { for( let y = 0; y < this.rMap.getSize( 1 ); y++ ) @@ -887,6 +961,20 @@ RenderCanvas2D.prototype.updateButtons = function updateButtons() } } +RenderCanvas2D.prototype.updateReadout = function updateReadout() +{ + if( this.rMap.getDims() <= 2 ) + return; + + let text = 'Floor: ' + this.rMap.pPlayer.get( 2 ); + for( let j = 3; j < this.rMap.getDims(); j++ ) + { + text += ', ' + this.rMap.pPlayer.get( j ) + } + + this.readoutNode.textContent = text; +} + RenderCanvas2D.prototype.setVictory = function setVictory() { while( this.btnBox.hasChildNodes() ) @@ -914,72 +1002,68 @@ RenderCanvas2D.prototype.setFloor = function setFloor( aFloor ) // Initialize // -let p = new Position( 4, 3, 3, 3, 3 ); - -if( document.location.search !== '' ) +function lostInit( properties ) { - let dat = document.location.search.slice(1); - let datChunks = dat.split('&'); - for( let j = 0; j < datChunks.length; j++ ) + let p = new Position( 4, 3, 3, 3, 3 ); + + if( document.location.search !== '' ) { - let pair = datChunks[j].split('='); - if( pair.length == 2 ) + let dat = document.location.search.slice(1); + let datChunks = dat.split('&'); + for( let j = 0; j < datChunks.length; j++ ) { - if( pair[0] == 'seed' ) - { - lRand.setSeed( parseInt( decodeURIComponent( pair[1] ), 10 ) ); - } - else if( pair[0] == 'dims' ) + let pair = datChunks[j].split('='); + if( pair.length == 2 ) { - p = new Position( decodeURIComponent( pair[1] ) ); + if( pair[0] == 'seed' ) + { + lRand.setSeed( parseInt( decodeURIComponent( pair[1] ), 10 ) ); + } + else if( pair[0] == 'dims' ) + { + p = new Position( decodeURIComponent( pair[1] ) ); + } } } } + + let m = new Map( p ); + let exit1 = new Position( p.getDims() ); + let exit2 = new Position( p.getDims() ); + exit2.set( 1, p.get( 1 )-1 ); + m.addWorm( exit1, 0.05 ); + m.addWorm( exit2, 0.05 ); + m.buildMaze(); + + let eEditorBox = document.getElementById(properties['editor']); + let eShareBox = document.getElementById(properties['share']); + + let rend = new RenderCanvas2D( m, properties['render']['params'] ); + + let formDiv = eEditorBox; + let form = document.createElement('form'); + let dims = document.createElement('input'); + dims.name = 'dims'; + dims.value = p.toString(); + let sub = document.createElement('input'); + sub.type = 'submit'; + sub.value = 'New maze!'; + form.appendChild( dims ); + form.appendChild( document.createTextNode(' ') ); + form.appendChild( sub ); + formDiv.appendChild( form ); + + let d = eShareBox; + let dLink = document.createElement('a'); + let trgUrl = document.location.toString(); + let query = trgUrl.indexOf('?'); + if( query >= 0 ) + { + trgUrl = trgUrl.substring(0, query); + } + trgUrl += '?seed=' + lRand.getSeed() + '&dims=' + p.toString(); + dLink.href = trgUrl; + dLink.appendChild( document.createTextNode('Share this maze!') ); + d.appendChild(dLink); } -let m = new Map( p ); -let exit1 = new Position( p.getDims() ); -let exit2 = new Position( p.getDims() ); -exit2.set( 1, p.get( 1 )-1 ); -m.addWorm( exit1 ); -m.addWorm( exit2 ); -m.buildMaze(); - -let rend = new RenderCanvas2D( m, document.body ); - -let formDiv = document.createElement('div'); -let form = document.createElement('form'); -let dims = document.createElement('input'); -dims.name = 'dims'; -dims.value = p.toString(); -let sub = document.createElement('input'); -sub.type = 'submit'; -sub.value = 'New maze!'; -form.appendChild( dims ); -form.appendChild( document.createTextNode(' ') ); -form.appendChild( sub ); -let pExp = document.createElement('p'); -pExp.appendChild( - document.createTextNode( - 'Provide a number below for each dimension in the new maze. The numbers are the size of each dimension. Entering "10, 3" will create a maze that is 10 wide and 3 tall. Entering "5, 5, 5, 5, 5" will create a 5 dimensional maze, every dimension will be 5 wide.' - ) - ); -formDiv.appendChild( pExp ); -formDiv.appendChild( form ); -document.body.appendChild( document.createElement('br') ); -document.body.appendChild( formDiv ); - -let d = document.createElement('div'); -let dLink = document.createElement('a'); -let trgUrl = document.location.toString(); -let query = trgUrl.indexOf('?'); -if( query >= 0 ) -{ - trgUrl = trgUrl.substring(0, query); -} -trgUrl += '?seed=' + lRand.getSeed() + '&dims=' + p.toString(); -dLink.href = trgUrl; -dLink.appendChild( document.createTextNode('Share this maze!') ); -d.appendChild(dLink); -document.body.appendChild( document.createElement('br') ); -document.body.appendChild( d ); -- cgit v1.2.3