Memory game

tfguy44

Re: Memory game

7 months ago

I'm going to assume you have Processing installed and can run example sketches. If this is not the case, speak up ASAP.

Let's start with something basic: a single square.

void setup(){ // This is the setup function. It runs once when the program starts.
size(220,220); // The tells the program how big the window should be.
} // This is the end of setup().
void draw(){ // This is the draw function. It runs over and over again, about 60 times a second.
background(0); // This makes our window have a black background.
noStroke(); // This says to not draw a border around our square.
fill(255,0,0); // This says to color the square red.
rect(20,20,20,20); // This draws the square.
} // This is the end of the draw function.

Still with me?

tfguy44

Re: Memory game

7 months ago

Of course, you'll need to know if the mouse is over that square...

void setup(){
size(220,220);
}
void draw(){
background(0);
noStroke();
fill(255,0,0);
if( mouseOverRect(20,20,20,20) ){ // If the mouse is over the square...
fill(0,255,0); // Draw it in green instead.
}
rect(20,20,20,20);
}
boolean mouseOverRect( int rx, int ry, int rw, int rh ){ // Determine is the mouse's position is inside the rectangle with specified position, width, and height.
return( mouseX >= rx && mouseX < rx+rw && mouseY >= ry && mouseY < ry+rh ); // Return true if the mouse is on over the rectange, false otherwise.
}

tfguy44

Re: Memory game

7 months ago

And you'll need to know if that square is clicked on... and remember if it is...

boolean toggle = true; // This remembers if the square has been clicked or not.
void setup(){
size(220,220);
}
void draw(){
background(0);
noStroke();
if( mouseOverRect(20,20,20,20) ){
if( toggle ){ // The color now depends on if it has been clicked or not too!
fill(0,255,0); // Green
} else {
fill(0,0,255); // Blue
}
} else {
if( toggle ){
fill(255,0,0); // Red
} else {
fill(255,255,0); // Yellow
}
}
rect(20,20,20,20);
}
boolean mouseOverRect( int rx, int ry, int rw, int rh ){
return( mouseX >= rx && mouseX < rx+rw && mouseY >= ry && mouseY < ry+rh );
}
void mouseClicked(){ // This function runs if the mouse is clicked.
if( mouseOverRect( 20, 20, 20, 20 ) ){ // If the mouse is over the square...
toggle = !toggle; // Toggle the toggle's true/false value
}
}

Stop me if I'm going too fast.

tfguy44

Ah, that link is helpful for what you are expecting.
The next bit of code I'm posting makes a jump to using a thing called a CLASS.
Do not panic - a class is just a way to define a new type of object.
It's sort of a template for one...

Card aCard;
void setup() {
size(300, 300);
aCard = new Card(20,20,20,20);
}
void draw() {
background(0);
aCard.draw();
}
void mouseClicked(){
aCard.mouseClick();
}
class Card {
int x, y, w, h;
color c1, c2, c3, c4;
boolean toggle;
Card( int x, int y, int w, int h ) {
this.x=x;
this.y=y;
this.w=w;
this.h=h;
c1 = color(0,255, 0);
c2 = color(0, 0, 255);
c3 = color(255, 0, 0);
c4 = color(255, 255, 0);
toggle = true;
}
void draw() {
if ( mouseOverMe() ) {
if ( toggle ) {
fill(c1);
}
else {
fill(c2);
}
}
else {
if ( toggle ) {
fill(c3);
}
else {
fill(c4);
}
}
rect(x, y, w, h);
}
boolean mouseOverMe() {
return( mouseX >= x && mouseX < x+w && mouseY >= y && mouseY < y+h );
}
void mouseClick(){
if( mouseOverMe() ){
toggle = !toggle;
}
}
}

So what's changed? I made the window a bit bigger, but the square behaves the same... Why is this a big jump?? Stay tuned...

tfguy44

Re: Memory game

7 months ago

The perk of having a class is that it allows us to make a lot of these objects very easily.

Like so:

