typescript小案例：井字游戏

最新推荐文章于 2024-04-10 21:53:38 发布

Hope°

最新推荐文章于 2024-04-10 21:53:38 发布

阅读量430

点赞数

分类专栏： typescript js

本文链接：https://blog.csdn.net/m0_52773472/article/details/113572211

版权

js 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

typescript

2 篇文章 0 订阅

订阅专栏

ts小案例：井字游戏

这是排版部分，一个比较简单的排版。
在这里插入图片描述

css样式

html,body{
    background: rgb(84, 226,226);
}
#box{
    width: 800px;
    height: 800px;
    margin:100px auto
}
.gameTit{
    text-align: center;
    padding: 50px 0;
    color:aliceblue
}
 
.container .row{
    display: flex;
    font-size: 18px;
    justify-content: center;
    align-items: center;
}
.container .row div{
    width:200px;
    height:200px;
    border-right:5px solid #ccc;
    border-bottom: 5px solid #ccc;
    text-align: center;
    line-height: 150px;
    font-size: 200px;
    color:antiquewhite
}
.container .row div:last-child{
    border-right:none;
}
.container .row:last-child div{
    border-bottom:none;
}
.x::after{
     content: 'x' ;
}
.o::after{
     content: 'o' ;
}
.win{
    width: 800px;
    height: 500px;
    color:#fff;
    font-size: 33px;
    text-align: center;
    line-height: 500px;
}

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="game.css">
</head>
<body>
    <div id="box">
        <h1 class="gameTit">Game 井字游戏</h1>
   
        <div class="container">
            <!-- 获胜面板 -->
            <div class="gameBox" >
            <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 lastdiv">
                    <div class="cell"></div>
                    <div class="cell"></div>
                    <div class="cell"></div>
            </div>
            </div>
            <!-- 获胜面板 -->
            <div class="win" style="display: none;"> </div>
        </div>
    </div>
</body>
<script src="./game.js"></script>
</html>

ts部分

1.使用命令tsc index.ts将ts转为js文件
2.在页面引入js文件

1.获取表格数据，并且点击更改x,o

利用事件代理点击标签时，判断play的值，如果是x就变为o。给dom2级事件第三个参数绑定一个once:true表示只执行一次。

// 定义x,y
var play:string='x'
// 获取所有的表格
var cell=document.querySelectorAll(".cell") 
cell.forEach((i,v)=>{
    var lis=i as HTMLDivElement
     clickCell(lis)
})
// 点击事件
function clickCell(lis){
    lis.addEventListener("click",(event)=>{
        let t = event.target as HTMLDivElement
        t.classList.add(play)
        play=play==='x'?'o':'x'
    },{once:true})
}

判断胜利

首先把可以获胜的数组放在一个数组中，然后遍历这个数组，并且把所有的标签代入进去，就可以获得到所有的行，列，斜方向的标签。
如果行，列，斜方向标签包含x/y,这两个class名，就让获胜界面显示并且游戏界面隐藏

// 游戏界面
var gamesContainer=document.querySelector(".gameBox")  as HTMLDivElement
// 获胜界面
var winners=document.querySelector(".win")  as HTMLDivElement
// 获胜数组
let winArrs=[
    [0,1,2],[3,4,5],[6,7,8],//横向
    [0,3,6],[1,4,7],[2,5,8],//竖向
    [0,4,8],[2,4,6]         //斜向
]
// 判断胜利
function winner(){
  return winArrs.some((i,v)=>{
        // 通过索引找到cells元素
        let cell1=cell[i[0]]
        let cell2=cell[i[1]]
        let cell3=cell[i[2]]
        // 如果这一列的class名字都包含play的值（x/y） 就让这个选手获胜
        if(
            cell1.classList.contains(play) &&
            cell2.classList.contains(play) &&
            cell3.classList.contains(play) 

        ){
        // 获胜让获胜界面显示并且游戏界面隐藏
        winners.innerHTML=play+"win"
        winners.style.display='block'
        gamesContainer.style.display='none'
        }      
    })
}

判断平局

没点击一次，就让steps++，当steps===9时，就为平局。让游戏界面隐藏，平局界面显示。
判断为先判断是否胜利，在判断是否平局，所以一定要注意下方法调用的位置。

var steps:number=0
// 判断平局
function noWin(){
    steps++
    if(steps===9){
        winners.innerHTML="平局"
        winners.style.display='block'
        gamesContainer.style.display='none'
        return
    }
}

ts完整代码

// 游戏界面
var gamesContainer=document.querySelector(".gameBox")  as HTMLDivElement
// 获胜界面
var winners=document.querySelector(".win")  as HTMLDivElement
// 定义x,y
var play:string='x'
// 获胜数组
let winArrs=[
    [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 steps:number=0
// 获取所有的表格
var cell=document.querySelectorAll(".cell") 
cell.forEach((i,v)=>{
    var lis=i as HTMLDivElement
     clickCell(lis)
})
// 点击事件
function clickCell(lis){
    lis.addEventListener("click",(event)=>{
        let t = event.target as HTMLDivElement
        t.classList.add(play)
        noWin()
        winner()
        play=play==='x'?'o':'x'
    },{once:true})
}
// 判断胜利
function winner(){
  return winArrs.some((i,v)=>{
        // 通过索引找到cells元素
        let cell1=cell[i[0]]
        let cell2=cell[i[1]]
        let cell3=cell[i[2]]
        // 如果这一列的class名字都包含play的值（x/y） 就让这个选手获胜
        if(
            cell1.classList.contains(play) &&
            cell2.classList.contains(play) &&
            cell3.classList.contains(play) 

        ){
        // 获胜让获胜界面显示并且游戏界面隐藏
        winners.innerHTML=play+"win"
        winners.style.display='block'
        gamesContainer.style.display='none'
        }      
    })
}
// 判断平局
function noWin(){
    steps++
    if(steps===9){
        winners.innerHTML="平局"
        winners.style.display='block'
        gamesContainer.style.display='none'
        return
    }
}

Hope°

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
typescript小案例：井字游戏

ts小案例：井字游戏这是排版部分，一个比较简单的排版。css样式html,body{ background: rgb(84, 226,226);}#box{ width: 800px; height: 800px; margin:100px auto}.gameTit{ text-align: center; padding: 50px 0; color:aliceblue} .container .row{ displ
复制链接

扫一扫