vue实现华容道九宫格小游戏代码-html代码-BFW代码库

vue实现华容道九宫格小游戏代码

代码语言：html

所属分类：游戏

代码描述：vue实现华容道九宫格小游戏代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.global.3.2.20.js"></script>


<style>
    .box {
	border:5px solid rgb(218,195,147);
	display:flex;
	flex-wrap:wrap;
	background-color:black;
}
.item {
	width:100px;
	height:100px;
	background-color:rgb(247,170,3);
	border:1px solid rgb(189,133,12);
	color:white;
	text-align:center;
	line-height:100px;
	font-size:20px;
	cursor:pointer;
	user-select:none;
	position:relative;
	left:0;
}
.empty {
	background-color:black;
}

</style>
</head>
<body>
    <div id="app">
        <div class="box" :style="{width,height}">
            <div class="item" :class="{'empty':item == -1}" v-for="(item, index) in list" @click="onSwitch(item,index)" ref="item">
                {{item != -1?item:''}}</div>
        </div>
        <input type="text" :value="col" ref="input">阶华容道
        <button @click="setCol">设置</button>
    </div>
    <script>
        const {
       createApp
   } = Vue
   createApp({
       data() {
           return {
               list: [],
               answerList: [],
               col: 3,
               width: "",
               height: "",
           }
       },
       mounted() {
           this.reset();
       },
       methods: {
           setCol() {
               this.col = this..........完整代码请登录后点击上方下载按钮下载查看