HTML5卡通小猫卡片记忆游戏

Octocat Memory Game，带计时和选择次数。

html5, game, 益智

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 4458
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {

$('.board').hide();
    var stop_fa;
    var stop_fc;
    var stop_time;
    var img = [
        'https://octodex.github.com/images/steroidtocat.png',
        'https://octodex.github.com/images/megacat-2.png',
        'https://octodex.github.com/images/dodgetocat_v2.png',
        'https://octodex.github.com/images/femalecodertocat.png',
        'https://octodex.github.com/images/ironcat.jpg',
        'https://octodex.github.com/images/octobiwan.jpg',
        'https://octodex.github.com/images/spidertocat.png',
        'https://octodex.github.com/images/dojocat.jpg',
        'https://octodex.github.com/images/saritocat.png',
        'https://octodex.github.com/images/plumber.jpg',
        'https://octodex.github.com/images/linktocat.jpg',
        'https://octodex.github.com/images/kimonotocat.png'
    ]

//4*6 card group;
    var card_id = 0
    for (i = 0; i < 4; i++) {
        for (j = 0; j < 6; j++) {
            $('.room').append('	<div class="card" data-id="' + card_id + '"><div class="front face"></div><div  data-bid="0" class="back face" ></div></div>')
            card_id++;
        }
        $('.room').append('<br>')
    }

var $card = $('.card')
    var $front = $('.front')
    var $back = $('.back')

//Random Images on card

randomIMG();

function randomIMG() {

var c_array = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10, 11, 11, 12, 12];
        var c_length = c_array.length

$card.each(function() {

var r_id = Math.floor(Math.random() * (c_length - 1)); // Get Random Number

var temp = c_array[r_id]; //Swaping
            c_array[r_id] = c_array[c_length - 1];
            c_array[c_length - 1] = temp;

c_length-- // decrement c_length by 1

$(this).find('.back').css({ // Set css
                'background-image': 'url(' + img[temp - 1] + ')',
                'background-repeat': 'no-repeat',
                'background-size': '100%'
            })

$(this).find('.back').attr('data-bid', temp) // Set data attribute
        })
    }

$('.start').click(function() {
        stop_fc = false;
        stop_fa = true;
        stop_time = false;
        $card.removeClass('flip');
        $card.removeClass('fliped');
        randomIMG();
        flip_click();
        $('.start').hide();

})

$('.again').click(function() {
        stop_fc = true;
        stop_fa = false;
        stop_time = true;
        $('.c_move').html(00);
        $('.min').html(00);
        $('.sec').html(00);
        $card.removeClass('flip');
        $card.removeClass('fliped');
        randomIMG();
        flip_auto();
        flip_auto();
        flip_auto();
        $('.start').show();
        $board.hide();
    })

var total = 0;
    var move = 0;

function flip_click(stop_fc) {
        var first_card = null,
            secn_card = null;
        var count = 1;

$card.find('.front').click(function() {
            if (stop_fc) {
                return
            }

$(this).parent('.card').toggleClass('flip');

move++
            $('.c_move').html(move);

if (count == 1) {
                first_card = $(this).parent('.card').find('.back').data('bid');
            } else if (count == 2) {
                secn_card = $(this).parent('.card').find('.back').attr('data-bid');
            }

if (first_card == secn_card) {

$('[data-bid="' + first_card + '"]').parent('.card').addClass('fliped')
                total++;
                if (total == 12) {
                    stop_time = true;
                    var sec_f = pad(++sec % 60)
                    var min_f = pad(parseInt(sec / 60, 10))
                    stop_fc = reset(move, sec_f, min_f);
                    move = 0;
                    total = 0
                    first_card = null;
                    secn_card = null;
                    count = 0;
                    return 0;
                }
            }
            count++
            if (count > 2) {
                first_card = null;
                secn_card = null;
                count = 1;
                setTimeout(function() {
                    $card.removeClass('flip');

}, 400)
            }
        });

var sec = 0;

}

flip_auto();
    flip_auto();
    flip_auto();

function flip_auto(time) {

setTimeout(function() {
            if (stop_fa) {
                return;
            }
            var r_ran = randomNum(1, 24)
            $('[data-id="' + r_ran + '"]').toggleClass('flip')

var newTime = randomNum(500, 1000);
            console.log(stop_fa, stop_fc);

flip_auto(newTime)

}, time)
    }