Card[] cards;
void setup() {
size(300, 300);
cards = new Card[54];
int t = 0;
for( int i=0; i<9; i++){
for( int j=0; j<6;j++){
cards[t] = new Card( 20+30*j, 20 + 30 * i, 20, 20);
t++;
}
}
}
void draw() {
background(0);
for( int t=0; t < cards.length; t++){
cards[t].draw();
}
}
void mouseClicked(){
for( int t=0; t < cards.length; t++){
cards[t].mouseClick();
}
}
class Card {
int x, y, w, h;
color c1, c2, c3, c4;
boolean toggle;
Card( int x, int y, int w, int h ) {
this.x=x;
this.y=y;
this.w=w;
this.h=h;
c1 = color(0,255, 0);
c2 = color(0, 0, 255);
c3 = color(255, 0, 0);
c4 = color(255, 255, 0);
toggle = true;
}
void draw() {
if ( mouseOverMe() ) {
if ( toggle ) {
fill(c1);
}
else {
fill(c2);
}
}
else {
if ( toggle ) {
fill(c3);
}
else {
fill(c4);
}
}
rect(x, y, w, h);
}
boolean mouseOverMe() {
return( mouseX >= x && mouseX < x+w && mouseY >= y && mouseY < y+h );
}
void mouseClick(){
if( mouseOverMe() ){
toggle = !toggle;
}
}
}

This is looking promising!

alizee.al..

Re: Memory game

7 months ago

Wow it sure is looking great !! Im trying to write it on paper first from the information youre giving me and i suprise myself because I understand it haha. Thank you really !

tfguy44

Re: Memory game

7 months ago

Lets just make a few more changes now...
The Card objects need to behave more like cards, so I added a backing image for them to use.
The cards also have a slightly different size now too.

The window is a bit bigger, and you can only turn cards face up.
Oh, and cards can be told what their suit and value is now. That information is not useful yet, but wait for it...

Card[] cards;
PImage backing;
int[] suits;
int[] values;
int showing;
void setup() {
size(300, 390);
backing = loadImage( "http://www.symbols.net/hpg/titlebars2/6/t1.jpg" ); // Some image I found online. 20x30px, nice fade.
cards = new Card[54];
suits = new int[54];
values = new int[54];
for (int i=0; i < 54; i++) {
suits[i] = 0;
values[i] = 0;
}
showing = 0; // Keeps track of how many cards are faceup...
int t = 0;
for ( int i=0; i<9; i++) {
for ( int j=0; j<6;j++) {
cards[t] = new Card( 20+30*j, 20 + 40 * i, 20, 30, suits[t], values[t] );
t++;
}
}
}
void draw() {
background(0, 128, 0);
for ( int t=0; t < cards.length; t++) {
cards[t].draw();
}
}
void mouseClicked() {
for ( int t=0; t < cards.length; t++) {
cards[t].mouseClick();
}
}
class Card {
int x, y, w, h;
int suit, value;
boolean show;
Card( int x, int y, int w, int h, int suit, int value) {
this.x=x;
this.y=y;
this.w=w;
this.h=h;
this.suit=suit;
this.value=value;
show = false;
}
void draw() {
if ( !show ) {
image( backing, x, y );
noFill();
stroke(255);
if ( mouseOverMe() ) {
stroke(255, 0, 0);
}
rect(x, y, w, h);
}
else {
fill(255);
noStroke();
rect(x, y, w, h);
}
}
boolean mouseOverMe() {
return( mouseX >= x && mouseX < x+w && mouseY >= y && mouseY < y+h );
}
void mouseClick() {
if ( mouseOverMe() && !show ) {
show = !show;
showing++;
}
}
}

tfguy44

Re: Memory game

7 months ago

Now with card values, which are used and colored correctly, and scrambling the deck's order!

