<canvas id="canvas1" width=240 height=280></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
Array.prototype.shuffle = function() {
var len = this.length;
while(len) {
var n = Math.floor(Math.random()*len);
var t = this[--len];
this[len] = this[n];
this[n] = t;
}
return this;
}
function Point(x, y) {
this.x = x;
this.y = y;
}
function displayCard(card) {
context.save();
context.translate(card.width*card.pos.x, card.height*card.pos.y);
context.fillStyle = "rgb(0, 0, 0)";
context.fillRect(0, 0, card.width, card.height);
context.fillStyle = "rgb(255, 255, 255)";
context.fillRect(1, 1, card.width-1, card.height-1);
context.fillStyle = "rgb(0, 0, 0)";
context.drawImage(card.image, 7, 7, 20, 20);
if(card.num < 9) {
context.fillText(card.num+1+"", 14, 37);
}
else {
context.fillText(card.num+1+"", 11, 37);
}
context.restore();
}
function displayCardBehind(card) {
context.save();
context.translate(card.width*card.pos.x, card.height*card.pos.y);
context.fillStyle = "rgb(255, 255, 255)";
context.fillRect(0, 0, card.width, card.height);
context.fillStyle = "rgb(0, 255, 0)";
context.fillRect(1, 1, card.width-1, card.height-1);
context.restore();
}
function Card(i, j) {
this.kind = i;
this.num = j;
this.width = 30;
this.height = 40;
this.image = new Image();
if(this.kind == 0) {
this.image.src = "crabmark.png";
}
else if(this.kind == 1) {
this.image.src = "diamark.png";
}
else if(this.kind == 2) {
this.image.src = "heartmark.png";
}
else if(this.kind == 3) {
this.image.src = "spaidmark.png";
}
this.inarea = function (p) {
if(p.x > this.width*this.pos.x &&
p.x < this.width*this.pos.x + this.width &&
p.y > this.height*this.pos.y &&
p.y < this.height*this.pos.y + this.height) {
return true;
}
return false;
};
this.behind = true;
this.changedisp = function () {
if(this.behind) {
this.disp = displayCard;
this.behind = false;
}
else {
this.disp = displayCardBehind;
this.behind = true;
}
};
this.disp = displayCardBehind;
this.pos = new Point(0, 0);
}
function Cards() {
var cards = new Array(52);
for(var i = 0; i < 13; i++) {
for(var j = 0; j < 4; j++) {
cards[j*13 + i] = new Card(j, i);
}
}
cards.shuffle();
for(var i = 0; i < 52; i++) {
cards[i].pos = new Point(i%8, Math.floor(i/8));
}
return cards;
}
function Scene() {
this.cards = new Cards();
this.num = 0;
this.dispnum = false;
this.cardnum = false;
this.disp = function () {
for(var i = 0; i < this.cards.length; i++) {
if(this.cards[i].disp != null) {
this.cards[i].disp(this.cards[i]);
}
}
};
this.changedisp = function (pos) {
if(this.num > 1) {
for(var i = 0; i < this.cards.length; i++) {
if(this.cards[i].disp != null) {
this.cards[i].disp = displayCardBehind;
}
}
this.num = 0;
this.dispnum = false;
this.cardnum = false;
}
for(var i = 0; i < this.cards.length; i++) {
if(this.cards[i].disp == null) {
continue;
}
if(this.cards[i].inarea(pos)) {
this.cards[i].changedisp();
if(this.num == 0) {
this.dispnum = this.cards[i].num;
this.cardnum = i;
this.cards[i].disp = displayCard;
}
else if(i != this.cardnum && this.dispnum == this.cards[i].num) {
this.cards[this.cardnum].disp = null;
this.cards[i].disp = null;
this.dispnum = false;
this.cardnum = false;
}
else {
this.cards[i].disp = displayCard;
}
this.num++;
}
}
};
}
function getMouseXY(e) {
var r = e.target.getBoundingClientRect();
return new Point(e.clientX - r.left, e.clientY - r.top);
}
function mouseClicked(e) {
var pos = getMouseXY(e);
scene.changedisp(pos);
}
canvas.onmousedown = mouseClicked;
var scene = new Scene();
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
scene.disp();
}
setInterval(draw, 10);
</script>