玩法说明
玩法:两个玩家,一个玩家使用(x),一个玩家使用(O),轮流在棋盘上下棋(点击单元格)
获胜条件:横、竖、斜(对角线)三个棋子相同
平局:棋盘满子,但是,不满足任何—种获胜条件
游戏模板
首先我们把样式做出来
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Tic Tac Toe</title>
<link rel="stylesheet" href="./public/css/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>
</body>
</html>
style.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-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;
}
/* 游戏获胜信息面板 */
.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;
}
/* x 玩家 */
.cell.x::before {
content: 'X';
color: #01a8c6;
}
/* o 玩家 */
.cell.o::before {
content: 'O';
color: #8fbe01;
}
开发思路
模板(HTML、css)的说明:
1.下一步提示:给游戏面板(#bord)标签,添加 x 或 o 类名
id 为 bord 的样式默认是 x
所以当鼠标悬浮在井字格上时,显示的是 x,如果改为 o,则展示 o
2.下棋(点击单元格)∶给单元格( .cell)标签添加 x 或 o 类名
3.展示和隐藏获胜信息:设置获胜信息面板(#message)标签的样式属性 display