考验记忆力的翻牌小游戏
2014-12-13 10:54
267 查看
考验记忆力的翻牌小游戏，主要运用到 setTimeout ,在匹配失败后反转牌面。使用index参数记录翻开第一张牌的索引，与第二张翻开牌对比。
<html>
<head>
<title>翻牌游戏</title>
<script>
var ctx;
var bkcolor = "rgb(211, 33, 204)";
var frontcolor = "rgb(31, 232, 131)";
var mapcolor = "rgb(129, 63, 195)";
var cwidth = 100;
var cheight = 150;
var margin =20;
var rad = 40;
var pstime=0;
var position=[];
var deck=[];
var index=[];
var match=0;
var clk=0;
var tid;
//获得 position
function pos(){
var i;
var j;
for(i=10;i<400;i=i+cwidth+margin){
for(j=10;j<400;j=j+cheight+margin){
position.push([i,j]);
}
}
}
//牌定义
function Card(cx,cy,n){
this.cx = cx;
this.cy = cy;
this.checked = false;
this.msg = n;
this.draw = drawcard;
this.isdelete = false;
}
function drawcard(){
if(this.checked==false && this.isdelete==false){
ctx.fillStyle = bkcolor;
ctx.fillRect(this.cx,this.cy,cwidth,cheight);
}
else{
ctx.fillStyle = frontcolor;
ctx.fillRect(this.cx,this.cy,cwidth,cheight);
if(this.msg==3) ctx.fillStyle="rgb(223, 237, 50)";
if(this.msg==4) ctx.fillStyle="rgb(43, 206, 227)";
if(this.msg==5) ctx.fillStyle="rgb(129, 63, 195)";
if(this.msg==6) ctx.fillStyle="rgb(209, 147, 46)";
if(this.msg==7) ctx.fillStyle="rgb(229, 23, 229)";
if(this.msg==8) ctx.fillStyle="rgb(239, 26, 84)";
var angle = (2*Math.PI)/this.msg;
var vx = this.cx + cwidth/2;
var vy = this.cy + cheight/2;
ctx.beginPath();
ctx.moveTo(vx,vy);
var i;
for (i=1;i<(this.msg+2);i++){
ctx.lineTo(vx+rad*Math.cos(i*angle),vy-rad*Math.sin(i*angle));
}
ctx.fill();
}
if(this.isdelete){
ctx.fillStyle = "rgb(255,255,255)";
ctx.fillRect(this.cx,this.cy,cwidth,cheight);
}
}
//获得牌组
function makedeck(){
pos();
var i;
var count=0;
for(i=3;i<9;i++){
po = position[count];
var cd1 = new Card(po[0],po[1],i);
deck.push(cd1);
count++;
po = position[count];
var cd2 = new Card(po[0],po[1],i);
deck.push(cd2);
count++;
}
shuffle();
}
//洗牌
function shuffle(){
var dl = deck.length;
var i;
for(i=0;i<3*dl;i++){
var cd1 = Math.floor(Math.random()*dl);
var cd2 = Math.floor(Math.random()*dl);
var temp = deck[cd1].msg;
deck[cd1].msg = deck[cd2].msg;
deck[cd2].msg = temp;
}
}
//绘制所有
function drawall(){
var i;
for(i=0;i<deck.length;i++){
deck[i].draw();
}
}
//翻牌
function choose(ev){
var mx;
var my;
if(ev.layerX || ev.layerX==0){
mx = ev.layerX;
my = ev.layerY;
}
if(ev.offsetX || ev.offsetX==0){
mx = ev.offsetX;
my = ev.offsetY;
}
var i;
for(i=0;i<deck.length;i++){
var cd = deck[i];
if((cd.isdelete==false) && (mx>=cd.cx) && (mx<=(cd.cx+cwidth)) && (my>=cd.cy) && (my<=(cd.cy+cheight))){
deck[i].checked = true;
drawall();
if(index.length==0){
index[0]=i;
clk++;
document.f.ck.value = clk;
}
else if(i != index[0]){
clk++;
document.f.ck.value = clk;
if(deck[i].msg == deck[(index[0])].msg){
deck[i].isdelete = true;
deck[(index[0])].isdelete = true;
index=[];
match++;
if(match!=6)
setTimeout(drawall,500);
}
else{
deck[i].checked = false;
deck[(index[0])].checked =false;
index=[];
setTimeout(drawall,500);
}
}
}
}
if(match==6){
ctx.fillStyle = "rgb(195, 28, 188)";
ctx.fillRect(0,0,485,500);
ctx.fillStyle = "rgb(255,255,255)";
ctx.font="40px Arial";
ctx.fillText("YOU WIN!",140,255);
clearInterval(tid);
}
}
function timing(){
pstime++;
document.f.tm.value = pstime;
}
function init(){
ctx=document.getElementById('canvas').getContext('2d');
makedeck();
drawall();
canvas1 = document.getElementById('canvas');
canvas1.addEventListener('click',choose,false);
tid = setInterval("timing();",1000);
}
</script>
</head>
<body onload="init();">
<p>点击翻牌</p>
<canvas id="canvas" width="485" height="510"></canvas>
<br/>
<form id="f" name="f">
点击次数<input id="ck" name="ck" value="0"/>
<br/>
用时(s)<input id="tm" name="tm" value="0"/>
</form>
</body>
</html>
<html>
<head>
<title>翻牌游戏</title>
<script>
var ctx;
var bkcolor = "rgb(211, 33, 204)";
var frontcolor = "rgb(31, 232, 131)";
var mapcolor = "rgb(129, 63, 195)";
var cwidth = 100;
var cheight = 150;
var margin =20;
var rad = 40;
var pstime=0;
var position=[];
var deck=[];
var index=[];
var match=0;
var clk=0;
var tid;
//获得 position
function pos(){
var i;
var j;
for(i=10;i<400;i=i+cwidth+margin){
for(j=10;j<400;j=j+cheight+margin){
position.push([i,j]);
}
}
}
//牌定义
function Card(cx,cy,n){
this.cx = cx;
this.cy = cy;
this.checked = false;
this.msg = n;
this.draw = drawcard;
this.isdelete = false;
}
function drawcard(){
if(this.checked==false && this.isdelete==false){
ctx.fillStyle = bkcolor;
ctx.fillRect(this.cx,this.cy,cwidth,cheight);
}
else{
ctx.fillStyle = frontcolor;
ctx.fillRect(this.cx,this.cy,cwidth,cheight);
if(this.msg==3) ctx.fillStyle="rgb(223, 237, 50)";
if(this.msg==4) ctx.fillStyle="rgb(43, 206, 227)";
if(this.msg==5) ctx.fillStyle="rgb(129, 63, 195)";
if(this.msg==6) ctx.fillStyle="rgb(209, 147, 46)";
if(this.msg==7) ctx.fillStyle="rgb(229, 23, 229)";
if(this.msg==8) ctx.fillStyle="rgb(239, 26, 84)";
var angle = (2*Math.PI)/this.msg;
var vx = this.cx + cwidth/2;
var vy = this.cy + cheight/2;
ctx.beginPath();
ctx.moveTo(vx,vy);
var i;
for (i=1;i<(this.msg+2);i++){
ctx.lineTo(vx+rad*Math.cos(i*angle),vy-rad*Math.sin(i*angle));
}
ctx.fill();
}
if(this.isdelete){
ctx.fillStyle = "rgb(255,255,255)";
ctx.fillRect(this.cx,this.cy,cwidth,cheight);
}
}
//获得牌组
function makedeck(){
pos();
var i;
var count=0;
for(i=3;i<9;i++){
po = position[count];
var cd1 = new Card(po[0],po[1],i);
deck.push(cd1);
count++;
po = position[count];
var cd2 = new Card(po[0],po[1],i);
deck.push(cd2);
count++;
}
shuffle();
}
//洗牌
function shuffle(){
var dl = deck.length;
var i;
for(i=0;i<3*dl;i++){
var cd1 = Math.floor(Math.random()*dl);
var cd2 = Math.floor(Math.random()*dl);
var temp = deck[cd1].msg;
deck[cd1].msg = deck[cd2].msg;
deck[cd2].msg = temp;
}
}
//绘制所有
function drawall(){
var i;
for(i=0;i<deck.length;i++){
deck[i].draw();
}
}
//翻牌
function choose(ev){
var mx;
var my;
if(ev.layerX || ev.layerX==0){
mx = ev.layerX;
my = ev.layerY;
}
if(ev.offsetX || ev.offsetX==0){
mx = ev.offsetX;
my = ev.offsetY;
}
var i;
for(i=0;i<deck.length;i++){
var cd = deck[i];
if((cd.isdelete==false) && (mx>=cd.cx) && (mx<=(cd.cx+cwidth)) && (my>=cd.cy) && (my<=(cd.cy+cheight))){
deck[i].checked = true;
drawall();
if(index.length==0){
index[0]=i;
clk++;
document.f.ck.value = clk;
}
else if(i != index[0]){
clk++;
document.f.ck.value = clk;
if(deck[i].msg == deck[(index[0])].msg){
deck[i].isdelete = true;
deck[(index[0])].isdelete = true;
index=[];
match++;
if(match!=6)
setTimeout(drawall,500);
}
else{
deck[i].checked = false;
deck[(index[0])].checked =false;
index=[];
setTimeout(drawall,500);
}
}
}
}
if(match==6){
ctx.fillStyle = "rgb(195, 28, 188)";
ctx.fillRect(0,0,485,500);
ctx.fillStyle = "rgb(255,255,255)";
ctx.font="40px Arial";
ctx.fillText("YOU WIN!",140,255);
clearInterval(tid);
}
}
function timing(){
pstime++;
document.f.tm.value = pstime;
}
function init(){
ctx=document.getElementById('canvas').getContext('2d');
makedeck();
drawall();
canvas1 = document.getElementById('canvas');
canvas1.addEventListener('click',choose,false);
tid = setInterval("timing();",1000);
}
</script>
</head>
<body onload="init();">
<p>点击翻牌</p>
<canvas id="canvas" width="485" height="510"></canvas>
<br/>
<form id="f" name="f">
点击次数<input id="ck" name="ck" value="0"/>
<br/>
用时(s)<input id="tm" name="tm" value="0"/>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS小游戏之仙剑翻牌源码详解
- 微信小程序版翻牌小游戏
- 记忆力小游戏
- 一个测试记忆力的小游戏
- 记忆力小游戏
- html5+canvas+纯原生javascript+audio开发仙剑记忆力翻牌游戏
- unity翻牌小游戏（初学者）
- 用51单片机设计一款记忆力测试小游戏
- JS小游戏之仙剑翻牌源码详解
- 基于Linux系统的SDL图形库记忆翻牌小游戏
- 基于javascript实现句子翻牌网页版小游戏
- 基于javascript实现句子翻牌网页版小游戏
- 记忆力训练--网页小游戏
- 增强记忆力十法
- 小游戏（名字不知道叫什么好，反正是好像打靶的那种游戏）
- 如何提高你的记忆力之一
- 记忆考验
- [转]适合朋友或公司聚会的小游戏
- 封杀Windows XP自带的小游戏的具体办法
- 考验你的思维能力：一类含有if P then Q句式的逻辑问题