カードゲーム (神経衰弱 一人遊びバージョン)

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