From 2946b4805575742d10ce452d6582a66ad2c3ee56 Mon Sep 17 00:00:00 2001 From: nadiarvi Date: Sat, 10 May 2025 02:09:00 +0900 Subject: [PATCH] add level 2 --- public/assets/loop.png | Bin 0 -> 455 bytes src/components/Arrow.js | 1 + src/components/ClickableArrow.js | 1 + src/main.js | 2 +- src/scenes/lvl2.js | 109 +++++++++++++++++++++---------- 5 files changed, 79 insertions(+), 34 deletions(-) create mode 100644 public/assets/loop.png diff --git a/public/assets/loop.png b/public/assets/loop.png new file mode 100644 index 0000000000000000000000000000000000000000..35aeff65a19be7c868696e28b93ae5c6d411dff6 GIT binary patch literal 455 zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU1|)m_?Z^dEoCO|{#S9GG!XV7ZFl&wkP>``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eBxfo9u$B+ufw=)`ZTNFgv>h<|92;Ny>-n6|j z&p|!I%JDYmEWZG=4`v$57EQ`K7;7sEoGyE_Dm{<=A;h8Y@#kyf$G@yOeQ##}lDh7? z;32#4n+=6#`Wr4}n!Z_S>!aN1|Ek}^+1D%XYsHdlvpa>Re~;;(#=T@g@>J24;vusW zK5OdD^>{S*m!mt=OM#O2>bCcScg;WBa;y1M&CDZ;kx}{=4Y$glf4=BTjE%gKYg7A2 z;fM#!?-pupF#72%>n$dMhPv;+57UsX-n^*spR%RcB)11K8#P%>`&#c*c7^`kU{uGX z8g<6hGg;jH|C(yY1)LAmH#}YSN`86aaku`d%4=l>4#d89G`xE8^b0|c9S4F>v8_3i z-`Jb_q~k*EwW)b?dWt?T65!D+$s_IN1d{AhS3py ljW4UTZ@PR>|IAd+!1Kd9{FijxQ((9=c)I$ztaD0e0s!utxj+B_ literal 0 HcmV?d00001 diff --git a/src/components/Arrow.js b/src/components/Arrow.js index 089b5d5..592e98e 100644 --- a/src/components/Arrow.js +++ b/src/components/Arrow.js @@ -7,6 +7,7 @@ export class Arrow { Arrow.images.left = loadImage('/assets/left.png'); Arrow.images.right = loadImage('/assets/right.png'); Arrow.images.empty = loadImage('/assets/empty.png'); + Arrow.images.loop = loadImage('/assets/loop.png'); } constructor(direction) { diff --git a/src/components/ClickableArrow.js b/src/components/ClickableArrow.js index 6695f69..3cd2cf8 100644 --- a/src/components/ClickableArrow.js +++ b/src/components/ClickableArrow.js @@ -9,6 +9,7 @@ export class ClickableArrow { ClickableArrow.images.left = loadImage('/assets/left.png'); ClickableArrow.images.right = loadImage('/assets/right.png'); ClickableArrow.images.empty = loadImage('/assets/empty.png'); + ClickableArrow.images.loop = loadImage('/assets/loop.png'); } constructor(direction, clickable = false) { diff --git a/src/main.js b/src/main.js index a12d186..e75a408 100644 --- a/src/main.js +++ b/src/main.js @@ -22,7 +22,7 @@ function setup(){ mgr.addScene(Level1); mgr.addScene(Level2); - mgr.showScene(StartScene); + mgr.showScene(Level2); }; function draw(){ diff --git a/src/scenes/lvl2.js b/src/scenes/lvl2.js index a64179e..1ba35de 100644 --- a/src/scenes/lvl2.js +++ b/src/scenes/lvl2.js @@ -38,7 +38,7 @@ export default function Level2() { let blocks; let steps; - // let loops; + let loops; // let clickArrow; // let clicked; @@ -46,20 +46,22 @@ export default function Level2() { let levelFinished = false; let selectedStepIndex = null; + let selectedPanel = null; const buildingBlocks = [ new ClickableArrow('up', false), new ClickableArrow('right', false), + new ClickableArrow('loop', false), ]; - // changed on user input - let selectedSteps; - let selectedBlock; + // // changed on user input + // let selectedSteps; + // let selectedBlock; const slots = { - blocks: 2, - steps: 8, - loop: 3, + blocks: 3, + steps: 5, + loops: 2, } this.name = "GameScene"; @@ -97,14 +99,13 @@ export default function Level2() { y: height / 32, numBoxes: slots.steps, }); - - // loops = new ControlPanel({ - // name: 'loop', - // x: width / 32 * 7 + 48 * (slots.blocks + slots.steps + 2.75), - // y: height / 32, - // numBoxes: slots.loops, - // }); + loops = new ControlPanel({ + name: 'loop', + x: width / 32 * 7 + 48 * (slots.blocks + slots.steps + 2.5), + y: height / 32, + numBoxes: slots.loops, + }); flag = new Flag(12 * worldBlockSize, height - worldBlockSize * 4, catSize * 0.75); @@ -158,7 +159,7 @@ export default function Level2() { flag.draw(); blocks.draw(); steps.draw(); - // loops.draw(); + loops.draw(); cat.draw(); if (cat.sprite && flag.sprite) { @@ -168,7 +169,6 @@ export default function Level2() { }; if (levelFinished) { - // draw the overlay push(); fill(35, 20, 45, 190); rectMode(CORNER); @@ -201,45 +201,74 @@ export default function Level2() { console.log(`key passed: ${_key}`); if (keyCode === ESCAPE) { - // Deselect the currently selected arrow if any - if (selectedStepIndex !== null && steps.contents[selectedStepIndex]) { - steps.contents[selectedStepIndex].selected = false; + if (selectedPanel && selectedIndex !== null) { + const panel = selectedPanel === 'steps' ? steps : loops; + if (panel.contents[selectedIndex]) { + panel.contents[selectedIndex].selected = false; } - selectedStepIndex = null; + } + selectedPanel = null; + selectedIndex = null; } else { - cat.keyPressed(key); + cat.keyPressed(key); } } this.mousePressed = function() { - // console.log(`canvas clicked at ${mouseX}, ${mouseY}`); - steps.contents.forEach((arrow, index) => { if (arrow._isMouseOver(mouseX, mouseY)) { + steps.contents.forEach(a => a.selected = false); + loops.contents.forEach(a => a.selected = false); + + selectedPanel = 'steps'; selectedStepIndex = index; steps.contents.forEach(a => a.selected = false); arrow.select(); } }); - blocks.contents.forEach((arrow) => { + loops.contents.forEach((arrow, index) => { if (arrow._isMouseOver(mouseX, mouseY)) { - // console.log("Clicked arrow", arrow.direction); - if (selectedStepIndex !== null) { - const selectedArrow = steps.contents[selectedStepIndex]; - selectedArrow.set(arrow.direction); - selectedArrow.clickable = true; - selectedArrow.selected = false; - selectedStepIndex = null; - } + steps.contents.forEach(a => a.selected = false); + loops.contents.forEach(a => a.selected = false); + + selectedPanel = 'loops'; + selectedStepIndex = index; + loops.contents.forEach(a => a.selected = false); + arrow.select(); } }); + blocks.contents.forEach((arrow) => { + if (arrow._isMouseOver(mouseX, mouseY)) { + if (selectedPanel && selectedStepIndex !== null) { + let targetPanel = selectedPanel === 'steps' ? steps : loops; + const selectedArrow = targetPanel.contents[selectedStepIndex]; + + if (selectedPanel === 'loops' && arrow.direction === 'loop') { + selectedArrow.selected = false; + selectedStepIndex = null; + selectedPanel = null; + return; + } + + selectedArrow.set(arrow.direction); + selectedArrow.clickable = true; + selectedArrow.selected = false; + + selectedStepIndex = null; + selectedPanel = null; + } + } + }); }; this.startGame = () => { if (restart) cat.restart(); - cat.run(steps.contents); + console.log(steps.contents); + console.log(loops.contents); + const flattenedSteps = _flattenSteps(steps.contents, loops.contents); + cat.run(flattenedSteps); restart = true; }; @@ -267,3 +296,17 @@ export default function Level2() { blockSprites = []; }; } + +function _flattenSteps(stepList, loopList) { + const result = stepList.reduce((acc, curr) => { + if (curr.direction == 'loop') acc.push(...loopList); + else acc.push(curr); + return acc; + }, []) + + console.log(`flattened result`) + console.log(result); + + return result; +} +