<!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. java9-6 内部类

    1. 内部类概述: 把类定义在其他类的内部,这个类就被称为内部类. 举例:在类A中定义了一个类B,类B就是内部类. 内部的访问特点: A:内部类可以直接访问外部类的成员,包括私有. B:外部类要访问内 ...

  2. php strcmp引起的问题

    在官方的文档有这么一端说明: Note a difference between 5.2 and 5.3 versions echo (int)strcmp('pending',array()); w ...

  3. Spring MVC之cookies跟session 数据绑定

    在我最早接触web开发的中学时代,学习的asp技术对于session的概念其实很清楚 Session("username")="张三"下次要用的时候,直接用se ...

  4. 09Mybatis_入门程序——删除用户以及更新用户

    删除用户: 还是前面的的案例,别的都不改,就修改两处地方.1.user.xml文件以及2.Mybatis_first.java文件 user.xml文件代码修改如下: <?xml version ...

  5. 18SpringMvc_在业务控制方法中收集数组参数

    这篇文章我们要解决的问题的多选框选中,并批量删除. 比如:

  6. 【转】【C#】【Thread】【Task】多线程

    多线程 多线程在4.0中被简化了很多,仅仅只需要用到System.Threading.Tasks.::.Task类,下面就来详细介绍下Task类的使用. 一.简单使用 开启一个线程,执行循环方法,返回 ...

  7. Linux 网络编程四（socket多线程升级版）

    //网络编程--客户端 #include <stdio.h> #include <stdlib.h> #include <string.h> #include &l ...

  8. Linux 网络编程二（Socket创建）

    TCP通信 一个程序使用套接字需要执行4个步骤. --分配套接口和初始化 --连接 --发送或接收数据 --关闭套接字 涉及到的调用包括socket.bind.listen.connect(阻塞线程) ...

  9. U3D rootMotion

    Body Transform The Body Transform is the mass center of the character. It is used in Mecanim's retar ...

  10. 完美隐藏win7文件和文件夹

    有没有一种方法即使使用隐藏模式也不能查看, 没错可以用上帝模式....... 啥是Win7上帝模式?不知道的看看..... <<<<<<<<<&l ...