// Variables to keep track of the cards.
Card[] cards;
PImage backing;
int showing;
// A start at variables to track play.
int numPlayers = 2;
int turn = 0;
void setup() {
size(300, 390);
backing = loadImage( "http://www.symbols.net/hpg/titlebars2/6/t1.jpg" ); // Some image I found online. 20x30px, nice fade.
cards = new Card[54];
int[] suits = new int[54];
int[] values = new int[54];
// Set appropriate values for suits and values.
for (int i=0; i < 54; i++) {
suits[i] = i%4;
values[i] = i/4;
}
// Scamble the deck.
for( int i=0; i < 54; i++ ){
int r = int( random(54) );
// Swap suits.
int t = suits[i];
suits[i] = suits[r];
suits[r] = t;
// Swap values.
t = values[i];
values[i] = values[r];
values[r] = t;
}
showing = 0; // Keeps track of how many cards are faceup...
int t = 0;
for ( int i=0; i<9; i++) {
for ( int j=0; j<6;j++) {
cards[t] = new Card( 20+30*j, 20 + 40 * i, 20, 30, suits[t], values[t] );
t++;
}
}
textAlign(CENTER);
}
void draw() {
background(0, 128, 0);
for ( int t=0; t < cards.length; t++) {
cards[t].draw();
}
}
void mouseClicked() {
for ( int t=0; t < cards.length; t++) {
cards[t].mouseClick();
}
}
class Card {
int x, y, w, h;
int suit, value;
boolean show;
Card( int x, int y, int w, int h, int suit, int value) {
this.x=x;
this.y=y;
this.w=w;
this.h=h;
this.suit=suit;
this.value=value;
show = false;
}
void draw() {
if ( !show ) {
image( backing, x, y );
noFill();
stroke(255);
if ( mouseOverMe() ) {
stroke(255, 0, 0);
}
rect(x, y, w, h);
}
else {
fill(255);
noStroke();
rect(x, y, w, h);
fill(0);
if ( suit > 1 ) {
fill(255, 0, 0);
}
String[] suitNames = {
"S", "C", "H", "D", "J"
};
String[] valueNames = {
"A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"
};
if ( value < 13 ) { // cope with jokers.
text( valueNames[value], x+10, y + 12);
text( suitNames[suit], x+10, y+24 );
}
else { // Jokers.
if ( suit == 0 ) {
fill(0);
}
else {
fill(255,0,0);
}
text( "J", x+10, y+18 );
}
}
}
boolean mouseOverMe() {
return( mouseX >= x && mouseX < x+w && mouseY >= y && mouseY < y+h );
}
void mouseClick() {
if ( mouseOverMe() && !show ) {
show = !show;
showing++;
}
}
}

alizee.al..

Re: Memory game

7 months ago

LIFE SAVER :D

tfguy44

Re: Memory game

7 months ago

And... This is as far as I go. I don't care to write the function that checks if the cards match. Nor do I care to add the reset button, scoreboard, or any of the extra credit. Also you should probably draw symbols for the suits instead of the letters.

And clean this up too. It's pretty messy. Add comments. Etc.

// Variables to keep track of the cards.
Card[] cards;
PImage backing;
int showing;
// A start at variables to track play.
int numPlayers = 2;
int turn = 0;
int card1s, card1v, card2s, card2v, card1i, card2i;
int[] scores;
void setup() {
size(400, 390);
backing = loadImage( "http://www.symbols.net/hpg/titlebars2/6/t1.jpg" ); // Some image I found online. 20x30px, nice fade.
cards = new Card[54];
int[] suits = new int[54];
int[] values = new int[54];
scores = new int[numPlayers];
// Set appropriate values for suits and values.
for (int i=0; i < 54; i++) {
suits[i] = i%4;
values[i] = i/4;
}
// Scamble the deck.
for ( int i=0; i < 54; i++ ) {
int r = int( random(54) );
// Swap suits.
int t = suits[i];
suits[i] = suits[r];
suits[r] = t;
// Swap values.
t = values[i];
values[i] = values[r];
values[r] = t;
}
showing = 0; // Keeps track of how many cards are faceup...
int t = 0;
for ( int i=0; i<9; i++) {
for ( int j=0; j<6;j++) {
cards[t] = new Card( 20+30*j, 20 + 40 * i, 20, 30, suits[t], values[t], t );
t++;
}
}
}
void draw() {
background(0, 128, 0);
textAlign(CENTER);
for ( int t=0; t < cards.length; t++) {
cards[t].draw();
}
// Who's turn is it? Box.
textAlign(CORNER);
int temp = turn+1;
String tempStr = "It's player number " + temp + "'s turn!";
if ( showing == 2 ) {
tempStr = "Press space to continue.";
}
fill(255);
stroke(0);
rect( 200, 18, width-210, 18 );
fill(0);
text( tempStr, 205, 32 );
}
void keyPressed() {
if ( showing == 2 && key == ' ' ) {
if ( cardsMatch() ) {
scores[turn]+=2;
cards[card1i].drawMe = false;
cards[card2i].drawMe = false;
}
else {
cards[card1i].show = false;
cards[card2i].show = false;
turn++;
turn%=numPlayers;
}
showing = 0;
}
}
boolean cardsMatch() {
// Make sure to check for values matching but suits are 0/1 or 2/3.
// Make sure to catch jokers!
return true;
}
void mouseClicked() {
for ( int t=0; t < cards.length; t++) {
cards[t].mouseClick();
}
}
class Card {
int x, y, w, h, id;
int suit, value;
boolean show;
boolean drawMe;
Card( int x, int y, int w, int h, int suit, int value, int id) {
this.x=x;
this.y=y;
this.w=w;
this.h=h;
this.suit=suit;
this.value=value;
show = false;
drawMe = true;
this.id = id;
}
void draw() {
if ( !drawMe ) {
return;
} // Bail if card is gone.
if ( !show ) {
image( backing, x, y );
noFill();
stroke(255);
if ( mouseOverMe() && showing < 2 ) { // Only allowed to select cards when only less than two are showing!
stroke(255, 0, 0);
}
rect(x, y, w, h);
}
else {
fill(255);
noStroke();
rect(x, y, w, h);
fill(0);
if ( suit > 1 ) {
fill(255, 0, 0);
}
String[] suitNames = {
"S", "C", "H", "D", "J"
};
String[] valueNames = {
"A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"
};
if ( value < 13 ) { // cope with jokers.
text( valueNames[value], x+10, y + 12);
text( suitNames[suit], x+10, y+24 );
}
else { // Jokers.
if ( suit == 0 ) {
fill(0);
}
else {
fill(255, 0, 0);
}
text( "J", x+10, y+18 );
}
}
}
boolean mouseOverMe() {
if ( !drawMe ) {
return( false );
} // Bail if card is gone.
return( mouseX >= x && mouseX < x+w && mouseY >= y && mouseY < y+h );
}
void mouseClick() {
if ( !drawMe ) {
return;
} // Bail if card is gone.
if ( mouseOverMe() && !show && showing < 2) { // Make sure you can only pick two cards, and also cards that are not already showing!
show = !show;
// Remember the two cards picked.
if ( showing == 0 ) {
card1v = value;
card1s = suit;
card1i = id;
}
else {
card2v= value;
card2s = suit;
card2i = id;
}
showing++;
}
}
}

