vue井字棋小游戏

井字棋

使用vue

本站预览链接

GitHub单网页预览链接

待补充

tips

网页制作之初是单独作为一个网页设计，现在挂靠在博客的右边栏

胜利后的布局出现稍微错乱

一个旋转的太极

本站预览链接

使用html css

利用html和css制作的一个简单的太极单页面

  • 不清楚是否也会同本页面发生冲突

vue打包发布

vue打包成html

yarn build or npm run build

vue打包dist目录下index.html打开空白

根目录下新建vue.config.js，填入以下代码

vue cli3.0后此文件隐藏，不在根目录下，可以自己手动新建文件覆盖相应配置

1
2
3
4
5
6
7
8
module.exports = {
    lintOnSave: true,

    publicPath: './',
    outputDir: 'dist',
    assetsDir: 'static'
}

井字棋demo源码

app.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<template>
  <div id="app">
    <div id="res" v-if="win">游戏结束，获胜者是：{{ winner }}</div>
    <div class="row">
      <cell @click="onclickCell(0, $event)" :n="n" />
      <cell @click="onclickCell(1, $event)" :n="n" />
      <cell @click="onclickCell(2, $event)" :n="n" />
    </div>
    <div class="row">
      <cell @click="onclickCell(3, $event)" :n="n" />
      <cell @click="onclickCell(4, $event)" :n="n" />
      <cell @click="onclickCell(5, $event)" :n="n" />
    </div>
    <div class="row">
      <cell @click="onclickCell(6, $event)" :n="n" />
      <cell @click="onclickCell(7, $event)" :n="n" />
      <cell @click="onclickCell(8, $event)" :n="n" />
    </div>
  </div>
</template>

<script>
import cell from "./cell";
export default {
  data() {
    return {
      cells: [
        [1, 1, 1],
        [1, 1, 1],
        [1, 1, 1],
      ],
      /*  
      写成如下没带逗号出现bug，影响到n的赋值，但是如下代码null批量替换成1后代码也可以运行
      cells: [[null, null, null] 
      [(null, null, null)]

      [(null, null, null)]], */
      n: 0,
      win: false,
      winner: null,
    };
  },
  components: { cell },
  methods: {
    onclickCell(i, text) {
      console.log(`${i}号被点击，内容是${text}`); //插入变量是用反单引号括起来
      this.cells[Math.floor(i / 3)][i % 3] = text;
      this.n = this.n + 1;
      this.tell();
      if (this.win === true) {
        //此处误写掉括号，一直判定成true
        this.winner = text;
        console.log(`获胜者是${text}`);
      } else {
        console.log("胜负未定");
      }
    },
    tell() {
      const cells = this.cells;
      for (let i = 0; i < 2; i++) {
        if (
          cells[i][0] === cells[i][1] &&
          cells[i][0] === cells[i][2] &&
          cells[i][0] !== 1
        ) {
          this.win = true;
        }
      }
      for (let j = 0; j < 2; j++) {
        if (
          cells[0][j] === cells[1][j] &&
          cells[0][j] === cells[2][j] &&
          cells[0][j] !== 1
        ) {
          this.win = true;
        }
      }
      if (
        cells[0][0] !== 1 &&
        cells[2][2] == cells[0][0] &&
        cells[1][1] === cells[2][2]
      ) {
        this.win = true;
      }
      if (
        cells[0][2] !== 1 &&
        cells[1][1] == cells[2][0] &&
        cells[0][2] === cells[1][1]
      ) {
        this.win = true;
      }
    },
  },
};
</script>

<style>
.row {
  display: flex;
  justify-content: center;
  align-items: center;
}
#res {
  border: 1px solid red;
  background: lightblue;
  position: absolute;
  height: 374px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

cell.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<template>
  <div id="cell" v-on:click="onclickself">
    <template v-if="a">{{ text }}</template>
    <template v-else></template>
  </div>
</template>

