<!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. 数据结构Java实现06----中缀表达式转换为后缀表达式

    本文主要内容: 表达式的三种形式 中缀表达式与后缀表达式转换算法 一.表达式的三种形式: 中缀表达式:运算符放在两个运算对象中间,如:(2+1)*3.我们从小做数学题时,一直使用的就是中缀表达式. 后 ...

  2. [本人开发的游戏] Discuz网页动物园插件1.0Beta发布！让积分流动起来！

        插件发布 插件名称: DZ网页动物园插件 插件来源: 原创插件 适用版本: Discuz! X3 语言编码: GBK简体 UTF8简体 BIG5繁体 UTF8繁体  最后更新时间: 2014- ...

  3. grunt的使用方法，环境配置和插件安装

    虽然现在grunt的用的越来越少了,但是插件数量还是相当多的,另外grunt和gulp的使用相当相似: grunt需要安装node和npm 验证node是否安装:node -v 验证npm是否安装:n ...

  4. kvm虚拟机时间修改

    在虚拟化环境中,虚拟机在长时间运行过程中,时间会变慢,通常的作法是配置ntpdate定时与时间服务器进行时间同步的计划任务.KVM虚拟机默认采用utc时间,需要专门修改,以及考虑kvm时间同步问题.1 ...

  5. VisualStudio2013+EF6+MySql5.5环境下配置

    看院子里对EF框架和MySql的配置文章不少,但是几乎出自一篇文章的转载,而且这篇转载的文章的也比较坑爹,下面我将介绍一下我的配置过程: 第一步:安装mysql-connector-net-6.9.9 ...

  6. Django基础 - Debug设置为False后静态文件获取404

    当设置setting.py文件当中的DEBUG=FALSE后,Django会默认使用Web Server的静态文件处理,故若没设置好Web Server对静态文件的处理的话,会出现访问静态文件404的 ...

  7. java中从1970-1-1到当前时间之间的毫秒数转换为oracle date

    java中System.currentTimeMillis()取到的是从1970-01-01 00:00:00.000到当前时间的毫秒数,一个long类型的值. 现在oracle数据库中某表中存取的是 ...

  8. python数字图像处理（8）：对比度与亮度调整

    图像亮度与对比度的调整,是放在skimage包的exposure模块里面 1.gamma调整 原理:I=Ig 对原图像的像素,进行幂运算,得到新的像素值.公式中的g就是gamma值. 如果gamma& ...

  9. Ubuntu下类似于Total Commander的两个工具

    Total Commander for linux Is there a Linux version? Unfortunately not. Because of problems with port ...

  10. [CareerCup] 14.6 CircularArray 环形数组

    14.6 Implement a CircularArray class that supports an array-like data structure which can be efficie ...