From 409ebdf7faa0f548a3bf8c6880a94b8b002af211 Mon Sep 17 00:00:00 2001 From: nadiarvi Date: Wed, 30 Apr 2025 18:27:27 +0900 Subject: [PATCH] add button --- index.html | 1 + src/scenes/gameScene.js | 27 +++++++++++++--- src/scenes/startScene.js | 68 +++++++++++++++++++++++++++++----------- 3 files changed, 74 insertions(+), 22 deletions(-) diff --git a/index.html b/index.html index 1275899..398d44c 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,7 @@ + diff --git a/src/scenes/gameScene.js b/src/scenes/gameScene.js index e5728c7..52ca3a1 100644 --- a/src/scenes/gameScene.js +++ b/src/scenes/gameScene.js @@ -7,13 +7,32 @@ export default function GameScene() { this.name = "GameScene"; this.setup = () => { - // cat = new Cat(width / 2, height - 200, 200); + cat = new Cat(width / 6, height - 167.5, 150); }; this.draw = () => { - // drawWorld(p, groundHeight); - // cat.update(); - // cat.draw(); + background(colors.primary); + rectMode(CENTER); + + fill(colors.tertiary); + textSize(128); + stroke(colors.secondary); + strokeWeight(7); + text('dan yap', width / 2, height / 2 - 100); + + // Ground + fill(colors.secondary); + rect(width / 2, height - 100 / 2, width, 80); + + // Sprite + cat.draw(); + }; + + this.onResize = () => { + if (cat) { + cat.setPosition(width / 2, height - 177.5); + } + } } diff --git a/src/scenes/startScene.js b/src/scenes/startScene.js index 3b10dbb..926d863 100644 --- a/src/scenes/startScene.js +++ b/src/scenes/startScene.js @@ -1,5 +1,6 @@ import { colors } from '../theme.js'; import { Cat } from '../cat.js'; +import { drawRect } from '../utils/draw.js'; import GameScene from './gameScene.js'; export default function StartScene() { @@ -10,11 +11,38 @@ export default function StartScene() { width: 0, height: 0, }; + let startButton; // this.name = "StartScene"; this.setup = () => { cat = new Cat(width / 2, height - 200, 200); + + startButton = new Clickable(); + + // Position and mode + startButton.mode = "CENTER"; + startButton.locate(width/2, height/2 + 50); + + // Size + startButton.width = 300; + startButton.height = 75; + + // Visual styling + startButton.color = colors.tertiary; + startButton.stroke = colors.secondary; + startButton.strokeWeight = 3; + + // Text properties + startButton.text = 'start'; + startButton.textFont = "Pixelify Sans"; + startButton.textSize = 32; + startButton.textColor = colors.secondary; + + startButton.onPress = () => { + console.log("press"); + this.sceneManager.showScene(GameScene); + } }; this.draw = () => { @@ -24,33 +52,38 @@ export default function StartScene() { textSize(128); stroke(colors.secondary); strokeWeight(7); - - text('rUn ThE cAT!', width / 2, height / 2 - 100); + + text("rUn ThE cAT!", width / 2, height / 2 - 100); // Button - fill(colors.tertiary); - stroke(colors.secondary); - strokeWeight(3); - rectMode(CENTER); - rect(width / 2, height / 2 + 50, 300, 75, 10); - - button.x = width / 2 - 300 / 2; - button.y = height / 2 + 50 - 75 / 2; - button.width = 300; - button.height = 75; + // fill(colors.tertiary); + // stroke(colors.secondary); + // strokeWeight(3); + // rectMode(CENTER); + // rect(width / 2, height / 2 + 50, 300, 75, 10); + // rectMode(CORNER); - fill(colors.secondary); - noStroke(); - textSize(32); - text('Start', width / 2, height / 2 + 60); + // button.x = width / 2 - 300 / 2; + // button.y = height / 2 + 50 - 75 / 2; + // button.width = 300; + // button.height = 75; + + // fill(colors.secondary); + // noStroke(); + // textSize(32); + // text("Start", width / 2, height / 2 + 60); // Ground fill(colors.secondary); + rectMode(CENTER); rect(width / 2, height - 100 / 2, width, 100); + rectMode(CORNER); // Sprite cat.draw(); + // Button + startButton.draw(); }; this.onResize = () => { @@ -64,8 +97,7 @@ export default function StartScene() { const x = mouseX; const y = mouseY; - if (x < button.x || x > button.x + button.width) return; - if (y < button.y || y > button.y + button.height) return; + return; this.sceneManager.showScene(GameScene);