Using BitmapData to manage a deck of cards – part 2
After a couple of days, the prototype for the management of a card deck is almost complete.
Now I have a full game, you draw a card and have to say if the next card will be higher or lower.
At the moment the prototype has all messages and a game over screen with the score recap.
Now I want to include Kongregate’s highscores API and then I’ll release the complete tutorial.
Meanwhile, here it is the code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | import flash.display.BitmapData;
import flash.geom.Rectangle;
import flash.geom.Point;
import flash.filters.DropShadowFilter;
import flash.filters.GlowFilter;
var card_shadow:DropShadowFilter = new DropShadowFilter(4, 45, 0x000000, .5, 4, 4, 1, 3, false, false, false);
var text_glow:GlowFilter = new GlowFilter(0x000000, .6, 4, 4, 2, 3, false, false);
big_picture = BitmapData.loadBitmap("cardz");
_root.attachMovie("table", "table", _root.getNextHighestDepth());
_root.createEmptyMovieClip("game", _root.getNextHighestDepth());
game.attachMovie("higher", "higher", game.getNextHighestDepth());
game.attachMovie("lower", "lower", game.getNextHighestDepth());
game.createEmptyMovieClip("big_pic_obj", game.getNextHighestDepth());
big_pic_obj.attachBitmap(big_picture, game.getNextHighestDepth());
big_pic_obj._visible = false;
sequence = new Array();
Array.prototype.shuffle = function() {
for (x=0; x<52; x++) {
var from = Math.floor(Math.random()*52);
var to = this[x];
this[x] = this[from];
this[from] = to;
}
};
for (x=0; x<52; x++) {
card = game.createEmptyMovieClip("small_pic_obj_"+x, game.getNextHighestDepth());
sequence[x] = x;
small_picture = new BitmapData(79, 123);
card.attachBitmap(small_picture, game.getNextHighestDepth());
small_picture.copyPixels(big_picture, new Rectangle(0+(x%13)*79, 0+Math.floor(x/13)*123, 79, 123), new Point(0, 0));
card._visible = false;
card.filters = new Array(card_shadow);
card.onEnterFrame = function() {
switch (this.action) {
case "come" :
this._x += 40;
if (this._x>210) {
this._x = 210;
this.action = "stay";
if (cards_drawn>1) {
game.ok_ko._visible = true;
}
}
break;
case "move" :
this._x += 20;
if (this._x>310) {
this._x = 310;
this.action = "dissolve";
}
break;
case "dissolve" :
this._alpha -= 4;
game.lap_score._alpha -= 4;
if (this._alpha<0) {
can_draw = true;
game.ok_ko._visible = false;
if (cards_drawn == 52) {
endgame();
}
this.removeMovieClip();
}
break;
}
};
}
game.attachMovie("ok_ko", "ok_ko", game.getNextHighestDepth(), {_x:250, _y:230, _visible:false});
game.attachMovie("score", "score", game.getNextHighestDepth(), {_x:0, _y:140});
game.attachMovie("lap_score", "lap_score", game.getNextHighestDepth(), {_x:-50, _y:0, _alpha:0});
game.score.filters = new Array(text_glow);
game.lap_score.filters = new Array(text_glow);
sequence.shuffle();
cards_drawn = 0;
points = 0;
can_draw = true;
draw_card();
game.higher.onRelease = function() {
if (can_draw) {
can_draw = false;
higher = true;
draw_card();
}
};
game.lower.onRelease = function() {
if (can_draw) {
can_draw = false;
higher = false;
draw_card();
}
};
function draw_card() {
game.ok_ko.gotoAndStop(2);
lap = 0;
if (((sequence[cards_drawn]%13)<=(sequence[cards_drawn-1]%13) and (!higher)) or ((sequence[cards_drawn]%13)>=(sequence[cards_drawn-1]%13) and (higher))) {
game.ok_ko.gotoAndStop(1);
game.lap_score.lap_text.textColor = 0x40ff40;
if (cards_drawn>0) {
if (!higher) {
lap = 13-(sequence[cards_drawn-1]%13);
} else {
lap = sequence[cards_drawn-1]%13+1;
}
}
} else {
lap = -5;
game.lap_score.lap_text.textColor = 0x900000;
}
game.lap_score.lap_text.text = lap;
if (cards_drawn>0) {
game.lap_score._alpha = 100;
}
points += lap;
game["small_pic_obj_"+sequence[cards_drawn]]._x = 0;
game["small_pic_obj_"+sequence[cards_drawn]]._y = 10;
game["small_pic_obj_"+sequence[cards_drawn]]._visible = true;
game["small_pic_obj_"+sequence[cards_drawn]].action = "come";
game["small_pic_obj_"+sequence[cards_drawn-1]].action = "move";
cards_drawn++;
game.score.textscore.text = "Cards left: "+(52-cards_drawn)+" - Score: "+points;
}
function endgame() {
game.removeMovieClip();
_root.attachMovie("game_over","game_over",_root.getNextHighestDepth());
game_over.gameovertext.filters = new Array(text_glow);
_root.game_over.gameovertext.text = "Your score:\n"+points;
} |
and this is the result
When it’s game over, at the moment you must reload the page to play again. How much did you score?
Download the source code, and wait for the full tut…
They can be easily customized to meet the unique requirements of your project.

























