<!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. uva 725 division（水题）——yhx

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABVMAAAOHCAIAAAClwESxAAAgAElEQVR4nOydybGturJFcQEPfgQu4A

  2. 《The Django Book》实战--第二章--动态网页基础

    这章演示了一些最基本的Django开发动态网页的实例,由于版本不一样,我用的是Django 1.,6.3,有些地方按书上的做是不行的,所以又改了一些,写出来让大家参考. 这是一个用python写的一个 ...

  3. 利用WinPcap模拟网络包伪造飞秋闪屏报文

    起因 不知道从什么时候开始,同事开始在飞秋上发闪屏振动了,后来变本加厉,成了每日一闪.老闪回去也比较麻烦,作为程序猿呢,有没有什么偷懒的办法呢?(同事负责用户体验,不大懂编程).然后尝试了以下思路: ...

  4. [转]Source Insight使用小技巧小结

    Source Insight是一款强大的代码查看工具,本身支持扩展性很好.下面我们就介绍2个扩展用例. 1.快速打开当前文件所在的目录,这个功能类似于eclipse的easyshell插件,就是能快速 ...

  5. sublime修改字体大小

    /Packages/Theme\ -\ Default/Default.sublime-theme { "class": "label_control", , ...

  6. poj 1458 Common Subsequence

    Common Subsequence Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 46387   Accepted: 19 ...

  7. [转]php返回json数据中文显示的问题

    转自 : http://blog.csdn.net/superbirds/article/details/8091910 解决方法:   <?php    function Notice(){  ...

  8. 查询EBS请求日志的位置和名称

    select * from FND_CONCURRENT_PROGRAMS_VL fcp where fcp.USER_CONCURRENT_PROGRAM_NAME like '%CUX%XXXX% ...

  9. PHP基础12：数组

    <?php //1.实例 $array = array("VOLVO","BMW","SASS"); for ($i=0; $i &l ...

  10. 集成架构：对比 Web API 与面向服务的架构和企业应用程序集成(转）

    http://kb.cnblogs.com/page/521644/ 摘要:总体上讲,SOA 和 Web API 似乎解决的是同一个问题:以实时的.可重用的方式公开业务功能.本教程将分析这些举措有何不 ...