? 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 .