考验记忆力的翻牌小游戏

最新推荐文章于 2022-11-16 14:40:06 发布

侠之大者为国为民

最新推荐文章于 2022-11-16 14:40:06 发布

阅读量4.3k

点赞数

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.youkuaiyun.com/sofeien/article/details/41908147

版权

考验记忆力的翻牌小游戏，主要运用到 setTimeout ,在匹配失败后反转牌面。使用index参数记录翻开第一张牌的索引，与第二张翻开牌对比。

<html>
<head>
    <title>翻牌游戏</title>
	<script>
        var ctx;
        var bkcolor = "rgb(211, 33, 204)";
        var frontcolor = "rgb(31, 232, 131)";
        var mapcolor = "rgb(129, 63, 195)";
        var cwidth = 100;
        var cheight = 150;
        var margin =20;
        var rad = 40;
        var pstime=0;
        var position=[];
        var deck=[];
        var index=[];
        var match=0;
        var clk=0;
		var tid;
        //获得 position
        function pos(){
            var i;
            var j;
            for(i=10;i<400;i=i+cwidth+margin){
                for(j=10;j<400;j=j+cheight+margin){
                    position.push([i,j]);
                }
            }
        }
        //牌定义
        function Card(cx,cy,n){
            this.cx = cx;
            this.cy = cy;
            this.checked = false;
            this.msg = n;
            this.draw = drawcard;
            this.isdelete = false;
        }
        function drawcard(){
            if(this.checked==false && this.isdelete==false){
                ctx.fillStyle = bkcolor;
                ctx.fillRect(this.cx,this.cy,cwidth,cheight);

最低0.47元/天解锁文章