20253158/homework-6
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding ScoreDisplay GUI

Browse Source
This commit is contained in:
Yewon Kim 2025-05-18 21:48:38 +09:00
parent 20387bd35c
commit 1e48f4a69e
5 changed files with 62 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
SubmissionNotes.md
View File

@ -1,10 +1,10 @@
# Homework submission form
1. **Your name**: NAME
1. **Your name**: Yewon Kim
2. **KAIST ID**: 0000000
2. **KAIST ID**: 20253158
3. **Email**: YOUR_EMAIL@kaist.ac.kr
3. **Email**: yewonkim@kaist.ac.kr
---

1
index.html
View File

@ -12,6 +12,7 @@
crossorigin="anonymous"
></script>
<meta charset="utf-8" />
<script src = "/src/main.js"></script>
</head>
<body>

25
src/Gun.js
View File

@ -7,15 +7,32 @@ import bulletHole from '../data/bulletHole.png';
import shot from '../data/shot.mp3';
import empty from '../data/empty.mp3';
class Gun {
// TO DO
/*
The Gun is the mouse. To draw it, hide the cursor with the noCursor function and then draw instead the image cursor.png at the location of the mouse. To load and play sounds with p5.js take a look at this example. The sound files are shot.mp3 and empty.mp3, depending on whether there are still shots available. Finally, when you shoot with the gun, add a random CURSOR_SIZE noise (or a similarly small amount) to alter the bullet's final hitting location.
*/
class Gun {
noCursor() { }
draw() { }
setup() {
shot = loadSound('data/shot.mp3');
empty = loadSound('data/empty.mp3');
}
// mousePressed() {
// if () {
// shot.play();
// } else { // no bullets left
// empty.play();
// }
// }
}
// Bullet
class Bullet {
// TO DO
}

36
src/ScoreDisplay.js
View File

@ -1,11 +1,43 @@
import { BULLET_SIZE, FONT_SIZE } from './Constants.js';
import { BULLET_SIZE, FONT_SIZE, TOT_SHOTS } from './Constants.js';
import { Gun } from './Gun.js';
import { Target } from './Target';
import bullet from '../data/bullet.png';
class ScoreDisplay {
// TO DO
constructor(initialBullets) {
this.bulletImg = null;
this.shotLeft = initialBullets;
this.score = 0;
loadImage(bullet, (img) => {
this.bulletImg = img;
});
}
draw() {
// Draw score on top-left
textFont('Arial');
textSize(25);
fill(255, 0, 0);
textAlign(LEFT, TOP);
text(`Score: ${this.score}`, 10, 10);
if (!this.bulletImg) return;
// Draw remaining bullets on top-right
const bulletSpacing = 20;
const marginRight = 10;
const bulletsWidth = this.shotLeft * bulletSpacing;
let startX = width - bulletsWidth - marginRight;
let y = 10;
for (let i = 0; i < this.shotLeft; i++) {
image(this.bulletImg, startX + i * bulletSpacing, y, BULLET_SIZE, BULLET_SIZE);
}
}
}
export { ScoreDisplay };

5
src/main.js
View File

@ -14,7 +14,7 @@ function setup() {
createCanvas(800, 600);
// 1. Init gun and score display
score = new ScoreDisplay(TOT_SHOTS);
// 2. Init the targets
// 3. Subscribe gun
@ -22,8 +22,9 @@ function setup() {
function draw() {
background('#eeeeee');
score.draw();
// draw targets, gun, bullets, score
}
// Shoot