Add level selection screen
This commit is contained in:
parent
2e9452f31f
commit
7f11c1a14d
105
game.js
105
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<menu.levels.length;i++) {
|
||||
var col = i % menu.cols
|
||||
var row = Math.floor(i / menu.cols)
|
||||
var colWidth = menu.width/menu.cols
|
||||
var levelBoxBounds = {x:x+col*colWidth-((menu.cols!==1)?colWidth:colWidth/2),y:y+24+24*row,w:colWidth,h:16}
|
||||
if (MouseOverBounds(levelBoxBounds)) {
|
||||
if (MOUSEDOWN) {
|
||||
MOUSEDOWN=false
|
||||
loadStage(menu.levels[i])
|
||||
gameState=WAITING
|
||||
}
|
||||
ctx.fillStyle="rgb(132, 186, 133)"
|
||||
ctx.fillRect(levelBoxBounds.x,levelBoxBounds.y,levelBoxBounds.w,levelBoxBounds.h)
|
||||
}
|
||||
ctx.fillStyle="white"
|
||||
ctx.fillText(menu.levels[i].name,x+col*colWidth-((menu.cols!==1)?colWidth/2:0),y+16+24+24*row)
|
||||
}
|
||||
}
|
||||
|
||||
function MouseOverBounds(bounds) {
|
||||
return (LAST_MOUSE_X>=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:{
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user