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/planck.min.js"></script>
<script src="https://p5play.org/v3/p5play.js"></script> <script src="https://p5play.org/v3/p5play.js"></script>
<script src="/lib/scenemanager.js"></script> <script src="/lib/scenemanager.js"></script>
<script src="/lib/p5.clickable.js"></script>
</head> </head>
<body> <body>
<script defer type="module" src="/src/main.js"></script> <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.name = "GameScene";
this.setup = () => { this.setup = () => {
// cat = new Cat(width / 2, height - 200, 200); cat = new Cat(width / 6, height - 167.5, 150);
}; };
this.draw = () => { this.draw = () => {
// drawWorld(p, groundHeight); background(colors.primary);
// cat.update(); rectMode(CENTER);
// cat.draw();
fill(colors.tertiary);
textSize(128);
stroke(colors.secondary);
strokeWeight(7);
text('dan yap', width / 2, height / 2 - 100); 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 { colors } from '../theme.js';
import { Cat } from '../cat.js'; import { Cat } from '../cat.js';
import { drawRect } from '../utils/draw.js';
import GameScene from './gameScene.js'; import GameScene from './gameScene.js';
export default function StartScene() { export default function StartScene() {
@ -10,11 +11,38 @@ export default function StartScene() {
width: 0, width: 0,
height: 0, height: 0,
}; };
let startButton;
// this.name = "StartScene"; // this.name = "StartScene";
this.setup = () => { this.setup = () => {
cat = new Cat(width / 2, height - 200, 200); 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 = () => { this.draw = () => {
@ -24,33 +52,38 @@ export default function StartScene() {
textSize(128); textSize(128);
stroke(colors.secondary); stroke(colors.secondary);
strokeWeight(7); strokeWeight(7);
text('rUn ThE cAT!', width / 2, height / 2 - 100); text("rUn ThE cAT!", width / 2, height / 2 - 100);
// Button // Button
fill(colors.tertiary); // fill(colors.tertiary);
stroke(colors.secondary); // stroke(colors.secondary);
strokeWeight(3); // strokeWeight(3);
rectMode(CENTER); // rectMode(CENTER);
rect(width / 2, height / 2 + 50, 300, 75, 10); // rect(width / 2, height / 2 + 50, 300, 75, 10);
// rectMode(CORNER);
button.x = width / 2 - 300 / 2;
button.y = height / 2 + 50 - 75 / 2;
button.width = 300;
button.height = 75;
fill(colors.secondary); // button.x = width / 2 - 300 / 2;
noStroke(); // button.y = height / 2 + 50 - 75 / 2;
textSize(32); // button.width = 300;
text('Start', width / 2, height / 2 + 60); // button.height = 75;
// fill(colors.secondary);
// noStroke();
// textSize(32);
// text("Start", width / 2, height / 2 + 60);
// Ground // Ground
fill(colors.secondary); fill(colors.secondary);
rectMode(CENTER);
rect(width / 2, height - 100 / 2, width, 100); rect(width / 2, height - 100 / 2, width, 100);
rectMode(CORNER);
// Sprite // Sprite
cat.draw(); cat.draw();
// Button
startButton.draw();
}; };
this.onResize = () => { this.onResize = () => {
@ -64,8 +97,7 @@ export default function StartScene() {
const x = mouseX; const x = mouseX;
const y = mouseY; const y = mouseY;
if (x < button.x || x > button.x + button.width) return; return;
if (y < button.y || y > button.y + button.height) return;
this.sceneManager.showScene(GameScene); this.sceneManager.showScene(GameScene);