20210747/run-the-cat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add button

Browse Source
This commit is contained in:
nadiarvi 2025-04-30 18:27:27 +09:00
parent 7bc18dab67
commit 409ebdf7fa
3 changed files with 74 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -15,6 +15,7 @@
<script src="https://p5play.org/v3/planck.min.js"></script>
<script src="https://p5play.org/v3/p5play.js"></script>
<script src="/lib/scenemanager.js"></script>
<script src="/lib/p5.clickable.js"></script>
</head>
<body>
<script defer type="module" src="/src/main.js"></script>

27
src/scenes/gameScene.js
View File

@ -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);
}
}
}

68
src/scenes/startScene.js
View File

@ -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);