普歌-TypeScript小游戏_typescript游戏案例

作者：木道寻08 | 2024-08-19 13:58:04

踩

typescript游戏案例

~喜欢的小伙伴点个赞呗 ♥~

话不多说，直接上代码和效果图

一定要把ts文件转成js文件引入，切记！！！

html部分

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic Tac Toe</title>
    <link rel="stylesheet" href="chess.css" />
</head>

<body>
    <h1>Tic Tac Toe</h1>

    <div class="container">
        <!-- 游戏面板（棋盘） -->
        <div id="bord" class="game-board x">
            <div class="row">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="row">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
            <div class="row">
                <div class="cell"></div>
                <div class="cell"></div>
                <div class="cell"></div>
            </div>
        </div>

        <!-- 游戏获胜信息面板 -->
        <div id="message" class="game-message">
            <p id="winner">X 赢了！</p>
            <button id="restart">重新开始</button>
        </div>
    </div>
    <script src="./chess.js"></script>
</body>

</html>
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

css部分

p {
    margin: 0;
}

body {
    background-color: #f9f2e7;
}


/* 标题 */

h1 {
    text-align: center;
    font-size: 60px;
    color: #477998;
}


/* 游戏内容容器 */

.container {
    position: relative;
    width: 471px;
    height: 471px;
    margin: 0 auto;
}


/* 游戏获胜信息面板 */

.game-message {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(69, 133, 136, 0.4);
    text-align: center;
}


/* winner 获胜者 */

.game-message p {
    margin: 180px 0 40px 0;
    color: #fff;
    font-size: 50px;
}


/* 重新开始游戏按钮 */

.game-message button {
    color: #517304;
    border-color: #517304;
    width: 110px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
}


/* 游戏面板棋盘 */

.game-board {
    width: 471px;
    height: 471px;
}

.game-board.x .cell:not(.x):not(.o):hover::before {
    content: 'X';
    color: lightgray;
}

.game-board.o .cell:not(.x):not(.o):hover::before {
    content: 'O';
    color: lightgray;
}


/* 棋盘 - 行 */

.row {
    display: flex;
}

.row:last-child .cell {
    border-bottom: 0;
}


/* 棋盘 - 单元格 */

.cell {
    flex: 1;
    box-sizing: border-box;
    width: 157px;
    height: 157px;
    line-height: 157px;
    border-right: 6px solid #546363;
    border-bottom: 6px solid #546363;
    text-align: center;
    cursor: pointer;
    font-size: 88px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;
}

.cell:last-child {
    border-right: 0;
}


/* x 玩家 */

.cell.x::before {
    content: 'X';
    color: #01a8c6;
}


/* o 玩家 */

.cell.o::before {
    content: 'O';
    color: #8fbe01;
}
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

ts部分

// 玩家枚举
enum Player {
  X = 'x',
  O = 'o',
}

// 判赢数组
let winsArr = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8], // 横
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8], // 竖
  [0, 4, 8],
  [2, 4, 6], // 斜
]
// 单元格列表
let cells = document.querySelectorAll('.cell')
// 游戏面板
let gameBord = document.querySelector('#bord')
// 获胜信息面板
let message = document.querySelector('#message') as HTMLDivElement
// 获胜者
let winner = document.querySelector('#winner') as HTMLParagraphElement
// 重新开始按钮
let restart = document.querySelector('#restart') as HTMLButtonElement
// 当前玩家
let currentPlayer: Player
// 记录已下棋的次数
let steps: number

restart.addEventListener('click', startGame)

// 调用该函数来初始化游戏数据，开始游戏
startGame()

function startGame() {
  // 隐藏获胜信息
  message.style.display = 'none'
  // 重置下棋次数
  steps = 0
  // 重置默认玩家为 x
  currentPlayer = Player.X
  // 重置下棋提示为 x
  gameBord.classList.remove(Player.X, Player.O)
  gameBord.classList.add(Player.X)

  cells.forEach(function (item) {
    let cell = item as HTMLDivElement
    // 清空棋盘
    cell.classList.remove(Player.X, Player.O)
    // 移除单元格点击事件
    cell.removeEventListener('click', clickCell)
    // 重新给单元格绑定点击事件
    cell.addEventListener('click', clickCell, { once: true })
  })
}

// 给单元格绑定点击事件
// cells.forEach(function (item) {
//   let cell = item as HTMLDivElement
//   cell.addEventListener('click', clickCell, { once: true })
// })

