@ -4,6 +4,7 @@ const RUNNING = 1;
const REVIEWING = 2 ; const REVIEWING = 2 ;
const TESTING = 3 ; const TESTING = 3 ;
const FINISH = 4 ; const FINISH = 4 ;
const PAUSED = 5 ;
const UP = 0 ; const UP = 0 ;
const RIGHT = 1 ; const RIGHT = 1 ;
@ -15,9 +16,9 @@ const BLUE = "B";
const GREEN = "G" ; const GREEN = "G" ;
const YELLOW = "Y" ; const YELLOW = "Y" ;
const PURPLE = "P" ; const PURPLE = "P" ;
const PINK = "PI " ; const PINK = "p " ;
const BLACK = "BL " ; const BLACK = "b " ;
const GRAY = "GR " ; const GRAY = "g " ;
const ALIVE = 0 ; const ALIVE = 0 ;
const DEAD = 1 ; const DEAD = 1 ;
@ -29,6 +30,7 @@ var BOT_DIR = RIGHT
var BOT _STATE = ALIVE var BOT _STATE = ALIVE
var BOT _TAPE = "RB" var BOT _TAPE = "RB"
var BOT _QUEUE = [ ] var BOT _QUEUE = [ ]
var DELETEMODE = false
var BELTDOWN = { type : "BELT" , direction : DOWN /*,direction2 - defines a secondary direction. For two belts at once.*/ } var BELTDOWN = { type : "BELT" , direction : DOWN /*,direction2 - defines a secondary direction. For two belts at once.*/ }
var BELTRIGHT = { type : "BELT" , direction : RIGHT } var BELTRIGHT = { type : "BELT" , direction : RIGHT }
@ -38,10 +40,10 @@ var BRANCHDOWN = {type:"BRANCH",direction:DOWN,color1:RED,color2:BLUE} //color 1
var BRANCHLEFT = { type : "BRANCH" , direction : LEFT , color1 : RED , color2 : BLUE } var BRANCHLEFT = { type : "BRANCH" , direction : LEFT , color1 : RED , color2 : BLUE }
var BRANCHRIGHT = { type : "BRANCH" , direction : RIGHT , color1 : RED , color2 : BLUE } var BRANCHRIGHT = { type : "BRANCH" , direction : RIGHT , color1 : RED , color2 : BLUE }
var BRANCHUP = { type : "BRANCH" , direction : UP , color1 : RED , color2 : BLUE } var BRANCHUP = { type : "BRANCH" , direction : UP , color1 : RED , color2 : BLUE }
var WRITERDOWN = { type : "WRITER" , direction : DOWN , color : RED /*overwrite - if turned on, the writer overwrites the current tape position instead of appending.*/ } var WRITERDOWN = { type : "WRITER" , direction : DOWN , color1 : RED /*overwrite - if turned on, the writer overwrites the current tape position instead of appending.*/ }
var WRITERLEFT = { type : "WRITER" , direction : LEFT , color : RED } var WRITERLEFT = { type : "WRITER" , direction : LEFT , color1 : RED }
var WRITERRIGHT = { type : "WRITER" , direction : RIGHT , color : RED } var WRITERRIGHT = { type : "WRITER" , direction : RIGHT , color1 : RED }
var WRITERUP = { type : "WRITER" , direction : UP , color : RED } var WRITERUP = { type : "WRITER" , direction : UP , color1 : RED }
var DEF _BRANCHUP _RB = { img : IMAGE _BRANCH , color1 : RED , color2 : BLUE , type : "BRANCH" } var DEF _BRANCHUP _RB = { img : IMAGE _BRANCH , color1 : RED , color2 : BLUE , type : "BRANCH" }
var DEF _BRANCHUP _BR = { img : IMAGE _BRANCH , color1 : BLUE , color2 : RED , type : "BRANCH" } var DEF _BRANCHUP _BR = { img : IMAGE _BRANCH , color1 : BLUE , color2 : RED , type : "BRANCH" }
@ -72,6 +74,8 @@ var LAST_MOUSE_Y=0;
var ITEM _DIRECTION = RIGHT ; var ITEM _DIRECTION = RIGHT ;
var dashOffset = 0
var SUBMENU = { var SUBMENU = {
visible : false , visible : false ,
width : 0 , width : 0 ,
@ -82,20 +86,102 @@ var SUBMENU = {
var BUTTON _SELECTED = undefined var BUTTON _SELECTED = undefined
var ITEM _SELECTED = undefined var ITEM _SELECTED = undefined
var KEY _ROTATION _RIGHT = [ "d" , "l" , "6" , "ArrowRight" ]
var KEY _ROTATION _LEFT = [ "a" , "h" , "4" , "ArrowLeft" ]
var KEY _ROTATION _UP = [ "w" , "k" , "8" , "ArrowUp" ]
var KEY _ROTATION _DOWN = [ "s" , "j" , "2" , "ArrowDown" ]
var CONVEYOR _BUILD _BUTTON = { img : IMAGE _CONVEYOR , x : - 1 , y : - 1 , w : - 1 , h : - 1 , lastselected : DEF _CONVEYOR } var CONVEYOR _BUILD _BUTTON = { img : IMAGE _CONVEYOR , x : - 1 , y : - 1 , w : - 1 , h : - 1 , lastselected : DEF _CONVEYOR }
var BRANCH _BUILD _BUTTON = { img : IMAGE _BRANCH , x : - 1 , y : - 1 , w : - 1 , h : - 1 , submenu _buttons : [ DEF _BRANCHUP _RB , DEF _BRANCHUP _BR , DEF _BRANCHUP _GY , DEF _BRANCHUP _YG , DEF _BRANCHUP _PPI , DEF _BRANCHUP _PIP , DEF _BRANCHUP _BLGR , DEF _BRANCHUP _GRBL ] , lastselected : undefined } var BRANCH _BUILD _BUTTON = { img : IMAGE _BRANCH , x : - 1 , y : - 1 , w : - 1 , h : - 1 , submenu _buttons : [ DEF _BRANCHUP _RB , DEF _BRANCHUP _BR , DEF _BRANCHUP _GY , DEF _BRANCHUP _YG , DEF _BRANCHUP _PPI , DEF _BRANCHUP _PIP , DEF _BRANCHUP _BLGR , DEF _BRANCHUP _GRBL ] , lastselected : undefined }
var WRITER _BUILD _BUTTON = { img : IMAGE _WRITER , x : - 1 , y : - 1 , w : - 1 , h : - 1 , submenu _buttons : [ DEF _WRITERRIGHT _R , DEF _WRITERRIGHT _B , DEF _WRITERRIGHT _G , DEF _WRITERRIGHT _Y , DEF _WRITERRIGHT _P , DEF _WRITERRIGHT _PI , DEF _WRITERRIGHT _BL , DEF _WRITERRIGHT _GR ] , lastselected : undefined } var WRITER _BUILD _BUTTON = { img : IMAGE _WRITER , x : - 1 , y : - 1 , w : - 1 , h : - 1 , submenu _buttons : [ DEF _WRITERRIGHT _R , DEF _WRITERRIGHT _B , DEF _WRITERRIGHT _G , DEF _WRITERRIGHT _Y , DEF _WRITERRIGHT _P , DEF _WRITERRIGHT _PI , DEF _WRITERRIGHT _BL , DEF _WRITERRIGHT _GR ] , lastselected : undefined }
var ROTATE _CLOCKWISE _BUTTON = { img : IMAGE _ROTATE _CLOCKWISE , x : - 1 , y : - 1 , w : - 1 , h : - 1 , cb : rotateClockwise
}
var ROTATE _COUNTERCLOCKWISE _BUTTON = { img : IMAGE _ROTATE _COUNTERCLOCKWISE , x : - 1 , y : - 1 , w : - 1 , h : - 1 , cb : rotateCounterClockwise
}
var WRITER _BUILD _BUTTON = { img : IMAGE _WRITER , x : - 1 , y : - 1 , w : - 1 , h : - 1 , submenu _buttons : [ DEF _WRITERRIGHT _R , DEF _WRITERRIGHT _B , DEF _WRITERRIGHT _G , DEF _WRITERRIGHT _Y , DEF _WRITERRIGHT _P , DEF _WRITERRIGHT _PI , DEF _WRITERRIGHT _BL , DEF _WRITERRIGHT _GR ] , lastselected : undefined }
var PLAY _BUTTON = { img : IMAGE _PLAY , x : - 1 , y : - 1 , w : - 1 , h : - 1 , cb : runGameSimulation
}
var PAUSE _BUTTON = { img : IMAGE _PAUSE , x : - 1 , y : - 1 , w : - 1 , h : - 1 , cb : pauseGameSimulation
}
var RESET _BUTTON = { img : IMAGE _RESET , x : - 1 , y : - 1 , w : - 1 , h : - 1 , cb : resetSimulation
}
var DELETE _BUTTON = { img : IMAGE _DELETE , x : - 1 , y : - 1 , w : - 1 , h : - 1 , cb : toggleDeleteMode
}
var MENU = { var MENU = {
visible : true , visible : true ,
buttons : [ CONVEYOR _BUILD _BUTTON , BRANCH _BUILD _BUTTON , WRITER _BUILD _BUTTON ] buttons : [ CONVEYOR _BUILD _BUTTON , BRANCH _BUILD _BUTTON , WRITER _BUILD _BUTTON , ROTATE _COUNTERCLOCKWISE _BUTTON , ROTATE _CLOCKWISE _BUTTON , DELETE _BUTTON , PLAY _BUTTON , RESET _BUTTON ]
}
function runGameSimulation ( ) {
gameState = TESTING
generateBotQueue ( )
//console.log(BOT_QUEUE)
if ( BOT _QUEUE . length > 0 ) {
BOT _TAPE = BOT _QUEUE [ 0 ]
} else {
BOT _TAPE = "BR"
}
BOT _STATE = ALIVE
gameState = WAITING
BOT _X = gameStage . start . x
BOT _Y = gameStage . start . y
BOT _DIR = RIGHT
gameState = RUNNING
for ( var i = 0 ; i < MENU . buttons . length ; i ++ ) {
if ( MENU . buttons [ i ] . img === IMAGE _PLAY ) {
MENU . buttons [ i ] = PAUSE _BUTTON
break ;
}
}
}
function endARound ( ) {
for ( var i = 0 ; i < MENU . buttons . length ; i ++ ) {
if ( MENU . buttons [ i ] . img === IMAGE _PAUSE ) {
MENU . buttons [ i ] = PLAY _BUTTON
break ;
}
}
}
function pauseGameSimulation ( ) {
gameState = PAUSED
endARound ( )
}
function resetSimulation ( ) {
BOT _STATE = ALIVE
gameState = WAITING
BOT _X = gameStage . start . x
BOT _Y = gameStage . start . y
BOT _DIR = RIGHT
endARound ( )
}
function toggleDeleteMode ( ) {
DELETEMODE = ! DELETEMODE
if ( DELETEMODE ) {
ITEM _SELECTED = undefined
document . body . style . cursor = "url('delete_cursor.png') 8 8,auto"
} else {
document . body . style . cursor = "url('cursor.png') 8 8,auto"
}
}
function rotateClockwise ( ) {
ITEM _DIRECTION = ( ITEM _DIRECTION + 1 ) % 4
}
function rotateCounterClockwise ( ) {
ITEM _DIRECTION = ( ITEM _DIRECTION - 1 ) ;
if ( ITEM _DIRECTION < 0 ) { ITEM _DIRECTION = 3 }
} }
var lastGameUpdate = 0 ; var lastGameUpdate = 0 ;
var gameSpeed = 1000 / 1 ; var gameSpeed = 1000 / 1 ;
var gameState = RUNNING ; var gameState = WAIT ING;
var gameStage = 0 ; var gameStage = 0 ;
var LEVEL0 = [ var LEVEL0 = [
@ -140,6 +226,9 @@ var STAGE2 = {
level : createGrid ( 5 , 5 , 4 , 2 ) , level : createGrid ( 5 , 5 , 4 , 2 ) ,
start : { x : 0 , y : 2 } , start : { x : 0 , y : 2 } ,
accept : ( tape ) => { accept : ( tape ) => {
if ( tape . length === 0 ) {
return false ;
}
for ( var i = 0 ; i < tape . length ; i ++ ) { for ( var i = 0 ; i < tape . length ; i ++ ) {
if ( tape [ i ] !== "B" ) { if ( tape [ i ] !== "B" ) {
return false ; return false ;
@ -149,7 +238,7 @@ var STAGE2 = {
} }
} }
var gameGrid = [ ] var gameGrid = [ ]
function createGrid ( width = 5 , height = 5 , exitX = 4 , exitY = 2 ) { function createGrid ( width = 5 , height = 5 , exitX = 4 , exitY = 2 ) {
var grid = [ ] var grid = [ ]
@ -177,6 +266,7 @@ function resetGame() {
} }
function generateBotQueue ( ) { function generateBotQueue ( ) {
BOT _QUEUE = [ ]
if ( gameState === TESTING ) { if ( gameState === TESTING ) {
//Iterate up to...15 RED/BLUE combinations.
//Iterate up to...15 RED/BLUE combinations.
var MAX _VALUE = 1000 var MAX _VALUE = 1000
@ -210,7 +300,6 @@ function getSimulatedBotResult(tape) {
var iterations = 0 var iterations = 0
while ( iterations < MAX _ITERATIONS ) { while ( iterations < MAX _ITERATIONS ) {
runBot ( true ) runBot ( true )
//renderGame()
if ( gameState === REVIEWING ) { if ( gameState === REVIEWING ) {
//console.log("Rejected")
//console.log("Rejected")
return false return false
@ -239,6 +328,19 @@ function ConvertNumberToTape(val) {
return tape ; return tape ;
} }
function setNextSquare ( offsetX , offsetY ) {
if ( gameGrid [ BOT _Y + offsetY ] !== undefined ) {
var nextSquare = gameGrid [ BOT _Y + offsetY ] [ BOT _X + offsetX ] ;
BOT _X += offsetX
BOT _Y += offsetY
return nextSquare
} else {
gameState = REVIEWING
BOT _STATE = DEAD
return undefined
}
}
function runBot ( testing ) { function runBot ( testing ) {
//console.log(new Date().getTime())
//console.log(new Date().getTime())
if ( lastGameUpdate < new Date ( ) . getTime ( ) || testing ) { if ( lastGameUpdate < new Date ( ) . getTime ( ) || testing ) {
@ -247,27 +349,35 @@ function runBot(testing) {
var nextSquare = { } var nextSquare = { }
switch ( BOT _DIR ) { switch ( BOT _DIR ) {
case UP : { case UP : {
nextSquare = gameGrid [ -- BOT _Y ] [ BOT _X ] ; nextSquare = setNextSquare ( 0 , - 1 )
BOT _DIR = ( nextSquare . direction2 && if ( nextSquare !== undefined ) {
( nextSquare . direction2 === UP || nextSquare . direction2 === DOWN ) ) ? nextSquare . direction2 : nextSquare . direction BOT _DIR = ( nextSquare . direction2 &&
( nextSquare . direction2 === UP || nextSquare . direction2 === DOWN ) ) ? nextSquare . direction2 : nextSquare . direction
}
} break ; } break ;
case LEFT : { case LEFT : {
nextSquare = gameGrid [ BOT _Y ] [ -- BOT _X ] ; nextSquare = setNextSquare ( - 1 , 0 )
BOT _DIR = ( nextSquare . direction2 && if ( nextSquare !== undefined ) {
( nextSquare . direction2 === RIGHT || nextSquare . direction2 === LEFT ) ) ? nextSquare . direction2 : nextSquare . direction BOT _DIR = ( nextSquare . direction2 &&
( nextSquare . direction2 === RIGHT || nextSquare . direction2 === LEFT ) ) ? nextSquare . direction2 : nextSquare . direction
}
} break ; } break ;
case RIGHT : { case RIGHT : {
nextSquare = gameGrid [ BOT _Y ] [ ++ BOT _X ] ; nextSquare = setNextSquare ( 1 , 0 ) ;
BOT _DIR = ( nextSquare . direction2 && if ( nextSquare !== undefined ) {
( nextSquare . direction2 === RIGHT || nextSquare . direction2 === LEFT ) ) ? nextSquare . direction2 : nextSquare . direction BOT _DIR = ( nextSquare . direction2 &&
( nextSquare . direction2 === RIGHT || nextSquare . direction2 === LEFT ) ) ? nextSquare . direction2 : nextSquare . direction
}
} break ; } break ;
case DOWN : { case DOWN : {
nextSquare = gameGrid [ ++ BOT _Y ] [ BOT _X ] ; nextSquare = setNextSquare ( 0 , 1 )
BOT _DIR = ( nextSquare . direction2 && if ( nextSquare !== undefined ) {
( nextSquare . direction2 === UP || nextSquare . direction2 === DOWN ) ) ? nextSquare . direction2 : nextSquare . direction BOT _DIR = ( nextSquare . direction2 &&
( nextSquare . direction2 === UP || nextSquare . direction2 === DOWN ) ) ? nextSquare . direction2 : nextSquare . direction
}
} break ; } break ;
} }
if ( nextSquare . direction !== undefined || nextSquare . type === "EXIT" ) { if ( nextSquare !== undefined && ( nextSquare . direction !== undefined || nextSquare . type === "EXIT" ) ) {
switch ( nextSquare . type ) { switch ( nextSquare . type ) {
case "BRANCH" : { case "BRANCH" : {
//console.log("Branch found")
//console.log("Branch found")
@ -286,9 +396,9 @@ function runBot(testing) {
} break ; } break ;
case "WRITER" : { case "WRITER" : {
if ( nextSquare . overwrite ) { if ( nextSquare . overwrite ) {
OverwriteTape ( nextSquare . color ) OverwriteTape ( nextSquare . color1 )
} else { } else {
AppendTape ( nextSquare . color ) AppendTape ( nextSquare . color1 )
} }
BOT _DIR = nextSquare . direction BOT _DIR = nextSquare . direction
} break ; } break ;
@ -301,8 +411,8 @@ function runBot(testing) {
} else { } else {
gameState = REVIEWING gameState = REVIEWING
BOT _STATE = DEAD BOT _STATE = DEAD
endARound ( )
} }
//if (!testing){renderGame()}
} }
} }
@ -330,7 +440,32 @@ function setupGame() {
canvas . addEventListener ( "touchmove" , updateMouse ) canvas . addEventListener ( "touchmove" , updateMouse )
canvas . addEventListener ( "touchstart" , clickEvent ) canvas . addEventListener ( "touchstart" , clickEvent )
canvas . addEventListener ( "touchend" , releaseEvent ) canvas . addEventListener ( "touchend" , releaseEvent )
//gameGrid = [...createGrid(5,5)]
document . addEventListener ( "keydown" , keydownEvent )
loadStage ( STAGE2 )
}
function CheckKeys ( e , keys ) {
for ( var key of keys ) {
if ( key === e . key ) {
return true
}
}
return false
}
function keydownEvent ( e ) {
if ( CheckKeys ( e , KEY _ROTATION _RIGHT ) ) {
ITEM _DIRECTION = RIGHT
}
if ( CheckKeys ( e , KEY _ROTATION _LEFT ) ) {
ITEM _DIRECTION = LEFT
}
if ( CheckKeys ( e , KEY _ROTATION _UP ) ) {
ITEM _DIRECTION = UP
}
if ( CheckKeys ( e , KEY _ROTATION _DOWN ) ) {
ITEM _DIRECTION = DOWN
}
} }
function mouseOverButton ( canvas , e , button ) { function mouseOverButton ( canvas , e , button ) {
@ -345,35 +480,49 @@ function clickEvent(e) {
if ( MENU . visible ) { if ( MENU . visible ) {
for ( var button of MENU . buttons ) { for ( var button of MENU . buttons ) {
if ( mouseOverButton ( canvas , e , button ) ) { if ( mouseOverButton ( canvas , e , button ) ) {
if ( button . submenu _buttons && button . submenu _buttons . length > 0 ) { if ( button . cb !== undefined ) {
BUTTON _SELECTED = button ; button . cb ( )
SUBMENU . visible = true ; return ;
SUBMENU . buttons = [ ] } else {
var index = 0 ; DELETEMODE = false
for ( var button2 of BUTTON _SELECTED . submenu _buttons ) { document . body . style . cursor = "url('cursor.png') 8 8,auto"
var buttonX = ( ( index % 3 ) * 48 ) + 16 if ( button . submenu _buttons && button . submenu _buttons . length > 0 ) {
var buttonY = canvas . height * 0.8 - ( Math . floor ( index / 3 ) * 48 ) - 40 BUTTON _SELECTED = button ;
SUBMENU . buttons . push ( { def : button2 , img : button2 . img , x : buttonX , y : buttonY , w : 32 , h : 32 } ) SUBMENU . visible = true ;
index ++ ; SUBMENU . buttons = [ ]
var index = 0 ;
for ( var button2 of BUTTON _SELECTED . submenu _buttons ) {
var buttonX = ( ( index % 3 ) * 48 ) + 16
var buttonY = canvas . height * 0.8 - ( Math . floor ( index / 3 ) * 48 ) - 40
SUBMENU . buttons . push ( { def : button2 , img : button2 . img , x : buttonX , y : buttonY , w : 32 , h : 32 } )
index ++ ;
}
} }
ITEM _SELECTED = button . lastselected
//console.log(button)
return
} }
ITEM _SELECTED = button . lastselected
//console.log(button)
return
} }
} }
} }
//console.log(getGridCoords(getMousePos(e)))
//console.log(getGridCoords(getMousePos(e)))
if ( ITEM _SELECTED !== undefined ) { if ( ITEM _SELECTED !== undefined || DELETEMODE ) {
var clickCoords = getGridCoords ( getMousePos ( e ) ) var clickCoords = getGridCoords ( getMousePos ( e ) )
if ( clickCoords . x >= 0 && clickCoords . y >= 0 && clickCoords . y < gameGrid . length && clickCoords . x < gameGrid [ clickCoords . y ] . length ) { if ( clickCoords . x >= 0 && clickCoords . y >= 0 && clickCoords . y < gameGrid . length && clickCoords . x < gameGrid [ clickCoords . y ] . length ) {
placeObject ( clickCoords , ITEM _SELECTED ) if ( DELETEMODE ) {
deleteObject ( clickCoords )
} else {
placeObject ( clickCoords , ITEM _SELECTED )
}
//console.log(gameGrid)
//console.log(gameGrid)
} }
} }
} }
function deleteObject ( coords , def ) {
gameGrid [ coords . y ] [ coords . x ] = { }
}
function placeObject ( coords , def ) { function placeObject ( coords , def ) {
var newObj = { ... def , direction : ITEM _DIRECTION } var newObj = { ... def , direction : ITEM _DIRECTION }
gameGrid [ coords . y ] [ coords . x ] = newObj gameGrid [ coords . y ] [ coords . x ] = newObj
@ -395,6 +544,7 @@ function releaseEvent(e) {
return return
} }
} }
SUBMENU . visible = false
} }
} }
@ -421,6 +571,7 @@ function deepCopy(arr) {
} }
function step ( ) { function step ( ) {
dashOffset += 0.3
if ( gameState === RUNNING ) { if ( gameState === RUNNING ) {
runBot ( ) runBot ( )
} }
@ -450,26 +601,31 @@ function getMousePos(e) {
} }
function renderGame ( ctx ) { function renderGame ( ctx ) {
var displayGrid = [ ] ctx . lineWidth = 1
for ( var y = 0 ; y <= gameGrid . length ; y ++ ) { ctx . strokeStyle = "#000000"
ctx . setLineDash ( [ ] )
for ( var y = 0 ; y <= gameGrid . length + 1 ; y ++ ) {
ctx . moveTo ( GRID _X , GRID _Y + GRID _H * y ) ; ctx . moveTo ( GRID _X , GRID _Y + GRID _H * y ) ;
ctx . lineTo ( GRID _X + GRID _W * gameGrid . length , GRID _Y + GRID _H * y ) ; ctx . lineTo ( GRID _X + GRID _W * ( gameGrid . length + 1 ) , GRID _Y + GRID _H * y ) ;
} }
for ( var x = 0 ; x <= gameGrid . length ; x ++ ) { for ( var x = 0 ; x <= gameGrid . length + 1 ; x ++ ) {
ctx . moveTo ( GRID _X + GRID _W * x , GRID _Y ) ; ctx . moveTo ( GRID _X + GRID _W * x , GRID _Y ) ;
ctx . lineTo ( GRID _X + GRID _W * x , GRID _Y + GRID _H * gameGrid . length ) ; ctx . lineTo ( GRID _X + GRID _W * x , GRID _Y + GRID _H * ( gameGrid . length + 1 ) ) ;
} }
ctx . fillStyle = "#000000"
ctx . stroke ( ) ; ctx . stroke ( ) ;
for ( var y = 0 ; y < gameGrid . length ; y ++ ) { for ( var y = 0 ; y < gameGrid . length ; y ++ ) {
for ( var x = 0 ; x < gameGrid [ y ] . length ; x ++ ) { for ( var x = 0 ; x < gameGrid [ y ] . length ; x ++ ) {
if ( gameGrid [ y ] [ x ] . img !== undefined ) { if ( gameGrid [ y ] [ x ] . img !== undefined ) {
RenderIcon ( GRID _X + GRID _W * x + 16 , GRID _Y + GRID _H * y + 16 , ctx , gameGrid [ y ] [ x ] , gameGrid [ y ] [ x ] . direction ) RenderIcon ( GRID _X + GRID _W * x + 16 , GRID _Y + GRID _H * y + 16 , ctx , gameGrid [ y ] [ x ] , gameGrid [ y ] [ x ] . direction , undefined , { x : x , y : y } )
}
if ( BOT _X !== undefined ) {
drawImage (
GRID _X + GRID _W * BOT _X + 16 + GRID _W / 2 ,
GRID _Y + GRID _H * BOT _Y + 16 + GRID _H / 2 ,
IMAGE _BOT , ctx , 0 * 90 )
} }
} }
} }
/ * c o n s o l e . l o g ( " T a p e : " + B O T _ T A P E )
console . log ( displayGrid ) * /
} }
function colorToHex ( r , g , b ) { function colorToHex ( r , g , b ) {
@ -528,48 +684,267 @@ function draw() {
renderGame ( ctx ) renderGame ( ctx )
if ( ITEM _SELECTED ) { if ( ITEM _SELECTED ) {
RenderIcon ( LAST _MOUSE _X - 16 , LAST _MOUSE _Y - 16 , ctx , ITEM _SELECTED , 0 ) RenderIcon ( LAST _MOUSE _X - 16 , LAST _MOUSE _Y - 16 , ctx , ITEM _SELECTED , ITEM _DIRECTION )
} }
//drawImage(0,0,IMAGE_CONVEYOR,ctx,0)
//drawImage(0,0,IMAGE_CONVEYOR,ctx,0)
//drawImage(LAST_MOUSE_X,LAST_MOUSE_Y,IMAGE_ARROW,ctx,0)
//drawImage(LAST_MOUSE_X,LAST_MOUSE_Y,IMAGE_ARROW,ctx,0)
RenderSubmenu ( ctx ) RenderSubmenu ( ctx )
RenderMenu ( ctx ) RenderMenu ( ctx )
RenderGameInfo ( ctx )
}
}
function RenderGameInfo ( ctx ) {
if ( MENU . visible ) {
ctx . fillStyle = "#20424a"
ctx . fillRect ( canvas . width * 0.75 , 0 , canvas . width , canvas . height * 0.8 )
RenderTape ( canvas . width * 0.75 + 8 , 8 , canvas . width * 0.25 - 16 , ctx )
} }
} }
function RenderIcon ( x , y , ctx , icon _definition , rot = 0 , background = undefined ) { function RenderTape ( x , y , width , ctx ) {
var xOffset = 0
var yOffset = 0
for ( var i = 0 ; i < BOT _TAPE . length ; i ++ ) {
switch ( BOT _TAPE [ i ] ) {
case RED : {
drawImage ( x + xOffset + 16 , y + yOffset + 16 , IMAGE _DOT _R , ctx , 0 )
} break ;
case BLUE : {
drawImage ( x + xOffset + 16 , y + yOffset + 16 , IMAGE _DOT _B , ctx , 0 )
} break ;
case GREEN : {
drawImage ( x + xOffset + 16 , y + yOffset + 16 , IMAGE _DOT _G , ctx , 0 )
} break ;
case YELLOW : {
drawImage ( x + xOffset + 16 , y + yOffset + 16 , IMAGE _DOT _Y , ctx , 0 )
} break ;
case PURPLE : {
drawImage ( x + xOffset + 16 , y + yOffset + 16 , IMAGE _DOT _P , ctx , 0 )
} break ;
case PINK : {
drawImage ( x + xOffset + 16 , y + yOffset + 16 , IMAGE _DOT _PI , ctx , 0 )
} break ;
case BLACK : {
drawImage ( x + xOffset + 16 , y + yOffset + 16 , IMAGE _DOT _BL , ctx , 0 )
} break ;
case GRAY : {
drawImage ( x + xOffset + 16 , y + yOffset + 16 , IMAGE _DOT _GR , ctx , 0 )
} break ;
}
xOffset += 24 ;
if ( xOffset > width - 24 ) {
xOffset = 0 ;
yOffset += 24 ;
}
}
}
function createVerticalGradient ( x , y , up , ctx ) {
var gradient = ctx . createLinearGradient ( x , y + 32 * ( ( up ) ? 1 : 0 ) , x , y + 32 * ( ( up ) ? 0 : 1 ) ) ;
gradient . addColorStop ( 0 , "rgb(124,162,157)" )
gradient . addColorStop ( 0.31 , "black" )
gradient . addColorStop ( 0.6 , "rgb(124,162,157)" )
gradient . addColorStop ( 0.61 , "black" )
gradient . addColorStop ( 0.9 , "rgb(124,162,157)" )
gradient . addColorStop ( 0.91 , "white" )
gradient . addColorStop ( 1 , "white" )
return gradient
}
function createHorizontalGradient ( x , y , right , ctx ) {
var gradient = ctx . createLinearGradient ( x + 32 * ( ( right ) ? 0 : 1 ) , y , x + 32 * ( ( right ) ? 1 : 0 ) , y ) ;
gradient . addColorStop ( 0 , "rgb(124,162,157)" )
gradient . addColorStop ( 0.31 , "black" )
gradient . addColorStop ( 0.6 , "rgb(124,162,157)" )
gradient . addColorStop ( 0.61 , "black" )
gradient . addColorStop ( 0.9 , "rgb(124,162,157)" )
gradient . addColorStop ( 0.91 , "white" )
gradient . addColorStop ( 1 , "white" )
return gradient
}
function DrawSingleConveyor ( x , y , dir , ctx ) {
ctx . lineWidth = 16 ;
ctx . lineCap = "square"
ctx . strokeStyle = "rgb(124,162,157)"
ctx . setLineDash ( [ ] )
if ( dir === LEFT || dir === RIGHT ) {
ctx . beginPath ( )
ctx . moveTo ( x + 8 , y + 16 )
ctx . lineTo ( x + 24 , y + 16 )
ctx . stroke ( )
ctx . setLineDash ( [ 5 , 5 ] )
ctx . lineDashOffset = - dashOffset * ( ( dir === LEFT ) ? - 1 : 1 ) ;
ctx . strokeStyle = createHorizontalGradient ( x , y , dir === RIGHT , ctx )
ctx . lineWidth = 3.5 ;
ctx . beginPath ( )
ctx . moveTo ( x + 2 , y + 16 )
ctx . lineTo ( x + 30 , y + 16 )
ctx . stroke ( )
} else {
ctx . beginPath ( )
ctx . moveTo ( x + 16 , y + 8 )
ctx . lineTo ( x + 16 , y + 24 )
ctx . stroke ( )
ctx . strokeStyle = "rgb(34,62,57)"
ctx . setLineDash ( [ 5 , 5 ] )
ctx . lineDashOffset = - dashOffset * ( ( dir === DOWN ) ? 1 : - 1 ) ;
ctx . strokeStyle = createVerticalGradient ( x , y , dir === UP , ctx )
ctx . lineWidth = 3.5 ;
ctx . beginPath ( )
ctx . moveTo ( x + 16 , y + 2 )
ctx . lineTo ( x + 16 , y + 30 )
ctx . stroke ( )
}
}
function GetOppositeDirection ( dir ) {
switch ( dir ) {
case UP : { return DOWN }
case DOWN : { return UP }
case LEFT : { return RIGHT }
case RIGHT : { return LEFT }
}
}
function DrawConnectedConveyor ( x , y , ctx , connections , dir , pass = 0 ) {
ctx . lineWidth = 15 ;
ctx . lineCap = "round"
ctx . strokeStyle = "rgb(124,162,157)"
switch ( Object . keys ( connections ) . length ) {
case 0 : {
DrawSingleConveyor ( x , y , dir , ctx )
} break ;
default : {
ctx . lineWidth = 15 ;
ctx . lineCap = "square"
ctx . strokeStyle = "rgb(124,162,157)"
ctx . setLineDash ( [ ] )
ctx . beginPath ( )
ctx . moveTo ( x + 16 , y + 16 )
var endingPoint = { x : 0 , y : 0 }
switch ( dir ) {
case UP : { startingPoint = { x : 0 , y : - 12 } ; endingPoint = { x : 0 , y : - 14 } } break ;
case DOWN : { startingPoint = { x : 0 , y : 12 } ; endingPoint = { x : 0 , y : 14 } } break ;
case RIGHT : { startingPoint = { x : 12 , y : 0 } ; endingPoint = { x : 14 , y : 0 } } break ;
case LEFT : { startingPoint = { x : - 12 , y : 0 } ; endingPoint = { x : - 14 , y : 0 } } break ;
}
ctx . moveTo ( x + 16 + startingPoint . x , y + 16 + startingPoint . y )
ctx . lineTo ( x + 16 + endingPoint . x , y + 16 + endingPoint . y )
if ( pass === 0 ) { ctx . stroke ( ) ; }
for ( var connection of Object . keys ( connections ) ) {
var startingPoint = { x : x , y : y }
switch ( Number ( connection ) ) {
case UP : { startingPoint = { x : x + 16 , y : y + 8 } } break ;
case DOWN : { startingPoint = { x : x + 16 , y : y + 24 } } break ;
case RIGHT : { startingPoint = { x : x + 24 , y : y + 16 } } break ;
case LEFT : { startingPoint = { x : x + 8 , y : y + 16 } } break ;
}
ctx . lineWidth = 16 ;
ctx . lineCap = "square"
ctx . strokeStyle = "rgb(124,162,157)"
ctx . setLineDash ( [ ] )
ctx . beginPath ( )
ctx . moveTo ( startingPoint . x , startingPoint . y )
ctx . lineTo ( x + 16 , y + 16 )
if ( pass === 0 ) { ctx . stroke ( ) }
ctx . setLineDash ( [ 5 , 5 ] )
ctx . lineDashOffset = - dashOffset * 1 ;
if ( Number ( connection ) === RIGHT || Number ( connection ) === LEFT ) {
ctx . strokeStyle = createHorizontalGradient ( x , y , Number ( connection ) === LEFT , ctx )
} else {
ctx . strokeStyle = createVerticalGradient ( x , y , Number ( connection ) === UP , ctx )
}
ctx . lineWidth = 3.5 ;
ctx . beginPath ( )
startingPoint = { x : x , y : y }
switch ( Number ( connection ) ) {
case UP : { startingPoint = { x : x + 16 , y : y + 2 } } break ;
case DOWN : { startingPoint = { x : x + 16 , y : y + 30 } } break ;
case RIGHT : { startingPoint = { x : x + 30 , y : y + 16 } } break ;
case LEFT : { startingPoint = { x : x + 2 , y : y + 16 } } break ;
}
ctx . moveTo ( startingPoint . x , startingPoint . y )
ctx . lineTo ( x + 16 , y + 16 )
if ( pass === 1 ) { ctx . stroke ( ) }
}
if ( dir === RIGHT || dir === LEFT ) {
ctx . strokeStyle = createHorizontalGradient ( x , y , dir === LEFT , ctx )
} else {
ctx . strokeStyle = createVerticalGradient ( x , y , dir === UP , ctx )
}
ctx . setLineDash ( [ 5 , 5 ] )
ctx . lineWidth = 3.5 ;
ctx . beginPath ( )
switch ( dir ) {
case UP : { startingPoint = { x : 0 , y : - 14 } } break ;
case DOWN : { startingPoint = { x : 0 , y : 14 } } break ;
case RIGHT : { startingPoint = { x : 14 , y : 0 } } break ;
case LEFT : { startingPoint = { x : - 14 , y : 0 } } break ;
}
ctx . moveTo ( x + 16 , y + 16 )
ctx . lineTo ( x + 16 + startingPoint . x , y + 16 + startingPoint . y )
if ( pass === 1 ) { ctx . stroke ( ) ; }
} break ;
}
}
function RenderConveyor ( x , y , ctx , icon _definition , dir = 0 , background = undefined , grid = undefined ) {
if ( grid === undefined ) {
DrawSingleConveyor ( x , y , dir , ctx )
} else {
var connections = { }
if ( grid . x > 0 ) { if ( gameGrid [ grid . y ] [ grid . x - 1 ] . direction === RIGHT ) { connections [ LEFT ] = true } }
if ( grid . x < gameGrid [ grid . y ] . length - 1 ) { if ( gameGrid [ grid . y ] [ grid . x + 1 ] . direction === LEFT ) { connections [ RIGHT ] = true } }
if ( grid . y > 0 ) { if ( gameGrid [ grid . y - 1 ] [ grid . x ] . direction === DOWN ) { connections [ UP ] = true } }
if ( grid . y < gameGrid . length - 1 ) { if ( gameGrid [ grid . y + 1 ] [ grid . x ] . direction === UP ) { connections [ DOWN ] = true } }
//console.log("Connections: "+JSON.stringify(connections))
DrawConnectedConveyor ( x , y , ctx , connections , dir )
DrawConnectedConveyor ( x , y , ctx , connections , dir , 1 )
}
}
function RenderIcon ( x , y , ctx , icon _definition , dir = 0 , background = undefined , renderToGrid = undefined ) {
if ( background !== undefined ) { if ( background !== undefined ) {
ctx . fillStyle = background ctx . fillStyle = background
ctx . fillRect ( x , y , 32 , 32 ) ctx . fillRect ( x , y , 32 , 32 )
} }
if ( icon _definition . img === IMAGE _BRANCH ) { if ( icon _definition . img === IMAGE _CONVEYOR ) {
drawImage ( RenderConveyor ( x , y , ctx , icon _definition , dir , background , renderToGrid )
x + 16 ,
y + 16 ,
icon _definition . img , ctx , rot + 90 )
} else { } else {
drawImage ( if ( icon _definition . img === IMAGE _BRANCH ) {
x + 16 ,
y + 16 ,
icon _definition . img , ctx , rot )
}
switch ( icon _definition . img ) {
case IMAGE _BRANCH : {
drawImage (
x + 16 ,
y + 16 ,
GetArrowImage ( icon _definition . color1 ) , ctx , rot + 270 )
drawImage ( drawImage (
x + 16 , x + 16 ,
y + 16 , y + 16 ,
GetArrowImage ( icon _definition . color2 ) , ctx , rot + 90 ) icon _definition . img , ctx , dir * 90 )
} break ; } else {
case IMAGE _WRITER : {
drawImage ( drawImage (
x + 16 , x + 16 ,
y + 16 , y + 16 ,
GetDotImage ( icon _definition . color1 ) , ctx , rot ) icon _definition . img , ctx , dir * 90 - 90 )
} break ; }
switch ( icon _definition . img ) {
case IMAGE _BRANCH : {
drawImage (
x + 16 ,
y + 16 ,
GetArrowImage ( icon _definition . color1 ) , ctx , dir * 90 + 0 )
drawImage (
x + 16 ,
y + 16 ,
GetArrowImage ( icon _definition . color2 ) , ctx , dir * 90 + 180 )
} break ;
case IMAGE _WRITER : {
drawImage (
x + 16 ,
y + 16 ,
GetDotImage ( icon _definition . color1 ) , ctx , dir * 90 - 90 )
} break ;
}
} }
} }
@ -641,7 +1016,7 @@ function RenderSubmenu(ctx) {
for ( var button of BUTTON _SELECTED . submenu _buttons ) { for ( var button of BUTTON _SELECTED . submenu _buttons ) {
var buttonX = ( ( index % 3 ) * 48 ) + 16 var buttonX = ( ( index % 3 ) * 48 ) + 16
var buttonY = canvas . height * 0.8 - ( Math . floor ( index / 3 ) * 48 ) - 40 var buttonY = canvas . height * 0.8 - ( Math . floor ( index / 3 ) * 48 ) - 40
RenderIcon ( buttonX , buttonY , ctx , button , 0 , ( LAST _MOUSE _X >= buttonX && LAST _MOUSE _X <= buttonX + 32 && LAST _MOUSE _Y >= buttonY && LAST _MOUSE _Y <= buttonY + 32 ) ? "#555555" : "#b5b5b5" ) RenderIcon ( buttonX , buttonY , ctx , button , ITEM _DIRECTION , ( LAST _MOUSE _X >= buttonX && LAST _MOUSE _X <= buttonX + 32 && LAST _MOUSE _Y >= buttonY && LAST _MOUSE _Y <= buttonY + 32 ) ? "#555555" : "#b5b5b5" )
index ++ ; index ++ ;
} }
} }
@ -655,9 +1030,9 @@ function RenderMenu(ctx) {
var buttonY = canvas . height * 0.8 + 16 var buttonY = canvas . height * 0.8 + 16
for ( var button of MENU . buttons ) { for ( var button of MENU . buttons ) {
if ( button . lastselected ) { if ( button . lastselected ) {
RenderIcon ( buttonX , buttonY , ctx , button . lastselected , 0 , "#b5b5b5" ) RenderIcon ( buttonX , buttonY , ctx , button . lastselected , ( button . cb === undefined ) ? ITEM _DIRECTION : 0 , "#b5b5b5" )
} else { } else {
AddButton ( button . img , buttonX , buttonY , ctx , button , 0 ) AddButton ( button . img , buttonX , buttonY , ctx , button , ( button . cb === undefined ) ? ITEM _DIRECTION : 0 )
} }
button . x = buttonX button . x = buttonX
button . y = buttonY button . y = buttonY
@ -668,10 +1043,14 @@ function RenderMenu(ctx) {
} }
} }
function AddButton ( img , x , y , ctx , button , rot = 0 ) { function AddButton ( img , x , y , ctx , button , di r= 0 ) {
ctx . fillStyle = "#b5b5b5" ctx . fillStyle = "#b5b5b5"
ctx . fillRect ( x , y , 32 , 32 ) ctx . fillRect ( x , y , 32 , 32 )
drawImage ( x + 16 , y + 16 , img , ctx , rot ) if ( img === IMAGE _WRITER ) {
drawImage ( x + 16 , y + 16 , img , ctx , dir * 90 - 90 )
} else {
drawImage ( x + 16 , y + 16 , img , ctx , dir * 90 )
}
} }
function ConsumeTape ( ) { function ConsumeTape ( ) {
