网页下棋小游戏不完整的
ts
enum Player{
x = 'x',
o = 'o'
}
//单元格列表
let cells = document.querySelectorAll('.cell')
//游戏面板
let bord = document.querySelector('#bord')
//当前玩家
let currentPlayer = Player.x//默认为x操作时事件切换
let flag = true
//给每个单元格绑定单击事件，并且只能单击一次不能悔棋
cells.forEach(function(item,index){
let cell = item as HTMLDivElement
cell.setAttribute("cell-index",index+1+'')
console.dir(cell)
cell.addEventListener('click',clickCell,{
once:true
})
})
//单继单元格事件处理
function clickCell(event:MouseEvent){
console.log(currentPlayer+">>it is click")
//当前单元格添加旗子 X或 O
let target = event.target as HTMLDivElement
target.classList.add(currentPlayer)
//判断有没有满足赢或平局条件,方法中改变message显示的内容，改变flag 为false
judge(currentPlayer,+target.getAttribute("cell-index"));//将当前玩家x 或 o ，当前div的数字标识传入方法判断
if(flag){
//改变当前玩家值
if(currentPlayer===Player.x){
currentPlayer = Player.o
}else{
currentPlayer = Player.x
}
}else{
//显示影藏的message div 不执行后面逻辑
}
}
//鼠标移入移出事件
function moveCell(event:MouseEvent){
//鼠标移入判断当前单元格有没有.x .o属性是不是已经有棋子，有不发生变化
//没有棋子 将当前玩家符好放入 颜色变为灰色
//鼠标移出去掉显示灰色
}
//重新开始按钮
function rester(){
//恢复游戏结束标签
flag = !flag;
//回复单元格默认空白
//影藏message div
}
//获取行数rows 和 列数 cells
let rowNum = document.querySelectorAll(".row").length;
let cellNums = document.querySelectorAll(".row .cell").length
let cellNum = cellNums/rowNum
let xNum = document.querySelectorAll(".row .x").length
let yNum = document.querySelectorAll(".row .y").length
let winNum = 3
console.log("棋盘行数："+rowNum+",棋盘列数："+cellNum)
console.log("x数："+xNum+",y数："+yNum)
function judge(playStr:string,cellIndex:number){
//判断平局所有div下满棋子
xNum = document.querySelectorAll(".row .x").length
yNum = document.querySelectorAll(".row .y").length
if((xNum+yNum)===cellNums){
//更改p信息内容
flag =false
return
}
let cellplays = document.querySelectorAll(".cell ."+playStr)
let playIndex = cellIndex/winNum;
//判断当前标识位置，分情况判断赢
//除以列数得到在哪一行
//同一行判断 横向判断 加减数为1先减法循环比较符号是不是当前点击的符号，判断符合是否到边缘，到边缘开始加法循环比较，没到边缘的不符合当前棋子则开始加法循环，循环次数为赢的连棋子数，有一个不符合则返回，循环完全部符合则赢
//同一列判断 竖向判断 加减数为列数，同上两次循环 判断上下边缘需要
//至上而下右斜 加减数为 列数+1
//至上而下左斜 加减数为 列数+1 判断上下左右四个边缘 依然是先减循环找到当前类型棋子的头 加循环判断是否连续三个 五个 赢的个数
cellplays.forEach(function(item,index){
let cell = item as HTMLDivElement
let cellIndex =cell.getAttribute("cell-index")
console.dir(cell)
cell.addEventListener('click',clickCell,{
once:true
})
})
}
css 不齐全
.container{
width: auto;
height: auto;
}
#bord {
background-color: burlywood;
width: 306px;
height: 306px;
border-left: solid 2px black;
border-bottom: solid 2px black;
position: absolute;
z-index: 1;
}
.row {
position: relative;
}
.cell {
float: left;
width: 100px;
height: 100px;
border-right: solid 2px black;
border-top: solid 2px black;
font-size: larger;
}
.cell .x::before {
content: 'x';
color: aqua;
font-size: larger;
}
.cell .o::before {
content: 'o';
color: red;
font-size: larger;
}
#message{
float: left;
width: 306px;
height: 306px;
display: none;
}
p{
font-size: larger;
}
html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下棋游戏</title>
<link rel="stylesheet" href="./tic-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">restart</button>
</div>
</div>
</body>
><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下棋游戏</title>
<link rel="stylesheet" href="./tic-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">restart</button>
</div>
</div>
</body>
<script src="./tic.js" type="text/javascript"></script>
</html>