alizee.al..

Re: Memory game

7 months ago

Wow thank you so much. I did not know what classes were and I dont think I couldve done it another way. Now I can do this assignment, thank you again a lot !!!!!

alizee.al..

Re: Memory game

7 months ago

Hi again...

So I cannot use any bit of code you wrote, and helped me with. Writing my own, I've across a lot of problems...

So this is what I started with, I am pretty lost...

MyCards [] deckOfCards;
int columns = 9;
int rows = 6;
boolean mouseOnCard = false;
MyCards [] [] position;
float xpos, ypos, w, h;
class MyCards {
float xpos, ypos, w, h;
PImage backofcards;
MyCards(String filename, float x, float y, float w, float h) {
backofcards = loadImage("card.png");
xpos = x;
ypos = y;
this.w = w;
this.h = h;
rect(x, y, w, h);
}
void drawCard () {
image(backofcards, this.xpos, this.ypos, this.w, this.h);
}
void mousePressed(){
if (mouseX<xpos+w && mouseX>xpos && mouseY<ypos+h && mouseY>ypos) {
noFill();
strokeWeight(5);
stroke(255, 0, 0);
}
}
}
void setup() {
background(35, 145, 40);
size(600, 500);
textSize(20);
text("Memory Game", 250, 30);
position = new MyCards [columns][rows];
for (int i=0; i<columns; i++) {
for (int j=0; j<rows; j++) {
position[i][j]=new MyCards("card.png", 20+(30*j), 50+(40*i), 20, 30);
}
}
}
void draw() {
for (int i=0; i<columns; i++) {
for (int j=0; j<rows; j++) {
position[i][j].drawCard();
position[i][j].mousePressed();
}
}
}

tfguy44

Re: Memory game

7 months ago

Comments on your code:

// These are your global variables.
MyCards [] deckOfCards; // You do not use this variable.
int columns = 9;
int rows = 6;
boolean mouseOnCard = false; // What does this tell you? Wouldn't this be something you'd want to know about a specific card?
MyCards [] [] position; // This is a 2D array of cards! Why name it "positions"? That's an unusual name.
float xpos, ypos, w, h; // Why have these global variables? They'll get confusing when working with the same variable names defined for each card!
// This is the definition of what a card is.
class MyCards {
float xpos, ypos, w, h; // Ah, here's some things we need to know about a card.
// It has a position, a width, and a height.
PImage backofcards; // Does each card need it's own image? You can have a global PImage and use it for each card...
// It might help for a card to know what it's own suit and rank is too.
// This is the function that defines a card.
MyCards(String filename, float x, float y, float w, float h) {
backofcards = loadImage("card.png"); // That way you would only need to load this image once!
xpos = x;
ypos = y;
this.w = w;
this.h = h;
rect(x, y, w, h); // Why draw a rectangle here?
}
// This draws a card.
void drawCard () {
image(backofcards, this.xpos, this.ypos, this.w, this.h);
}
// This sets a large red stroke if this card is clicked.
void mousePressed() {
if (mouseX<xpos+w && mouseX>xpos && mouseY<ypos+h && mouseY>ypos) {
noFill();
strokeWeight(5);
stroke(255, 0, 0);
}
}
}
// This is the end of defining what a card is.
void setup() {
background(35, 145, 40); // This line might be better off at the start of draw().
size(600, 500); // Put size first in setup().
textSize(20);
text("Memory Game", 250, 30);
position = new MyCards [columns][rows];
for (int i=0; i<columns; i++) {
for (int j=0; j<rows; j++) {
position[i][j]=new MyCards("card.png", 20+(30*j), 50+(40*i), 20, 30); // Ok, you give each card a unique position based on it's indexes in the 2D array.
}
}
}
void draw() {
// For every card,
for (int i=0; i<columns; i++) {
for (int j=0; j<rows; j++) {
position[i][j].drawCard(); // Draw an image of the back of the card.
position[i][j].mousePressed(); // See if the mouse is on a card, even if no mouse click was made.
}
}
}

