<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>pock_game</title>

</head>

<body>

<style>

form{

    width:330px;

    margin:20px;

    background-color:pink;

    padding:20px;

}

input{

    text-align:right;

}

</style>

<canvas id="canvas" width="1000" height="400"></canvas>

<script>

var ctx = document.getElementById('canvas').getContext('2d'),

    firstpick = true,

    firstcard,

    secondcard,

    fontbgcolor = "rgb(251,215,73)",

    polycolor = "rgb(254,11,0)",

    backcolor = "rgb(128,0,128)",

    tablecolor = "rgb(255,255,255)",

    cardrad = 30,

    deck = [],

    firstsx = 30,

    firstsy = 50,

    margin = 30,

    cardwidth = 4*cardrad,

    cardheight = 4*cardrad,

    matched,

    starttime;

function Card(sx, sy, swidth, sheight, info){

    this.sx = sx;

    this.sy = sy;

    this.swidth = swidth;

    this.sheight = sheight;

    this.info = info;

    this.draw = drawback;

};

function makedeck(){

    var i;

    var acard;

    var bcard;

    var cx = firstsx;

    var cy = firstsy;

    for(i=3; i<9; i+=1){

        acard = new Card(cx, cy, cardwidth, cardheight, i);

        deck.push( acard );

        bcard = new Card(cx, cy+cardwidth+margin, cardwidth, cardheight, i);

        deck.push( bcard );

        cx = cx + cardwidth + margin;

        acard.draw();

        bcard.draw();

    };

    shuffle();

};

function shuffle(){

    var i;

    var k;

    var holder;

    var dl = deck.length;

    var nt;

    for(nt=0; nt<3*dl; nt++){

        i = Math.floor( Math.random()*dl );

        k = Math.floor( Math.random()*dl );

        holder = deck[i].info;

        deck[i].info = deck[k].info;

        deck[k].info = holder;

    };

};

function Polycard(sx, sy, rad, n){

    this.sx = sx;

    this.sy = sy;

    this.rad = rad;

    this.draw = drawpoly;

    this.n = n;

    this.angle = (2*Math.PI)/n;

};

function drawpoly(){

    ctx.fillStyle = fontbgcolor;

    ctx.fillRect(this.sx - 2*this.rad, this.sy - 2* this.rad, 4*this.rad, 4*this.rad)

    var i;

    var rad = this.rad;

    document.title = this.n;

    //ctx.moveTo(this.sx+rad*Math.cos(-0.5*this.angle, this.sy+rad*Math.sin(-0.5*this.angle)))

    //for(i=0; i<this.n; i++){

    //    ctx.lintTo(this.sx + rad*Math.cos((i-0.5)*this.angle),this.sy+rad*Math.sin(i-0.5*this.angle));

    //};

    //ctx.fill();

};

function drawback(){

    ctx.fillStyle = backcolor;

    ctx.fillRect(this.sx, this.sy, this.swidth, this.sheight);

};

function choose(ev){

    var mx;

    var my;

    var pick1;

    var pick2;

    if(ev.layerX || ev.layerX==0){

        mx = ev.layerX;

        my = ev.layerY;

    }else if(ev.offsetX || ev.offsetX == 0){

        mx = ev.offsetX;

        my = ev.offsetY;

    };

    var i;

    for(i=0; i<deck.length; i++){

        var card =deck[i];

        if(card.sx >= 0){

            if((mx > card.sx)&&(mx<card.sx+card.swidth)&&(my>card.sy)&&(my<card.sy+card.sheight)){

                if((firstpick) || (i!=firstcard))break;

            };

        };

    };

    //如果是全部循环完毕了，那么i就等于deck的length了，所以就不会走里面了;

    //for +  break 是一种挺好的写法;

    if(i<deck.length){

        if(firstpick){

            firstcard = i;

            firstpick = false;

            pick = new Polycard(card.sx + cardwidth*0.5,card.sy+cardheight*0.5,cardrad,card.info)

            pick.draw();

        }else{

            secondcard = i;

            pick2 = new Polycard(card.sx+cardwidth*0.5,card.sy+cardheight*0.5,cardrad,card.info);

            pick2.draw();

            if( deck[i].info == deck[firstcard].info ){

                matched = true;

                var nm = 1 + Number(document.f.count.value);

                document.f.count.value = nm;

                if(nm >= 0.5*deck.length){

                    var now = (new Date()).getTime();

                    alert( (now-starttime)/1000 );

                }

            }else{

                matched = false;

            };

            firstpick = true;

            setTimeout(flipback,1000);

        }

    };

};

function flipback(){

    if(!matched){

        deck[firstcard].draw();

        deck[secondcard].draw();

    }else{

        ctx.fillStyle = tablecolor;

        ctx.fillRect(deck[secondcard].sx,deck[secondcard].sy,deck[secondcard].swidth,deck[secondcard].sheight);

        ctx.fillRect(deck[firstcard].sx,deck[firstcard].sy,deck[firstcard].swidth,deck[firstcard].sheight);

        deck[firstcard].sx = -222;

        deck[secondcard].sx = -222;

    }

};

function init(){

    ctx = document.getElementById('canvas').getContext('2d');

    canvas1 = document.getElementById('canvas');

    canvas1.addEventListener('click',choose,false);

    makedeck();

    starttime = (new Date()).getTime();

};