function randomNum(min, max) {
        return Math.floor(Math.random() * ((max - min) + 1) + min);
    }

var $board = $('.board')

function reset(move, sec, min) {
        $board.show()
        $board.find('.scr_moves').html(move);
        $board.find('.scr_sec').html(sec);
        $board.find('.scr_min').html(min);
        return true;
    }

});

编译

CSS

@import url('https://fonts.googleapis.com/css?family=Courgette');
body {
    margin: 0 auto;
    font-family: 'Courgette', cursive;
}
.head {
    width: 100%;
    text-align: center;
    margin-top: 25px;
    font-size: 30px;
}
.head .time {
    float: left;
    width: 200px;
    text-weight: 650;
}
.head .start {
    display: inline-block;
    margin: 0 auto;
    margin-top: -20px;
    background: #7b7c7d;
    background-image: linear-gradient(to bottom, #7b7c7d, #242424);
    border-radius: 10px;
    color: #ffffff;
    font-size: 22px;
    padding: 20px 20px 20px 20px;
    text-decoration: none;
    text-weight: 600;
    cursor: pointer;
}
.head .move {
    float: right;
    width: 200px;
    text-weight: 650;
}
.room .card {
    display: inline-flex;
    width: 130px;
    height: 130px;
    position: relative;
    margin: 5px;
    transition: .40s;
    -webkit-transform-style: preserve-3d;
}
.room .card .face {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden;
    z-index: 2;
}
.room .card .front {
    position: absolute;
    background: url(/uploads/161101/HTML5_Badge_512.png);
    background-repeat: no-repeat;
    background-size: 100%;
    z-index: 1;
}
.room .card .back {
    transform: rotateY(-180deg);
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100%;
}
.flip,
.fliped {
    transform: rotateY(180deg);
    transition: .40s;
}
.board {
    position: relative;
    width: 400px;
    top: -425px;
    height: 300px;
    border: 15px inset teal;
    border-radius: 20px;
    margin: 0 auto;
    text-align: center;
    background: #fff;
    color: #4d4ba3;
    box-shadow: 0px 0px 50px 0px rgba(50, 50, 50, 0.82);
}
.board .greet {
    font-size: 45px;
    margin: 10px;
    font-weight: 700;
}
.board .scr {
    font-size: 27px;
    margin: 10px;
    font-weight: 500;
}
.board .scr_time {
    display: inline-flex;
    font-size: 27px;
    margin: 10px;
    font-weight: 600;
}
.board .scr_move {
    display: inline-flex;
    font-size: 27px;
    margin: 10px;
    font-weight: 600;
}
.board .again {
    display: block;
    margin: 0 auto;
    margin-top: 10px;
    background: #2cbda5;
    background-image: linear-gradient(to bottom, #2cbda5, #123e59);
    border-radius: 15px;
    font-family: Arial;
    color: #ffffff;
    font-size: 25px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
}
.board .again:hover {
    background: #38c5de;
    background-image: linear-gradient(to bottom, #38c5de, #325063);
    text-decoration: none;
}
.me {
    font-size: 20px;
    margin-top: 20px;
    font-weight: 600;
}
@media only screen and (max-width: 890px) {
    .room .card {
        width: 95px;
        height: 95px;
    }
    .board {
        top: -385px;
    }
}
@media only screen and (max-width: 690px) {
    .room .card {
        width: 65px;
        height: 65px;
    }
    .board {
        width: 300px;
        top: -325px;
    }
}
@media only screen and (max-width: 400px) {
    .room .card {
        width: 40px;
        height: 40px;
    }
    .board {
        width: 300px;
        top: -125px;
    }
}
@media only screen and (max-width: 290px) {
    .room .card {
        width: 25px;
        height: 25px;
    }
    .board {
        width: 300px;
        top: -90px;
    }
}

HTML

Octocat Memory Game，带计时和选择次数。

html5, game, 益智

编辑器支持Emmet

快捷键

Octocat Memory Game，带计时和选择次数。

html5, game, 益智

HTML5 记忆测试游戏

HTML5 Canvas很有趣的拷贝猫小游戏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：