<!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. Android多线程----异步消息处理机制之Handler详解

    ​[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...

  2. 第2章 面向对象的设计原则（SOLID）：5_迪米特法则

    5. 迪米特法则(Law of Demeter,LoD) 5.1 定义 (1)应尽量减少其他对象之间的交互,对象只和自己的朋友交谈,即对其他依赖的类越少越好(不要和太多的类发生关系). (2)尽量不要 ...

  3. SpringMVC常用接收Json的两种方法

    @RequestBody JSONObject requestJson @RequestBody User user 一种是自定义加注解,由Spring负责绑定,一种是使用通用的JSONObject

  4. jQuery on()，live()，trigger()

    jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,childSelector,data,function,map); 由此扩展开来的几个以前常见的方 ...

  5. Linux ssh登录和软件安装详解

    阿哲Style   Linux第一天 ssh登录和软件安装详解 Linux学习第一天 操作环境: Ubuntu 16.04 Win10系统,使用putty_V0.63 本身学习Linux就是想在服务器 ...

  6. [py]编码 Unicode utf-8

    什么是字符集 在介绍字符集之前,我们先了解下为什么要有字符集.我们在计算机屏幕上看到的是实体化的文字,而在计算机存储介质中存放的实际是二进制的比特流.那么在这两者之间的转换规则就需要一个统一的标准,否 ...

  7. php基础31：正则匹配-元字符

    <?php //2.正则表达式:元字符 $model = "/php/"; $string = "php"; // 1.元字符 [a-z] 匹配任何a-z ...

  8. python多进程共享变量Value使用tips

    前言: 在使用tornado的多进程时,需要多个进程共享一个状态变量,于是考虑使用multiprocessing.Value(对于该变量的具体细节请查阅相关资料).在根据网上资料使用Value时,由于 ...

  9. Java运算符优先级

    序列号 符号 名称 结合性(与操作数) 目数 说明 1 . 点 从左到右 双目 ( ) 圆括号 从左到右   [ ] 方括号 从左到右   2 + 正号 从右到左 单目 - 负号 从右到左 单目 ++ ...

  10. [CareerCup] 7.1 Basketball Shooting Game 投篮游戏

    7.1 You have a basketball hoop and someone says that you can play one of two games. Game 1: You get ...