init();

</script>

<form name="f" id="f">

<input type="text" name="count" id="count" />

</form>

</body>

</html>

html5_canvas-记忆力卡片游戏的更多相关文章

  1. 【sicily】卡片游戏

    卡片游戏  Time Limit: 1sec    Memory Limit:32MB Description 桌上有一叠牌,从第一张牌(即位于顶面的牌)开始从上往下依次编号为1~n.当至少还剩两张牌 ...

  2. Sicily 1931. 卡片游戏

    题目地址:1931. 卡片游戏 思路: 纯属数据结构中队列的应用,可以练练手. 具体代码如下: #include <iostream> #include <queue> usi ...

  3. 卡片游戏（hdu4550）贪心

    卡片游戏 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) Total Submi ...

  4. nyoj905 卡片游戏

    卡片游戏 时间限制:1000 ms  |  内存限制:65535 KB 难度:1   描述 小明最近宅在家里无聊,于是他发明了一种有趣的游戏,游戏道具是N张叠在一起的卡片,每张卡片上都有一个数字,数字 ...

  5. NYOJ 905 卡片游戏

    卡片游戏 时间限制:1000 ms  |  内存限制:65535 KB 难度:1 描写叙述 小明近期宅在家里无聊.于是他发明了一种有趣的游戏.游戏道具是N张叠在一起的卡片,每张卡片上都有一个数字,数字 ...

  6. Java实现 LeetCode 822 翻转卡片游戏（暴力）

    822. 翻转卡片游戏 在桌子上有 N 张卡片,每张卡片的正面和背面都写着一个正数(正面与背面上的数有可能不一样). 我们可以先翻转任意张卡片,然后选择其中一张卡片. 如果选中的那张卡片背面的数字 X ...

  7. hdu 4550 卡片游戏 贪心

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4550 题意:有n(n <= 100)个0~9之间的卡片,从左往右将卡片放到之前的卡片最左边或者最 ...

  8. [Swift]LeetCode822. 翻转卡片游戏 | Card Flipping Game

    On a table are N cards, with a positive integer printed on the front and back of each card (possibly ...

  9. [LeetCode] Card Flipping Game 翻卡片游戏

    On a table are N cards, with a positive integer printed on the front and back of each card (possibly ...

  10. 【XSY1591】卡片游戏 DP

    题目描述 有标有数字为\(1\)~\(9\)的卡片各\(a_1,a_2\cdots a_9\)张,还有标有乘号的卡片\(m\)张.从中取出\(n\)张按任意顺序排列,取出两个乘号相邻和乘法在边界上的非 ...

随机推荐

  1. 【温故而知新-Javascript】为DOM元素设置样式

    1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...

  2. ASP.NET URL伪静态重写实现方法

    ASP.NET URL伪静态重写实现方法 首先说下,ASP.NET URL伪静态只是将~/a_1.html指向到了~/a.aspx?ID=1,但a.aspx还是真实存在的,你不用./a_1.html来 ...

  3. poj 1463 Strategic game DP

    题目地址:http://poj.org/problem?id=1463 题目: Strategic game Time Limit: 2000MS   Memory Limit: 10000K Tot ...

  4. 给Testerhome测试小道消息做个硬广告

    测试小道消息在荔枝FM上的粉丝马上就要超过1k了.还差17个我们就能够开通社区了.欢迎大家都来收听测试小道消息哈--更多精彩内容还希望大家下载荔枝fm.关注FM245329. 如果你还不了解测试小道消 ...

  5. Codeforces Round #266 (Div.2) B Wonder Room --枚举

    题意:给出一个两边长为a,b的矩形,要求增加a和增加b使a*b>=6*n且a*b最小. 解法:设新的a,b为a1,b1,且设a<b,那么a<=a1<=ceil(sqrt(6*n ...

  6. java 16-1 ArrayList的练习1

    需求: ArrayList去除集合中字符串的重复值(去掉相同的字符串) 分析: 第一种做法:创建一个新的空集合: A:创建1个具有相同字符串的集合 B:创建1个空的集合 C:遍历第一个集合里面的元素 ...

  7. IT技术博客收藏

    1. coolshell.cn 特点: 每篇都是精品 2. 云风 特点: 3. 阮一峰的博客 特点:高精深 3. offbye涛声依旧-全端技术博客 特点: android的开发技术比较多,非常值得一 ...

  8. android窗口泄漏,isInEditMode解决可视化编辑器无法识别自定义控件的问题

    android窗口泄漏 在做项目是遇到这个错误:google:WindowManager: Activity has leaked window. 产 生原因:我们知道Android的每一个Activ ...

  9. String类常用方法。

    一,字符数组与字符串. 一个字符串可以变成一个字符数组,同样,一个字符数组可以变成一个字符串. 在String类中提供了以下操作方法. 1)将字符串变成字符数组:public char[] toCha ...

  10. HAXM cannot be installed nutil TV-x is enabled

    提示错误:如图 HAXM cannot be installed nutil TV-x is enabled 问题原因: 电脑没有启动Intel的虚拟化技术 解决方法: 重启电脑,进BIOS中启动VT ...