game concept
The idea from this game came from my love of music and rock songs, as well as me not being able to code that well to implement sprites. I made a trivia game for guessing songs as I sometimes enjoy guessing them when listening to them from a distance.
game phase
The game is a quiz style game, where a song will play for 5 to 10 seconds, and you choose one of the 4 album covers on screen. Wether you choose the right or wrong one, you will proceed to the next round. If you get a wrong answer you will see it on the strike section on the top-right side of the screen. If you get 3 strikes, you loose and have the end-screen, where it tells you the score a hint to getting the game’s surprise at the end.
I used the random function for the length of the song array and based on that pulled a song and the album cover from the arrays. The positions for the correct answer and the other images were confusing to find, but I found a way around it, generating the correct answer over one of the other pictures.
The game ends after 10 rounds or if you get 3 wrong answers, afterwards you will see the end screen, or if you get the 10 answers correctly, a special surprise.
challenges
The biggest challenge was making the album covers and songs be random, as it took a while to figure out an efficient way to make it work, specially for the positions. It took days to figure out but felt very rewarding at the end.
The other challenge was making the game flow, as I used a noLoop() without noticing it. The noLoop() made my code not work as it stopped all the draw functions to stop working as intended. I fixed it by making my code be function oriented. Instead of fitting everything into 1 function, I spread it around many different ones.
The last challenge was more of a tedious one, as the songs took some time to collect and write the code correctly, I think it could have been done in a much more efficient way, but I do enjoy the end result.
code
The code was based on game states, similar to the example of class:
function draw() {
background(220);
// Taken from gameState code in class, makes the game work cohesively
if (gameState == 'start') {
drawInstructions();
} else if (gameState == 'playing') {
drawGame();
} else if (gameState == 'end') {
drawEndScreen();
}
}
The draw parts of the game I tried to make them the most basic as possible, while adding custom functions to it.
function drawGame(){
background('pink')
//Based on having a random result from a string
image(album_covers[wSong1], img1X, img1Y)
image(album_covers[wSong2], img2X, img2Y)
image(album_covers [wSong3], img3X, img3Y)
image(album_covers [wSong4], img4X, img4Y)
// Strikes and strike counter
push()
strokeWeight (5)
textSize(20)
text('Strikes: ' + strike, 300, 30)
stroke(255,0,0)
pop()
//Correct song randomly placed over another picture
image(album_covers[currentSong], goodX, goodY);
//Text for round and score
text('Round ' + counter, 25, 25)
text('Score: '+ score + '/10', 25, 40)
}
The way I transitioned from screens to the game itself, was by the mouse click function and adding more and more custom functions to it:
function mouseClicked(){
console.log("gamestate is: ", gameState);
if (gameState == 'start'){
// Makes it so that the game can be looped and work properly when multiple games are played
gameState = 'playing';
randomize(); //the songs are randomized and in theory, don't loop
counter++ // round increase
}else if (gameState == 'playing'){
if (mouse_is_over()) {
score ++ // whem you get an answer your socre increases
nextRound() // refreshes the game
}else{
strike ++
console.log('strike');
console.log(strike)
nextRound()
}
}else if(gameState == 'end'){
gameRestart() // game begins again and values reset
}
}
function mouse_is_over(){
// console.log (mouseX, goodX, mouseY, goodY) // This was for debugging
// Makes it so that mouse is relative to the corredct answer
if ((mouseX>= goodX && mouseX < goodX + imgSize) && (mouseY >= goodY && mouseY <goodY + imgSize)) {
return true
}else {
return false
}
}
// Game ends if 10+ rounds are reached
function rounds(){
if(counter == 11){
songs[currentSong].stop()
rickRoll()
gameState = 'end'
// drawEndScreen()
}
}
// makes the next round happen,randoized again
function nextRound(){
songs[currentSong].stop()
previousSongs.push(currentSong)
counter++
rounds ()
randomize()
gameOver()
}
// makes it so songs don;t repeat
function noRepeat(){
while (currentSong == previousSongs){
currentSong = int(random(songs.length))
}
}
// functions and values reset
function gameRestart(){
print('Resetting game state');
strike = 0
score = 0
counter = 0
previousSongs = [];
gameState = 'start'
}
// Makes it so the right song is in one of the 4 possible combinations
function currentSongPosition(){
goodX = random(positionX)
goodY = random(positionY)
}
//Game ends if you get 3 wrong answers
function gameOver(){
if (strike > 3){
gameState = 'end'
}
}
//makes it so the album pictures don't repeat as much by using while statements
function randomize(){
currentSong = int(random(songs.length))
while(currentSong in previousSongs){
currentSong = int(random(songs.length))
}
wSong1 = int(random(songs.length));
while(wSong1 == currentSong){
wSong1 = int(random(songs.length));
}
wSong2 = int(random(songs.length));
while(wSong2 == currentSong || wSong2 == wSong1){
wSong2 = int(random(songs.length));
}
wSong3 = int(random(songs.length));
while(wSong3 == currentSong || wSong3 == wSong2 || wSong3 == currentSong){
wSong3 = int(random(songs.length));
}
wSong4 = int(random(songs.length));
while(wSong4 == currentSong || wSong4 == wSong3 || wSong4 == wSong2 || wSong4 == wSong1){
wSong4 = int(random(songs.length))
}
songs[currentSong].play();
currentSongPosition()
}
// special surprise
function rickRoll(){
if (score == 10){
gameState = 'end'
window.open("https://www.youtube.com/watch?v=dQw4w9WgXcQ")
}
}
future improvements
I would have liked to add the names of each song under the pictures, but wasn’t able to figure it out.
Another thing I would have liked to iron out would have been the issue of songs repeating after they are played one round, however I was never able to figure it out, same for the album covers and their positions, I feel it could’ve been more practical and simple than the way I did it.
Also, being able to show the songs that played at the end of the game, or after each round would have been good, in order for the player to look them up if they liked them.
reflection
It was very interesting and fun doing a project like this as it allowed me to get a lot of practice by challenging myself. Overall, I wish I could make more improvements like using hears instead of X’s, but it was very good.