From 1e48f4a69e446beb500dd3cb2857cc383ad23ee1 Mon Sep 17 00:00:00 2001 From: Yewon Date: Sun, 18 May 2025 21:48:38 +0900 Subject: [PATCH] Adding ScoreDisplay GUI --- SubmissionNotes.md | 6 +++--- index.html | 1 + src/Gun.js | 25 +++++++++++++++++++++---- src/ScoreDisplay.js | 36 ++++++++++++++++++++++++++++++++++-- src/main.js | 5 +++-- 5 files changed, 62 insertions(+), 11 deletions(-) diff --git a/SubmissionNotes.md b/SubmissionNotes.md index 8c6a6b6..bf7155b 100644 --- a/SubmissionNotes.md +++ b/SubmissionNotes.md @@ -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 --- diff --git a/index.html b/index.html index de7cb40..73e31a1 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,7 @@ crossorigin="anonymous" > + diff --git a/src/Gun.js b/src/Gun.js index 7523d5f..e6d7d7a 100644 --- a/src/Gun.js +++ b/src/Gun.js @@ -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 } diff --git a/src/ScoreDisplay.js b/src/ScoreDisplay.js index ac165a2..ae804a2 100644 --- a/src/ScoreDisplay.js +++ b/src/ScoreDisplay.js @@ -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 }; diff --git a/src/main.js b/src/main.js index 995f50c..f2bc57e 100644 --- a/src/main.js +++ b/src/main.js @@ -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