Javascript井字棋-1

首先我们来讲井字棋的思路

  1. 棋盘
  2. 下棋
  3. 判断输赢

这三步是最基本井字棋的逻辑

可以简单的实现玩家对战的功能

但在本篇文献中

我采取的是电脑跟玩家下

所以我们还需要撕开电脑的下法

  1. 什么地方可以下
  2. 下什么地方最好
  3. 垃圾步

基于上面的逻辑我们开始撰写我们的代码

  1. 棋盘

棋盘这里我才用了一个无序列表ul

以及九个li标签当作镜子棋的九个格子

并给他们都设置了样式

这里不多细讲 如图下

Li标签的value表示这个格子中的状态

为0的时候表示这里没有子

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是用 JavaScript 写的人对人的游戏代码: HTML 代码: ``` <!DOCTYPE html> <html> <head> <title>人对人游戏</title> <style type="text/css"> table { border-collapse: collapse; margin: 20px auto; } td { width: 50px; height: 50px; border: 1px solid black; text-align: center; font-size: 30px; cursor: pointer; } td:hover { background-color: #eee; } </style> </head> <body> <table id="board"> <tr> <td id="0"></td> <td id="1"></td> <td id="2"></td> </tr> <tr> <td id="3"></td> <td id="4"></td> <td id="5"></td> </tr> <tr> <td id="6"></td> <td id="7"></td> <td id="8"></td> </tr> </table> <div id="result"></div> <script type="text/javascript" src="game.js"></script> </body> </html> ``` JavaScript 代码: ``` var board = document.getElementById("board"); var cells = board.getElementsByTagName("td"); var result = document.getElementById("result"); var currentPlayer = "X"; var moves = 0; var gameEnded = false; for (var i = 0; i < cells.length; i++) { cells[i].addEventListener("click", function() { if (gameEnded) { return; } if (this.innerHTML !== "") { return; } this.innerHTML = currentPlayer; moves++; if (checkWin()) { result.innerHTML = currentPlayer + " 赢了!"; gameEnded = true; return; } if (moves === 9) { result.innerHTML = "平局!"; gameEnded = true; return; } currentPlayer = currentPlayer === "X" ? "O" : "X"; }); } function checkWin() { var lines = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6] ]; for (var i = 0; i < lines.length; i++) { var a = lines[i][0]; var b = lines[i][1]; var c = lines[i][2]; if (cells[a].innerHTML === currentPlayer && cells[b].innerHTML === currentPlayer && cells[c].innerHTML === currentPlayer) { return true; } } return false; } ``` 这个游戏使用 HTML 和 JavaScript 编写,通过点击表格中的单元格来下。游戏会检查是否有一方获胜或者平局,并在结果区域显示结果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值