vue井字小游戏

vue井字小游戏

井字游戏样式

vue-cli脚手架引入jQuery Less
npm i jquery -S
npm il -D less-loader less
import $ from ‘jquery’

template部分

<template>
    <div class="jing">
        <div class="gamas" v-show="showGame">
            <br />
            <div class="top">
                <div :class="isFalse ? active : ''">X</div>
                <div :class="isFalse ? '' : active">O</div>
            </div>
            <div class="bottom">
                <div class="row">
                    <div @click="add(1)" value="1"></div>
                    <div @click="add(2)" value="2"></div>
                    <div @click="add(3)" value="3"></div>
                </div>
                <div class="row">
                    <div @click="add(4)" value="4"></div>
                    <div @click="add(5)" value="5"></div>
                    <div @click="add(6)" value="6"></div>
                </div>
                <div class="row">
                    <div @click="add(7)" value="7"></div>
                    <div @click="add(8)" value="8"></div>
                    <div @click="add(9)" value="9"></div>
                </div>
            </div>
        </div>

        <div class="winX" v-show="showX">
            <p>玩家 X 胜利</p>
        </div>

        <div class="winY" v-show="showY">
            <p>玩家 Y 胜利</p>
        </div>
        <div class="pingju" v-show="true"><p>平局</p></div>
    </div>
</template>

css部分

<style lang="less">
body,
html {
    background: rgb(12, 158, 243);
}

.jing {
    width: 800px;
    height: 650px;
    border-radius: 10px;
    margin: auto;
    margin-top: 50px;
}
.top {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(225, 225, 225, 0.8);
    border-radius: 10px;
    width: 300px;
    margin: 10px auto;

    div {
        margin: 5px 10px;
        padding: 10px 50px;
        font-size: 30px;
        font-weight: bold;
        transition: all 0.5s;
    }
    .actives {
        background: orange;
        color: #fff;
        border-radius: 5px;
    }
}
.bottom {
    .row {
        display: flex;
        justify-content: center;
        align-items: center;
        div {
            width: 180px;
            height: 180px;
            box-shadow: 0 0 10px #ccc;
            background: rgba(225, 225, 225, 0.7);
            font-size: 140px;
            display: flex;
            border-radius: 10px;
            justify-content: center;
            align-items: center;
            color: rgb(12, 158, 243);
            margin: 5px;
        }
    }
}
.winX,
.winY,
.pingju {
    font-size: 33px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-shadow: 0 0 10px #fff;
    p {
        border: 1px solid rgba(225, 225, 225, 0.3);
        padding: 15px 30px;
        border-radius: 10px;
    }
}
</style>

script部分

<script>
export default {
    data() {
        return {
            active: 'actives',
            isFalse: true,
            showGame: true,
            showX: false,
            showY: false,
            pingju: false,
            arrX: [],
            arrY: [],
            emags: '',
        }
    },
    computed: {},
    methods: {
        add(val) {
            //改变isFalse
            this.isFalse = !this.isFalse
            if (this.isFalse == false) {
                $('#app .row div')
                    .eq(val - 1)
                    .html('X') //显示X
                this.arrX.push(val)
                // 判断条件
                if (
                    (this.arrX.includes(1) &&
                        this.arrX.includes(2) &&
                        this.arrX.includes(3)) ||
                    (this.arrX.includes(4) &&
                        this.arrX.includes(5) &&
                        this.arrX.includes(6)) ||
                    (this.arrX.includes(7) &&
                        this.arrX.includes(8) &&
                        this.arrX.includes(9)) ||
                    (this.arrX.includes(1) &&
                        this.arrX.includes(4) &&
                        this.arrX.includes(7)) ||
                    (this.arrX.includes(2) &&
                        this.arrX.includes(5) &&
                        this.arrX.includes(8)) ||
                    (this.arrX.includes(3) &&
                        this.arrX.includes(6) &&
                        this.arrX.includes(9)) ||
                    (this.arrX.includes(1) &&
                        this.arrX.includes(5) &&
                        this.arrX.includes(9)) ||
                    (this.arrX.includes(3) &&
                        this.arrX.includes(5) &&
                        this.arrX.includes(7))
                ) {
                    //显示隐藏
                    setTimeout(() => {
                        this.showGame = false
                        this.showX = true
                    }, 500)
                    // alert('Xwin')
                    //胜利禁止点击
                    $('#app .row div').css({
                        pointerEvents: 'none',
                    })
                }
            } else {
                $('#app .row div')
                    .eq(val - 1)
                    .html('O')
                this.arrY.push(val)

                if (
                    (this.arrY.includes(1) &&
                        this.arrY.includes(2) &&
                        this.arrY.includes(3)) ||
                    (this.arrY.includes(4) &&
                        this.arrY.includes(5) &&
                        this.arrY.includes(6)) ||
                    (this.arrY.includes(7) &&
                        this.arrY.includes(8) &&
                        this.arrY.includes(9)) ||
                    (this.arrY.includes(1) &&
                        this.arrY.includes(4) &&
                        this.arrY.includes(7)) ||
                    (this.arrY.includes(2) &&
                        this.arrY.includes(5) &&
                        this.arrY.includes(8)) ||
                    (this.arrY.includes(3) &&
                        this.arrY.includes(6) &&
                        this.arrY.includes(9)) ||
                    (this.arrY.includes(1) &&
                        this.arrY.includes(5) &&
                        this.arrY.includes(9)) ||
                    (this.arrY.includes(3) &&
                        this.arrY.includes(5) &&
                        this.arrY.includes(7))
                ) {
                    //胜利禁止点击
                    $('#app .row div').css({
                        pointerEvents: 'none',
                    })
                    setTimeout(() => {
                        this.showGame = false
                        this.showY = true
                    }, 500)
                }
            }
            $('#app .row div')[val - 1].style.pointerEvents = 'none'
            if (this.arrX.length + this.arrY.length >= 9) {
                setTimeout(() => {
                    this.showGame = false
                    this.pingju = true
                }, 500)
            }
        },
    },
}
</script>