Auto Commit

src/App.vue

-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
+<script>
+export default {
+  data(){
+    return {
+      datas: Array(9).fill(''),
+      history: [],
+      next: true,
+      winner: '',
+      cases: [
+        [0, 1, 2],
+        [3, 4, 5],
+        [6, 7, 8],
+        [0, 3, 6],
+        [1, 4, 7],
+        [2, 5, 8],
+        [0, 4, 8],
+        [2, 4, 6],
+      ]
+    }
+	},
+	methods: {
+		//放置棋子
+		set(idx) {
+			if (!this.datas[idx] && !this.winner) {
+				this.datas[idx] = this.next_player 
+				this.history.push({
+					status: [...this.datas],
+					player: this.next
+				});
+				if (this.is_win(this.next_player)) {
+					this.winner = this.next_player;
+				}
+				this.next = !this.next;
+			}
+		},
+		//跳转到第n步
+		jump(idx) {
+			this.datas = this.history[idx].status;
+			this.history.splice(idx + 1, this.history.length - idx - 1);
+			this.next = !this.history[idx].player;
+			this.winner = this.is_win('O') 
+				? 'O' 
+				: this.is_win('X') 
+					? 'X' 
+					: '';
+		},
+		//判断是否胜出
+		is_win(player) {
+			return this.cases.some(arr => arr.every(el => this.datas[el] === player));
+		},
+		//初始化
+		init() {
+			this.datas = Array(9).fill('');
+			this.history = [];
+			this.next = true;
+			this.winner = '';
+		}
+	},
+	computed: {
+		next_player() {
+			return this.next ? 'O' : 'X';
+		},
+		hint() {
+			return this.winner ? 'winner: ' + this.winner : '下一位: ' + this.next_player;
+		}
+	}
+}
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
+<div id="main">
+	<ul id="board" class="white normal">
+		<li class="square" v-for="i, idx in datas" @click=set(idx)>{{i}}</li>
+	</ul>
+	<div id="console">
+		<div id="hint" class="white">{{hint}}</div>
+		<button @click="init()">重新开始</button>
+		<!-- <ul id="history" class="normal">
+			<li class="history" v-for="i, idx in history">
+				<input type="button" class="white" :value="'go to step' + (idx + 1)" @click=jump(idx) />
+			</li>
+		</ul> -->
+	</div>
+</div>
 </template>
 
-<style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
+<style type="text/css">
+	body {
+		background: #5af;
+	}
+	
+	.white {
+		background: #fff;
+		border-radius: 11px;
+		outline: none;
+		border: none;
+	}
+	
+	.normal {
+		list-style: none;
+		padding: 0px;
+		margin: 0px;
+	}
+	
+	#app {
+		display: flex;
+		justify-content: space-between;
+		width: 450px;
+		height: 306px;
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		margin: auto;
+	}
+	
+	#board {
+		display: flex;
+		width: 306px;
+		height: 306px;
+		flex-wrap: wrap;
+		overflow: hidden;
+	}
+	
+	#hint {
+		width: 100px;
+		height: 22px;
+		text-align: center;
+		margin: 10px;
+	}
+	
+	#restart {
+		width: 70px;
+		height: 22px;
+		margin: 10px;
+	}
+	
+	#history，
+	.history {
+		margin: 5px;
+	}
+	
+	.square {
+		height: 100px;
+		width: 100px;
+		border: #ebebeb solid 1px;
+		flex: 0 0 auto;
+		font-size: 50px;
+		font-weight: 900;
+		line-height: 100px;
+		text-align: center;
+	}
 </style>
+