<script>
//node中向外暴露成员：moudule.exports={}和exports，导入模块：var 名称=require('标识符')
//ES6中导入：import xxx form xx，导出：export default和export 向外暴露
//两种不能混用
//export导出，导入时要加{}:按需导出，export 可以向外导出多个成员，import时如果不需要，可以不在{}中定义
//export导出的成员，导入时必须严格按照名称{}按需接受 想换名字可以使用as 起别名
// export default 导出的成员，可以使用任意变量接收，导入时不需要加{} 一个文件中，export可以有多个，export default只可以有一个
export default {
  //父组件使用v-bind或简化指令传递数据给子组件
  //子组件通过props接收，只能读不能更改
  props: ["n"],
  data() {
    //:() => {
    //function(){}
    //return (x = 1);
    return { a: false, text: "o" };
  },
  methods: {
    onclickself() {
      if (this.a === true) {
        return;
      } else {
        this.a = true;
        this.text = this.n % 2 === 0 ? "x" : "o";
        //父组件通过v-on把其方法引用传递给子组件，子组件通过$emit,调用父组件方法，并把数据传给父组件使用
        this.$emit("click", this.text);
      }
    },
  },
};
</script>

<style>
#cell {
  border: 1px solid black;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 80px;
}
</style>

main.js

1
2
3
4
5
6
7
8
9
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <title>doucument</title>
  <style>
    @keyframes x {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }

    }

    * {
      /*background: #eee;*/
      box-sizing: border-box;

      padding: 0;
      margin: 0;
    }

    body {
      background: #eee;
    }

    #八卦 {
      /*border:1px solid red;*/
      width: 400px;
      height: 400px;
      border-radius: 200px;
      position: relative;
      overflow: hidden;
      animation: x 1s infinite linear;
      box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.75);
    }

    #八卦>div:nth-child(2) {
      /*border:10px solid green;*/
      width: 50%;
      height: 100%;
      position: absolute;
      right: 0;
      background: white;

    }

    #八卦>div:first-child {
      /*border:10px solid yellow;*/
      width: 50%;
      position: absolute;
      height: 100%;
      left: 0;
      background: black;
    }

    #八卦>div:nth-child(3) {
      /*border:10px solid green;*/
      width: 50%;
      height: 50%;
      border-radius: 200px;
      position: absolute;
      /*right: 0;此处多写了一个右边，但是好像没影响*/
      left: 50%;
      background: black;
      margin-left: -100px;

    }

    #八卦>div:nth-child(4) {
      /*border:10px solid green;*/
      width: 50%;
      height: 50%;
      border-radius: 200px;
      position: absolute;
      right: 50%;
      background: white;
      margin-right: -100px;
      bottom: 0;

    }

    #八卦>div:nth-child(5) {
      /*上小白圆*/
      /*border:10px solid green;*/
      width: 12.5%;
      height: 12.5%;
      border-radius: 200px;
      position: absolute;
      left: 50%;
      background: white;
      margin-left: -6.25%;
      margin-top: 6.25%;
      top: 12.5%;

    }

    #八卦>div:nth-child(6) {
      /*下小白圆*/
      /*border:10px solid green;*/
      width: 12.5%;
      height: 12.5%;
      border-radius: 200px;
      position: absolute;
      left: 50%;
      background: black;
      margin-left: -6.25%;
      margin-bottom: 6.25%;
      bottom: 12.5%;
    }

    #八卦-wrapper {
      border: solid 1px red;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      height: 100vh;
    }

    #txt {
      margin-top: 1em;
    }
  </style>
</head>

<body>
  <div id="八卦-wrapper">
    <div id="八卦">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div></div>
      <div></div>

    </div>
    <div id="txt">道可道，非常道</div>
  </div>
</body>

</html>
前端
#demo #vue
vue井字棋小游戏
https://darksheep404.github.io/2020/11/26/vue井字棋小游戏demo/
作者
darksheep
发布于
2020年11月26日
许可协议