diff --git a/game.js b/game.js index e21f405..936da0b 100644 --- a/game.js +++ b/game.js @@ -36,7 +36,7 @@ const TITLETIMELINE = [ } } }, - {time:6500,cb: + {time:4000,cb: (ctx)=>{ currentSound.src="Super 8 Old Movie Projector - Gaming Sound Effect.mp3" currentSound.play() @@ -121,6 +121,8 @@ var BOT_QUEUE = [] var DELETEMODE = false var DRAGGING = false var MOUSEDOWN = false +var LAST_MOUSE_X=0; +var LAST_MOUSE_Y=0; var DRAG_X = -1 var DRAG_Y = -1 @@ -172,9 +174,6 @@ var GRID_H = 32 var GRID_X = 20 var GRID_Y = 20 -var LAST_MOUSE_X=0; -var LAST_MOUSE_Y=0; - var ITEM_DIRECTION=RIGHT; var dashOffset=0 @@ -195,13 +194,12 @@ var KEY_ROTATION_UP = ["W","K","w","k","8","ArrowUp"] var KEY_ROTATION_DOWN = ["S","J","s","j","2","ArrowDown"] var CONVEYOR_BUILD_BUTTON = {img:ID_CONVEYOR,x:-1,y:-1,w:-1,h:-1,lastselected:DEF_CONVEYOR} -var BRANCH_BUILD_BUTTON = {img:ID_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:ID_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 BRANCH_BUILD_BUTTON = {img:ID_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,default:DEF_BRANCHUP_RB} +var WRITER_BUILD_BUTTON = {img:ID_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,default:DEF_WRITERRIGHT_R} var ROTATE_CLOCKWISE_BUTTON = {img:ID_ROTATE_CLOCKWISE,x:-1,y:-1,w:-1,h:-1,cb:rotateClockwise } var ROTATE_COUNTERCLOCKWISE_BUTTON = {img:ID_ROTATE_COUNTERCLOCKWISE,x:-1,y:-1,w:-1,h:-1,cb:rotateCounterClockwise } -var WRITER_BUILD_BUTTON = {img:ID_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:ID_PLAY,x:-1,y:-1,w:-1,h:-1,cb:runGameSimulation @@ -220,11 +218,6 @@ var MENU = { buttons:[CONVEYOR_BUILD_BUTTON,BRANCH_BUILD_BUTTON,WRITER_BUILD_BUTTON,ROTATE_COUNTERCLOCKWISE_BUTTON,ROTATE_CLOCKWISE_BUTTON,DELETE_BUTTON,PLAY_BUTTON,RESET_BUTTON,HOME_BUTTON] } -var TUTORIALMENU={ - title:"Introduction to Conversion", - levels:[] -} - function saveLevelData() { completedStages[gameStage.name].data=deepCopy(gameGrid) localStorage.setItem("game",JSON.stringify(completedStages)) @@ -233,6 +226,12 @@ function saveLevelData() { function goHome() { saveLevelData() MENU.visible=false + ITEM_SELECTED=undefined + for (var button of MENU.buttons) { + if (button.submenu_buttons) { + button.lastselected=button.default + } + } gameState=MAINMENU } @@ -439,6 +438,31 @@ var TUTORIAL4 = { } } +var TUTORIALMENU={ + title:"Introduction to Conversion", + levels:[TUTORIAL1,TUTORIAL2,TUTORIAL3,TUTORIAL4], + cols:2, + width:568*0.8 +} +var EASYMENU={ + title:"Beginner Stages", + levels:[STAGE1,STAGE2], + cols:1, + width:568*0.3 +} +var MEDIUMMENU={ + title:"Intermediate Stages", + levels:[STAGE1,STAGE2], + cols:1, + width:568*0.3 +} +var HARDMENU={ + title:"Advanced Stages", + levels:[STAGE1,STAGE2], + cols:1, + width:568*0.3 +} + var gameGrid = [] var completedStages = {"Blue Blue":{data:[],complete:false}} //Example completed structure. @@ -713,8 +737,8 @@ function setupGame() { }catch{} //console.log(completedStages) //loadStage(TUTORIAL4) - //gameState=MAINMENU - gameState=STARTUP + gameState=MAINMENU + //gameState=STARTUP } function setupTitleScreen() { @@ -884,18 +908,17 @@ function loadLevel(level,botx,boty) { function loadStage(stage) { //gameGrid=deepCopy(stage.level) + ITEM_SELECTED=undefined loadLevel(stage.level,stage.start.x,stage.start.y) gameStage=stage - ITEM_SELECTED=undefined if (completedStages[stage.name]===undefined) { completedStages[stage.name]={} } else { if (completedStages[stage.name].data!==undefined) { gameGrid = deepCopy(completedStages[stage.name].data) - console.log(gameGrid) + //console.log(gameGrid) } } - } function deepCopy(arr) { @@ -1070,7 +1093,10 @@ function draw() { SCENE_DRAW(ctx) }break; case MAINMENU:{ - + DisplayMenu(canvas.width/2,8,TUTORIALMENU,ctx) + DisplayMenu((canvas.width*0.33)*0+(canvas.width*0.15)+(canvas.width*0.03),108,EASYMENU,ctx) + DisplayMenu((canvas.width*0.33)*1+(canvas.width*0.15)+(canvas.width*0.03),108,MEDIUMMENU,ctx) + DisplayMenu((canvas.width*0.33)*2+(canvas.width*0.15)+(canvas.width*0.03),108,HARDMENU,ctx) }break; case STARTUP:{ ctx.fillStyle="black" @@ -1561,6 +1587,49 @@ function RenderIcon(x,y,ctx,icon_definition,dir=0,background=undefined,renderToG } } +function DisplayMenu(x,y,menu,ctx) { + ctx.fillStyle="#20424a" + var totalRowHeight = Math.floor(menu.levels.length / menu.cols)*24+16+24 + ctx.fillRect(x-menu.width/2,y,menu.width,totalRowHeight) + ctx.font="bold 16px 'Zilla Slab', serif" + ctx.fillStyle="white" + ctx.textAlign = "center" + ctx.fillText(menu.title,x,y+16) + ctx.beginPath() + ctx.lineWidth = 1; + ctx.strokeStyle="gray" + ctx.moveTo(x-menu.width/2+4,y+18) + ctx.lineTo(x+menu.width/2-4,y+18) + ctx.stroke() + ctx.font="16px 'Zilla Slab', serif" + ctx.fillStyle="white" + ctx.textAlign = "center" + for (var i=0;i=bounds.x&& + LAST_MOUSE_X<=bounds.x+bounds.w&& + LAST_MOUSE_Y>=bounds.y&& + LAST_MOUSE_Y<=bounds.y+bounds.h) +} + function GetArrowImage(col) { switch (col) { case RED:{