闲来练习练习js，写了个扫雷游戏，直接拿去复制粘到自己本地某个html文件里就能运行，记得把vue加载地址改成线上的~~
有空了可以再加上计分板
运行起来长下面这样
直接上代码
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>扫雷v1.0</title>
7 <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
8 <script src="vue.global-v3.5.12.js"></script>
9 <style>
10 *{ margin:0; padding:0; font-size:14px; color:#333;}
11 body{ padding: 20px; }
12 .container{
13 background-color: #efefef;
14 padding: 10px;
15 display: flex;
16 }
17 .warper{
18 padding:1px;
19 background-color: #cfcfcf;
20 }
21 .row{
22 display: flex;
23 flex-direction: row;
24 }
25 .cell{
26 width: 30px;
27 text-align: center;
28 height: 30px;
29 line-height: 30px;
30 background-color: #dfdfdf;
31 border: 2px solid #cfcfcf;
32 }
33 .cell:hover{
34 border-color:rgb(250, 179, 112);
35 background-color: rgb(231, 202, 164);
36 cursor: pointer;
37 }
38 .board{
39 width: 170px;
40 margin-right: 20px;
41 }
42 .config-item{
43 padding:10px;
44 }
45 .config-item .btn{
46 margin-right: 20px;
47 }
48 .cell.clicked-0{ background-color: #f7f7f7; }
49 .cell.clicked-1{ background-color: #fff0f0; }
50 .cell.clicked-2{ background-color: #ffdbdb; }
51 .cell.clicked-3{ background-color: #ffc3c3; }
52 .cell.clicked-4{ background-color: #ffa3a3; }
53 .cell.clicked-5{ background-color: #ff9898; color: white; }
54 .cell.clicked-6{ background-color: #ff6f6f; color: white; }
55 .cell.clicked-7{ background-color: #ff5a5a; color: white; }
56 .cell.clicked-8{ background-color: #ff2424; color: white; }
57 .cell.boom{ background-color: #ffffff; color: rgb(255, 0, 0); font-size:22px;}
58 .cell.flag{ border-color: #fdafaf; }
59 </style>
60 </head>
61 <body>
62 <div class="container" id="app">
63 <div class="board">
64 <div class="config-item">
65 <h3>请点击START开始游戏</h3>
66 <h3>点击RESET重置游戏</h3>
67 </div>
68 <div class="config-item">
69 <form>
70 <label for="rowsindex">难度</label>
71 <select v-model="currentLevel" @change="handleLevelChange">
72 <option v-for="(level, index) in levels" :key="index" :value="level">{{ level.name }}</option>
73 </select>
74 </form>
75 </div>
76 <div class="config-item">
77 用时 <strong>{{ costTime }}</strong>
78 </div>
79 <div class="config-item">
80 <button class="btn" @click="resetGame">RESET</button>
81 <button class="btn" :disabled="gameStatus == 'start'" @click="startGame">START</button>
82 </div>
83 </div>
84 <div class="warper">
85 <div class="row" v-for="(row, indexRow) in cells" :key="indexRow">
86 <div
87 v-for="(column, indexColumn) in cells[indexRow]"
88 :key="indexColumn"
89 :class="'cell '+column.style"
90 @click="handleCellClick(indexRow, indexColumn)"
91 @click.right.prevent="handleCellFlag(indexRow, indexColumn)"
92 >
93 {{ column.text }}
94 </div>
95 </div>
96 </div>
97 </div>
98
99 <script>
100 const { createApp, ref, computed, nextTick } = Vue
101 createApp({
102 setup() {
103 const boomValue = 332962963;
104 const levels = ref([
105 { name: '黑铁', rowsindex: 8, columnsindex: 8, boomCount: 6 },
106 { name: '青铜', rowsindex: 10, columnsindex: 10, boomCount: 11 },
107 { name: '白银', rowsindex: 14, columnsindex: 14, boomCount: 20 },
108 { name: '黄金', rowsindex: 16, columnsindex: 16, boomCount: 28 },
109 { name: '白金', rowsindex: 20, columnsindex: 20, boomCount: 44 },
110 { name: '钻石', rowsindex: 24, columnsindex: 24, boomCount: 60 },
111 { name: '大师', rowsindex: 30, columnsindex: 30, boomCount: 95 },
112 { name: '王者', rowsindex: 36, columnsindex: 36, boomCount: 120 }
113 ]);
114 const currentLevel = ref(levels.value[0]);
115
116 let rowsindex = currentLevel.value.rowsindex;
117 let columnsindex = currentLevel.value.columnsindex;
118 let boomCount = currentLevel.value.boomCount;
119
120 const start = 0;
121 let end = computed(()=>{
122 return rowsindex*columnsindex-1;
123 })
124 const gameStatus = ref("stop");
125 const costTime = ref("00:00:00");
126 let timer;
127 let startTime = 0;
128
129 const cells = ref([]);
130 let randoms = [];
131 let rightsZero = [];
132
133 const startGame = () => {
134 gameStatus.value = "start";
135 startTimer();
136 initGame();
137 }
138
139 const resetGame = () => {
140 gameStatus.value = "stop";
141 stopTimer();
142 resetTimer();
143 initGame();
144 }
145
146 const handleLevelChange = () => {
147 console.log(currentLevel.value)
148 resetGame();
149 }
150
151 const handleCellClick = (i, j) => {
152 if(gameStatus.value!=='start'){
153 return;
154 }
155
156 if(cells.value[i][j].value != boomValue){
157 rightsZero = [];
158 clickRights(i, j);
159 for(let i=0; i<rightsZero.length; i++){
160 let [rowIndex, columnIndex] = getRowIndexColumnIndex(rightsZero[i]);
161 cells.value[rowIndex][columnIndex] = getCellClickedInfo(rowIndex, columnIndex);
162 }
163 ifWin();
164 }else{
165 cells.value[i][j] = {style:'boom', clicked: true, text: '⭕️', value: boomValue};
166 finishGame();
167 }
168 }
169
170 const handleCellFlag = (i, j) => {
171 if(gameStatus.value!=='start'){
172 return;
173 }
174
175 let cell = cells.value[i][j];
176 if(cell.clicked){
177 return;
178 }
179 if(cell.style === 'flag'){
180 cells.value[i][j] = {style:'unClicked', clicked: false, text: '', value: cell.value};
181 }else{
182 cells.value[i][j] = {style:'flag', clicked: false, text: '
标签：const,color,cells,vue3,value,cell,let,支持,计时
From： https://www.cnblogs.com/leesen/p/18544170