This week I decided to make a game as per recommendation of some peers. Mid-way through I realized I had a horrible mistake. However, I got a lot of help from Ross and the following is the process and final product.
First I brainstormed out loud and understood the logic of making a game. The initial idea was to make a clock like structure, much like a wheel of fortune, that would contain a spinning dial. Once the player mouse clicked the screen, the dial would stop. If the dial stopped between an area, the player would win, otherwise they would lose.
I used a class for the dial and the code is as follows:
class Dial { float locX, locY; float angle; //constructor Dial(float x, float y) { locX = x; locY = y; } void draw () { if (!clicked) { strokeWeight(5); stroke(#E50C0C); float t = millis()/1000.0f; locX = (locX+100*cos(t)); locY = (locY+100*sin(t)); line(300, 300, locX, locY); } else{ if(clicked){ image(img,17,25); } } } }
The spinning was found online and it created a sort of 3D rotation of what looked like a cone shape. The line wouldn’t rotate exactly around the diameter of the circle. Therefore, to fix this I made the background have the same color as the dial. It was a slight ratchet solution, but it works.
I don’t really understand why, but near the designated ‘win’ area, the dial seems to move faster. I didn’t do it on purpose but it works so I kept it.
As for the ‘win’ and ‘lose’ results, I decided to implement a sadistic ending and added a jigsaw photo. No matter whether the player won or not, the results would just show the photo of jigsaw from the movie Saw. Recently I watched ‘Ready Player One’ and in the movie they talked a lot about Easter eggs. I was inspired to put an Easter egg of the combination of Saw and Rick & Morty. (side tracking: the new episode of my favorite series ‘Rick & Morty’ is maybe coming out today, so I was thinking about it a lot). The little Easter egg is at the top right hand corner of the screen.
Here is the code of the game sketch:
Dial dial1; boolean clicked = false; float stopX; float stopY; PImage img; void setup() { size (600, 600); dial1 = new Dial(300, 100); img = loadImage("jigsaw.jpg"); } void draw() { background (#E50C0C); fill(255); ellipse(300, 300, 400, 400); fill(0, 0, 0); arc(300, 300, 400, 400, 0, QUARTER_PI, PIE); dial1.draw(); textSize(8); text("Rick is...is this a 'Saw' thing? Are you Sawing the Vindicators -Morty", 8, 10); fill(0, 102, 153); }
Here is a photo of what the game screen looks like: