? Browser Support ?
HTML
>
Canvas
>
Processing
>Kortstokk
Kortstokk
Det er tre pde-filer som beskriver sketchen.
_playingCards.pde
/*
Handling playing cards
images from one of many free sources on the net
Naming of image-files indicates suit and rank,ie.: s2 (spades 2)
*/
/* #pjs preload="data/s1.png,data/s2.png,data/s3.png,data/s4.png,data/s5.png,data/s6.png,data/s7.png,data/s8.png,data/s9.png,data/s10.png,data/s11.png,data/s12.png,data/s13.png" */
/* #pjs preload="data/h1.png,data/h2.png,data/h3.png,data/h4.png,data/h5.png,data/h6.png,data/h7.png,data/h8.png,data/h9.png,data/h10.png,data/h11.png,data/h12.png,data/h13.png" */
/* #pjs preload="data/k1.png,data/k2.png,data/k3.png,data/k4.png,data/k5.png,data/k6.png,data/k7.png,data/k8.png,data/k9.png,data/k10.png,data/k11.png,data/k12.png,data/k13.png" */
/* #pjs preload="data/r1.png,data/r2.png,data/r3.png,data/r4.png,data/r5.png,data/r6.png,data/r7.png,data/r8.png,data/r9.png,data/r10.png,data/r11.png,data/r12.png,data/r13.png" */
/* #pjs preload="data/backbv.png" */
// all cards we generate
ArrayList<Card> allCards;
// a deck, which we may give as many cards we want
Deck deck;
// gobal, backside of a card
PImage backSide;
// the card we are dragging
Card movingCard;
void setup(){
size(800,600);
allCards=new ArrayList();
backSide=loadImage("data/backbv.png");
for(int i=0;i<13;i++){
allCards.add(new Card(i+1,"spar",1));
allCards.add(new Card(i+1,"hjerter",2));
allCards.add(new Card(i+1,"ruter",3));
allCards.add(new Card(i+1,"kløver",4));
}
// set up a new cardcollection, a deck, and give it all cards
deck=new Deck(allCards);
movingCard=null;
deck.shuffle();
deck.pilePosition(100,100);
}
void draw(){
background(10,200,0);
//drawing backwards since we searc forwards (in mousepressed)
for(int i=deck.cards.size()-1; i >=0; i--){
Card c=deck.cards.get(i);
c.draw();
}
// or
// all cards we have made ordered by suit and rank,
// just to control the cards available and their appearance (image)
/*
for(Card c:allCards){
float row=c.suitOrder;
float col=c.rank;
c.place(col*50,10+(row-1)*100);
c.draw();
}
*/
}
// have we selected a card
void mousePressed(){
for(Card c:deck.cards){
if (c.hit()){
if(mouseButton == RIGHT)
c.showFace=!c.showFace;
deck.moveToFront(c);
movingCard=c;
// we dont continue the loop since cards may overlap
// and we are only interested in one card
return;
}
}
}
void mouseDragged(){
if(movingCard!=null){
// keep it on table
if((mouseX < width-10) && (mouseX > 10) &&(mouseY < height-10)&&(mouseY>10))
movingCard.move(mouseX-pmouseX,mouseY-pmouseY);
}
}
void mouseReleased(){
movingCard=null;
}
void keyPressed(){
if(key=='r' || key=='R'){
deck.shuffle();
deck.randomizePosition();
}
else if (key=='p' || key=='P'){
deck.shuffle();
deck.pilePosition(100,100);
}
}
og
_Card.pde
class Card{
int rank; //[1..13}
String suit; //spar,kløver,hjerter,ruter
int suitOrder; //1,2,3,4 (if we want some sort of comparison)
PImage face;
boolean showFace;
PVector position=new PVector(100,100);
// width and height of the card
float W;
float H;
Card(int rank,String suite,int suitOrder){
this.rank=rank;
this.suit=suite;
this.suitOrder=suitOrder;
String filename="data/"+suite.charAt(0)+rank+".png";
// while debugging: println(filename);
face=loadImage(filename);
W=face.width;
H=face.height;
showFace=true;
//println(""+W+","+H);
}
void draw(){
W=face.width;
H=face.height;
if(showFace)
image(face,position.x,position.y);
else
// use global backside
image(backSide,position.x,position.y);
}
void place(float x,float y){
position=new PVector(x,y);
}
void move(int dx,int dy){
position=new PVector(position.x+dx,position.y+dy);
}
boolean hit(){
W=face.width;
H=face.height;
return( (mouseX < position.x+W)&&(mouseX > position.x)
&&(mouseY < position.y+H)&&(mouseY > position.y));
}
}
og
_Deck.pde
/*
Holding some cards
May be used for a card-hands if we distribute (deal) cards
*/
class Deck{
ArrayList<Card> cards;
Deck(ArrayList<Card> cards){
this.cards=new ArrayList();
this.cards.addAll(cards);
}
// swap two cards in the list
void swap(int indexA,int indexB){
Card temp=cards.get(indexA);
cards.set(indexA,cards.get(indexB));
cards.set(indexB,temp);
}
// we could do shuffle in an other way
// but this will do at the moment
void shuffle(){
int a;
int b;
for(int i=0;i <1000;i++){
a=int(random(cards.size()));
b=int(random(cards.size()));
swap(a,b);
}
}
// build a pile
void pilePosition(int x,int y){
for(Card c:cards){
c.place(x,y);
c.showFace=false;
}
}
// spread the around
void randomizePosition(){
for(Card c:cards){
float x=random(10,width-10-c.face.width);
float y=random(10,height-10-c.face.height);
c.place(x,y);
c.showFace=true;
}
}
// usefull when we click a card
// front is at position 0 in the list
void moveToFront(Card c){
int index=cards.indexOf(c);
cards.remove(index);
cards.add(0,c);
}
}
Du kan dra kortene med musa og snu dem med høyreklikk. Du kan randomisere utleggingen med å taste r og legge dem i haug med p .