// 单元格click 事件处理程序
function clickCell(event: MouseEvent) {
  let target = event.target as HTMLDivElement
  target.classList.add(currentPlayer)
  // 记录下棋次数
  steps++

  // 调用判赢函数判断是否获胜
  let isWin = checkWin(currentPlayer)
  if (isWin) {
    message.style.display = 'block'
    winner.innerText = currentPlayer + ' 赢了！'
    // 因为游戏已经结束，所以，此处直接 return
    // 来刻意阻止后续代码执行
    return
  }

  // 判断平局
  if (steps === 9) {
    message.style.display = 'block'
    winner.innerText = '平局~'
    return
  }

  // 根据当前玩家，得到另外一个玩家
  currentPlayer = currentPlayer === Player.X ? Player.O : Player.X
  // 处理下一步提示
  gameBord.classList.remove(Player.X, Player.O)
  gameBord.classList.add(currentPlayer)
}

// 封装判赢函数
function checkWin(player: Player) {
  // 1.使用 some 方法遍历数组，并使用 some 方法的返回值作为判赢函数的返回结果
  return winsArr.some(function (item) {
    // 2 获取到每种获胜情况对应的 3 个单元格元素  先拿到每种获胜情况的三个索引
    let cellIndex1 = item[0]
    let cellIndex2 = item[1]
    let cellIndex3 = item[2]

    // 3 判断这 3 个单元格元素是否同时包含当前玩家的类名
    if (
      // 同时包含（第一个包含 并且 第二个包含 并且 第三个也包含）
      hasClass(cells[cellIndex1], player) &&
      hasClass(cells[cellIndex2], player) &&
      hasClass(cells[cellIndex3], player)
    ) {
      // 4 如果包含（玩家获胜），就在回调函数中返回 true 停止循环；
      return true
    }
    // 否则，返回 false，继续下一次循环
    return false
  })
}

// 封装 hasClass 函数:判断 DOM 元素是否包含某个类名
function hasClass(el: Element, name: string) {
  // 判断元素是否包含类名 classList.contains() 返回布尔值
  return el.classList.contains(name)
}
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

效果图

这是整体的思路，有兴趣的小伙伴可以参考下~

 单元格点击：
1 获取到所有的单元格列表
2 遍历单元格列表，给每一个单元格添加点击事件
3 给当前被点击的单元格添加类名 x

切换玩家：

1 创建一个存储当前玩家的变量（currentPlayer），默认值为：x
2 将添加给单元格时 写死的类名 x ，替换为变量（currentPlayer）的值
3 切换到另一个玩家：在添加类名（下棋完成一步）后，根据当前玩家，得到另外一个玩家

处理下一步提示：

移除游戏面板中的 x 和 o 类名，添加下一个玩家对应的类名

使用枚举修改当前玩家：

1 创建字符串枚举（Player），提供 X 和 O 两个成员
2 将成员 X 的值设置为：'x'（类名）；将成员 O 的值设置为：'o'（类名）
3 将变量（currentPlayer）的类型设置为 Player 枚举类型，默认值为 Player.X
4 将所有用到 x 和 o 的地方全部使用枚举成员代替

 封装判赢函数：

1 声明函数（checkWin），指定参数（player），类型注解为：Player 枚举
2 指定返回值：现在函数中写死返回 true 或 false
3 在给单元格添加类名后（下棋后），调用函数 checkWin，拿到函数返回值
4 判断函数返回值是否为 true，如果是，说明当前玩家获胜了

判断平局：

1 创建变量（steps），默认值为 0。
2 在玩家下棋后，让 steps 加 1。
3 在判赢的代码后面，判断 steps 是否等于 9。
4 如果等于 9 说明是平局，游戏结束，
就直接 return，不再执行后续代码。

 展示获胜信息：

1 获取到与获胜信息相关的两个 DOM 元素：1 #message 2 #winner。
2 显示获胜信息面板（通过 style 属性实现）。
3 展示获胜信息：
如果获胜，展示“x 赢了！”或“o 赢了！”；
如果是平局，展示“平局”。

重新游戏：

1 获取到重新开始按钮（#restart），并绑定点击事件。
2 在点击事件中，重置游戏数据。
3 隐藏获胜信息、清空棋盘、移除单元格点击事件、重新给单元格绑定点击事件。
4 重置下棋次数、重置默认玩家为 x、重置下棋提示为 x。

优化重新游戏功能：

1 将重新开始按钮的事件处理程序修改为：函数声明形式（startGame）。
2 直接调用函数（startGame），来开始游戏。
3 移除变量 steps、currentPlayer 的默认值，并添加明确的类型注解。
4 移除给单元格绑定事件的代码。
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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/木道寻08/article/detail/1002581