console 命令行工具 X clear

console

Vue.directive('mg', function(el, binding, vnode) {
  el.style = 'color:' + binding.value;
});
var app = new Vue({
  el: '#app',
  data: {
    num: 10,
    color: 'green'
  },
  methods: {
    add: function() {
      this.num++;
    }
  }
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Memory Game</title>
    <style>
        .game{
            width: 800px;
            margin: 0 auto;
            padding-bottom: 50px;
            border: 1px solid green;
            text-align: center;
            background: #243B55; 
            color: #ddd;
        }
        .reset{
            text-align: right;
            margin: 30px 120px 50px;
        }

        .reset span{
            background-color: #FD746C;
            padding: 8px 30px 10px;
            cursor: pointer;
            border-radius: 4px;
            font-size: 20px;
        }

        .board{
            width: 600px;
            height: 600px;
            position: relative;
            margin: 30px auto;
        }

        .card{
            background-color: #fff;
            width: 120px;
            height: 120px;
            position: absolute;
            transform-style: preserve-3d;
            transition: transform 1s;
        }
        .card img{
            width: 70%;
            margin-top: 10%; 
        }
    
        .card-face{
            width: 100%;
            height: 100%;
            position: absolute;
            overflow: hidden;
            backface-visibility: hidden;
        }
        .card-front {
            transform: rotateY( 180deg );
        }

    </style>
</head>
<body>
    <div class="game">
        <h2>
            Welcome to our memory game!
        </h2>
        <div id="root">
            <div class="reset">
                <span @click="initStatus">reset</span>
            </div>
            <div class="board">
                <div v-for="item in icons" 
                     :key="item.id" 
                     @click="check(item)"
                     class="card"
                     :style="{ transform: `translate(${item.loc.x}px, ${item.loc.y}px) rotateY( ${item.flip?180:0}deg )` }"
                     >
                     <!-- 卡牌正面 -->
                     <div class="card-face card-front">
                        <img :src="item.url"/>
                    </div>
                    <!-- 卡牌反面 -->
                    <div class="card-face card-back">
                        <img src="./img/back.png"/>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#root",
        data: {
            icons: [],
            locs: [],
            current: null
        },
        methods: {
            init(){
                this.initImage()
                this.initLocation()
                this.initStatus()
            },

            shuffle(){
                this.locs.sort( () => {
                    return .5 - Math.random();
                });
                this.icons.forEach((item,index) => {
                    item.flip = false
                    item.loc = this.locs[index]
                })
            },

            initImage(){
                const NUM = 8
                let firstAdd = true
                let i = 0
                while(i < NUM){
                    this.icons.push({
                        url: `./img/pic${i}.png`,
                        value: i,
                        id: `pic${i}${firstAdd}`,
                        flip: false,
                        loc: null
                    })

                    if(!firstAdd) i++
                    firstAdd = !firstAdd
                }
            },

            initLocation(){
                const LATTICE_NUM = 4, delta = 150, gap = 10
                for(let i=0; i<LATTICE_NUM; i++){
                    for(let j=0; j<LATTICE_NUM; j++){
                        this.locs.push({
                            x: j * ( gap + delta ),
                            y: i * ( gap + delta )
                        })
                    }
                }
            },

            calcTime(){
                if(this.startTime === -1) this.startTime = new Date().getTime() //记录游戏开始时间
                if(!this.icons.some((icon) => {
                   return icon.flip === false
                })){
                    let endTime = new Date().getTime()
                    let time = (endTime-this.startTime)/1000
                    this.timer = setTimeout(() => {   //动画完成时间1s，在1s后再通知结果
                        alert(`您用了${time.toFixed(0)}秒完成游戏!`)
                        clearTimeout(this.timer)
                    },1000)
                }
            },

            initStatus(){
                this.timer = null
                this.animation = false
                this.startTime = -1

                this.shuffle()
            },

            check(item){
                if(this.animation || item.flip)  return  

                item.flip = !item.flip  //翻转卡片

                this.calcTime()  //检查游戏是否完成

                if(this.current === null){  //判断是否有待匹配卡片
                    this.current = item
                    return
                }
                
                if(this.current.value === item.value){  //有待匹配卡片的话，就判断两张卡片是否匹配
                    this.current = null
                }else{
                    this.animation = true
                    this.timer = setTimeout(() => {
                        item.flip = !item.flip
                        this.current.flip = !this.current.flip
                        this.current = null
                        this.animation = false
                        clearTimeout(this.timer)
                    },600)
                    
                }
            }
        },
        created(){
            this.init()
        }
    })
</script>
</html>

本项目引用的自定义外部资源

vue.js