This post has 18 comments
Marukomu
Good stuff! This is great for work. I think I’m going rebuild one for my wife.
styxtwo
i scored 74 :P
RJ
I’m the recordman:
90!
Robby
Awesome!!! 69 btw *_^
Bradley
haha 104 winner :D
abhilash
54! hurray!!
limpeh
This game is not bad, but after some time, it’s quite boring since all you need to do is just ‘guessing’. (btw, I got 91)
styxtwo
wooohoo i got 110, :P
shiv
105!!!! Gr8
Frederik J
Got 34.. I realized a little “personal bug”, when I play cards, the ace is the highest cards, not the lowest. :-) You need to write a little “Card rules” thing. Also, you need to include what happens when the next card is equal to the first.
I think games like this, is pretty boring. Not for blaming you game or tuturial which I love, but those games is too simple, and it is random. Here is a little idea.
It can be fun that when you finish the first game, you’ll get your score in $, and earn money. Then you can by power ups like: you will get a statistic of procents for which the next card would be, you can see the next card, you can decide the next card, and so on…
Then, if we want to make big things out of it, there can be a multiplayer part, where you play against another player. Then you switch to guess higher or lower, and that person who guess most cards correct wins.
Anyway: Great game engine, which works incredible, but I would love to see a more advanced game. Keep them coming!
shiv
To Fred:
in case of equal cards the game compares in the basis of suit.
spades>hearts>clubs>diamonds
Custard
-7
emanuel
86 nice game and its not random its probavilities
Darthvulture
i hope it aint any bad that i used ur sources and changed design,font style and such and gave it out on deviantart?
Maniac
x_x 136
Awesome game!
steve
i beat u all -134
Dan
Thanks so much for posting this. I have been looking for a simple card shuffle and deal routine for a while now. This is be far the best. Thanks for taking the time to share.
John-Michael Glenn
I made a slightly better deck shuffler on my own, compare it and see how ya’ll like it:
var deck:Array = new Array(“S1″, “S2″, “S3″, “S4″, “S5″, “S6″, “S7″, “S8″, “S9″, “S10″, “S11″, “S12″, “S13″, “C1″, “C2″, “C3″, “C4″, “C5″, “C6″, “C7″, “C8″, “C9″, “C10″, “C11″, “C12″, “C13″, “D1″, “D2″, “D3″, “D4″, “D5″, “D6″, “D7″, “D8″, “D9″, “D10″, “D11″, “D12″, “D13″, “H1″, “H2″, “H3″, “H4″, “H5″, “H6″, “H7″, “H8″, “H9″, “H10″, “H11″, “H12″, “H13″);
var deck2:Array = new Array();
for (var i:Number = 0; i<52; i++) {
var r:Number = random(deck.length);
var pick = deck[r];
var card = deck.splice(r, 1);
deck2.push(card);
}
trace(“Shuffled: “+deck2);