Do not try to fly before you can run. Do not try to run before you can walk.

Software development is a process! Get something simple working before you try to get everything else working.

As it stands, you almost have a working card class. You do not need to mess about with an array of them yet.
Just get one card working first.

class Card{
/// Fill in this bit.
}
/// LEAVE EVERYTHING BELOW HERE ALONE UNTIL YOU GET ONE CARD WORKING.
/// HINT: A CARD SHOULD KNOW IF IT IS FACE UP, FACE DOWN, OR NOT DRAWN AT ALL.
/// HINT: START WITH A SIMPLE DRAW FUNCTION TO REFLECT THOSE THREE STATES.
/// HINT: ADD A FUNCTION THAT DETECTS IF THE MOUSE IS OVER IT.
/// HINT: PRETEND YOU ARE A CARD. WHAT DO YOU NEED TO KNOW TO BEHAVE LIKE A CARD?
/// HINT: PRETEND YOU ARE A CARD SOME MORE. HOW SHOULD YOU BEHAVE?
Card aCard;
PImage backing;
void setup(){
size(220,220);
backing = loadImage( "card.png" );
aCard = new Card( 10, 10, 20, 30 );
}
void draw(){
aCard.draw();
}
void mousePressed(){
aCard.mousePressed();
}

alizee.al..

Re: Memory game

6 months ago

Alright so I got one card to work and I fixed the code you commented with some other comments about things I"m not sure about.

// These are your global variables.
int columns = 9;
int rows = 6;
boolean mouseOnCard = false; // What does this tell you? Wouldn't this be something you'd want to know about a specific card? I'm not sure what you mean here
MyCards [] [] deckofcards;
PImage backofcards
//float xpos, ypos, w, h;
// This is the definition of what a card is.
class MyCards {
float xpos, ypos, w, h; //definition of a card
// This is the function that defines a card.
MyCards(String filename, float x, float y, float w, float h) {
backofcards = loadImage("card.png");
xpos = x;
ypos = y;
this.w = w;
this.h = h;
rect(x, y, w, h); // Why draw a rectangle here? I don't know where else to write it...
}
// This draws a card.
void drawCard () {
image(backofcards, this.xpos, this.ypos, this.w, this.h);
}
// This sets a large red stroke if this card is clicked.
void mousePressed() {
if (mouseX<xpos+w && mouseX>xpos && mouseY<ypos+h && mouseY>ypos) {
noFill();
strokeWeight(5);
stroke(255, 0, 0);
}
}
}
// This is the end of defining what a card is.
void setup() {
size(600, 500);
textSize(20);
text("Memory Game", 250, 30);
position = new MyCards [columns][rows];
for (int i=0; i<columns; i++) {
for (int j=0; j<rows; j++) {
deckofcards[i][j]=new MyCards("card.png", 20+(30*j), 50+(40*i), 20, 30);
}
}
}
void draw() {
background(35, 145, 40);
// For every card,
for (int i=0; i<columns; i++) {
for (int j=0; j<rows; j++) {
deckofcards[i][j].drawCard();
deckofcards[i][j].mousePressed();
}
}
}

Replies(14)

Re: Memory game

Re: Memory game

Re: Memory game

Re: Memory game

Re: Memory game

Re: Memory game

Re: Memory game

Re: Memory game

Re: Memory game

Re: Memory game

Re: Memory game

Re: Memory game

Re: Memory game

Re: Memory game

Statistics

Tags

Actions

Related Posts