TypeScript实现井字棋小游戏

HTML部分:

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Tic Tac Toe</title>
    <link rel="stylesheet" href="style.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="./index.js"></script>
</body>

</html>

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;
}

ts代码:


enum Player { // 利用枚举来判断值
    X = 'x',
    O = 'o'
}
// 判赢数组
let winArr = [
    [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.getElementById('bord')!; // 游戏面板 !是not null 的断言操作符
// 获胜信息面板
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;

// 初始化游戏数据， 开始游戏
startGame()

// 重新开始游戏
restart.addEventListener('click',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((item) => {
        let cell  = item as HTMLDivElement;
        // 清空棋盘
        cell.classList.remove(Player.X, Player.O);
        // 移除单元格点击事件、重新给单元格绑定点击事件
        cell.removeEventListener('click', clickCell);
        cell.addEventListener('click', clickCell, { once: true })
    })
}

// 棋盘中单元格的click事件处理程序
function clickCell(event: MouseEvent) { // 给当前被点击的单元格添加类名 x
    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;
    }

    // 判断平局
    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); // 根据 currentPlayer 添加 下一步样式
}

// 封装判赢函数
function checkWin(palyer: Player) {
    let isWin = winArr.some((item) => {
        let cellIndex1 = item[0];
        let cellIndex2 = item[1];
        let cellIndex3 = item[2];

        // 判断横、竖、斜是否包含同一类名
        if (
            hasClass(cells[cellIndex1], palyer) &&
            hasClass(cells[cellIndex2], palyer) &&
            hasClass(cells[cellIndex3], palyer) 
            ) {
            return true;
        }
        return false;
    });

    return isWin;
}

// 封装 hasClass 函数 判断 DOM 元素是否包含某个类名;
function hasClass(el: Element, name: string) {
    return el.classList.contains(name);
}
编译后的js:

var Player;
(function (Player) {
    Player["X"] = "x";
    Player["O"] = "o";
})(Player || (Player = {}));
// 判赢数组
var winArr = [
    [0, 1, 2], [3, 4, 5], [6, 7, 8],
    [0, 3, 6], [1, 4, 7], [2, 5, 8],
    [0, 4, 8], [2, 4, 6] // 斜
];
var cells = document.querySelectorAll('.cell'); // 获取所有的单元格列表
var gameBord = document.getElementById('bord'); // 游戏面板 !是not null 的断言操作符
// 获胜信息面板
var message = document.querySelector('#message');
// 获胜者
var winner = document.querySelector('#winner');
// 重新开始按钮
var restart = document.querySelector('#restart');
//当前玩家
var currentPlayer;
// 记录已下棋的次数
var steps;
// 初始化游戏数据， 开始游戏
startGame();
// 重新开始游戏
restart.addEventListener('click', 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) {
        var cell = item;
        // 清空棋盘
        cell.classList.remove(Player.X, Player.O);
        // 移除单元格点击事件、重新给单元格绑定点击事件
        cell.removeEventListener('click', clickCell);
        cell.addEventListener('click', clickCell, { once: true });
    });
}
// 棋盘中单元格的click事件处理程序
function clickCell(event) {
    var target = event.target;
    target.classList.add(currentPlayer); // 每下的一步棋
    steps++;
    // 调用函数判断是否获胜
    var isWin = checkWin(currentPlayer);
    if (isWin) {
        message.style.display = 'block';
        winner.innerText = currentPlayer + " \u8D62\u4E86";
        return;
    }
    // 判断平局
    if (steps === 9) {
        message.style.display = 'block';
        winner.innerText = "\u5E73\u5C40";
        return;
    }
    currentPlayer = currentPlayer === Player.X ? Player.O : Player.X; // 判断下一步提示
    gameBord.classList.remove(Player.X, Player.O); // 移除下一步提示样式
    gameBord.classList.add(currentPlayer); // 根据 currentPlayer 添加 下一步样式
}
// 封装判赢函数
function checkWin(palyer) {
    var isWin = winArr.some(function (item) {
        var cellIndex1 = item[0];
        var cellIndex2 = item[1];
        var cellIndex3 = item[2];
        // 判断横、竖、斜是否包含同一类名
        if (hasClass(cells[cellIndex1], palyer) &&
            hasClass(cells[cellIndex2], palyer) &&
            hasClass(cells[cellIndex3], palyer)) {
            return true;
        }
        return false;
    });
    return isWin;
}
// 封装 hasClass 函数 判断 DOM 元素是否包含某个类名;
function hasClass(el, name) {
    return el.classList.contains(name);
}

发表于 2020-10-31 11:10 Brother洋阅读(443) 评论(0) 收藏举报

刷新页面返回顶部

TypeScript实现井字棋小游戏

公告