From 4384e4eeb37af3305ac4edf8c6d14547afbf80f2 Mon Sep 17 00:00:00 2001 From: nadiarvi Date: Fri, 2 May 2025 22:50:40 +0900 Subject: [PATCH] fix clickable arrow --- src/components/Arrow2.js | 41 ---------------------------- src/components/ClickableArrow.js | 47 ++++++++++++++++++++++++++++++++ src/components/ControlPanel.js | 5 ++++ src/main.js | 4 ++- src/scenes/gameScene.js | 16 +++++++++-- 5 files changed, 68 insertions(+), 45 deletions(-) delete mode 100644 src/components/Arrow2.js create mode 100644 src/components/ClickableArrow.js diff --git a/src/components/Arrow2.js b/src/components/Arrow2.js deleted file mode 100644 index 62eddf5..0000000 --- a/src/components/Arrow2.js +++ /dev/null @@ -1,41 +0,0 @@ -export class CLickableArrow { - static images = {}; - - static preload() { - Arrow.images.up = loadImage('/assets/up.png'); - Arrow.images.down = loadImage('/assets/down.png'); - Arrow.images.left = loadImage('/assets/left.png'); - Arrow.images.right = loadImage('/assets/right.png'); - Arrow.images.empty = loadImage('/assets/empty.png'); - } - - constructor(direction, clickable=false) { - this.direction = direction; - this.image = Arrow.images[direction]; - this.clickable = clickable; - // this.onClick = onClick; - this.x = 0; - this.y = 0; - this.width = 40; - this.height = 40; - } - - draw(x, y) { - this.x = x; - this.y = y; - image(this.image, x, y, this.width, this.height); - } - - handleClick(mouseX, mouseY) { - if (this.isMouseOver(mouseX, mouseY) && this.onClick) { - this._onClick(); - } - } - - //helpers - _onClick(){ - console.log('clicked!'); - } - - } - \ No newline at end of file diff --git a/src/components/ClickableArrow.js b/src/components/ClickableArrow.js new file mode 100644 index 0000000..9289775 --- /dev/null +++ b/src/components/ClickableArrow.js @@ -0,0 +1,47 @@ +export class ClickableArrow { + static images = {}; + + static preload() { + ClickableArrow.images.up = loadImage('/assets/up.png'); + ClickableArrow.images.down = loadImage('/assets/down.png'); + ClickableArrow.images.left = loadImage('/assets/left.png'); + ClickableArrow.images.right = loadImage('/assets/right.png'); + ClickableArrow.images.empty = loadImage('/assets/empty.png'); + } + + constructor(direction, clickable=false) { + this.direction = direction; + this.image = ClickableArrow.images[direction]; + this.clickable = clickable; + // this.onClick = onClick | null; + this.x = 0; + this.y = 0; + this.width = 40; + this.height = 40; + } + + draw(x, y) { + this.x = x; + this.y = y; + stroke(255); + image(this.image, x, y, 40, 40); + } + + handleClick(mouseX, mouseY) { + if (this._isMouseOver(mouseX, mouseY) && this._onClick) { + this._onClick(); + } + } + + //helpers + _onClick(){ + console.log('clicked!'); + } + + _isMouseOver(mouseX, mouseY) { + return mouseX > this.x && mouseX < this.x + this.width && + mouseY > this.y && mouseY < this.y + this.height; + } + + } + \ No newline at end of file diff --git a/src/components/ControlPanel.js b/src/components/ControlPanel.js index 27c5cfa..69b51ac 100644 --- a/src/components/ControlPanel.js +++ b/src/components/ControlPanel.js @@ -1,4 +1,5 @@ import { Arrow } from "./Arrow"; +import { ClickableArrow } from "./ClickableArrow"; import { colors } from "../utils/theme"; export class ControlPanel { @@ -53,6 +54,10 @@ export class ControlPanel { if (this.contents[i]) { if (this.contents[i] instanceof Arrow) { this.contents[i].draw(bx + this.boxWidth/2 - 20, by + this.boxHeight/2 - 20); + } else if (this.contents[i] instanceof ClickableArrow) { + this.contents[i].draw(bx + this.boxWidth/2 - 20, by + this.boxHeight/2 - 20); + } else { + console.error('Invalid content type:', this.contents[i]); } } else { this.empty.draw(bx + this.boxWidth / 2 - 20, by + this.boxHeight / 2 - 20); diff --git a/src/main.js b/src/main.js index fac372c..9b5d8ce 100644 --- a/src/main.js +++ b/src/main.js @@ -2,6 +2,7 @@ import { colors } from './utils/theme.js'; import { Arrow } from './components/Arrow.js'; import StartScene from './scenes/startScene.js'; import GameScene from './scenes/gameScene.js'; +import { ClickableArrow } from './components/ClickableArrow.js'; let mgr; @@ -30,17 +31,18 @@ function windowResized() { function mousePressed(){ mgr.handleEvent('mousePressed'); + gameScene.handleClick(mouseX, mouseY); }; function preload(){ Arrow.preload(); + ClickableArrow.preload(); } function keyPressed(){ mgr.handleEvent('keyPressed'); } - window.setup = setup; window.draw = draw; // window.windowResized = windowResized; diff --git a/src/scenes/gameScene.js b/src/scenes/gameScene.js index 0bff143..6a2db9f 100644 --- a/src/scenes/gameScene.js +++ b/src/scenes/gameScene.js @@ -3,7 +3,7 @@ import { Cat } from '../cat.js'; import { buttonS } from '../utils/theme.js'; import { MyButton } from '../utils/components.js'; import { Arrow } from '../components/Arrow.js'; -import { CLickableArrow } from '../components/Arrow2.js'; +import { ClickableArrow } from '../components/ClickableArrow.js'; import { ControlPanel } from '../components/controlPanel.js'; @@ -27,7 +27,7 @@ export default function GameScene() { cat = new Cat(width / 6, height - 167.5, 150); // test - clickArrow = new CLickableArrow('up', true); + clickArrow = new ClickableArrow('up', true); runButton = new MyButton({ x: width / 32 * 28.5, @@ -63,9 +63,11 @@ export default function GameScene() { blocks.setContents([ new Arrow('right'), - new Arrow('up') + // new Arrow('up') + new ClickableArrow('up', true), ]); + }; this.draw = () => { @@ -110,4 +112,12 @@ export default function GameScene() { cat.changeAni(_key); } } + + this.handleClick = function(mx, my) { + this.arrows.forEach(arrow => { + if (arrow.clickable) { + arrow.handleClick(mx, my); + } + }); + } }