九耶丨阁瑞钛伦特-井字棋html5代码

你想了解关于井字棋(Tic-Tac-Toe)的HTML代码吗?以下是一个简单的井子棋的HTML代码示例:

<!DOCTYPE html>
<html>
<head>
  <title>Tic-Tac-Toe</title>
  <style>
    .board {
      display: flex;
      flex-wrap: wrap;
      width: 300px;
    }
    .cell {
      width: 100px;
      height: 100px;
      border: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 48px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="board">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>

  <script>
    const cells = document.querySelectorAll('.cell');
    let currentPlayer = 'X';

    function handleCellClick(e) {
      const cell = e.target;
      if (cell.textContent === '') {
        cell.textContent = currentPlayer;
        currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
      }
    }

    cells.forEach(cell => {
      cell.addEventListener('click', handleCellClick);
    });
  </script>
</body>
</html>

这段代码创建了一个3x3的井字棋盘,使用了HTML、CSS和JavaScript。每个格子都是一个 <div> 元素,点击格子时会在其内部显示当前玩家的标记("X"或"O")。以上代码只是一个基本示例,你可以根据需要进行扩展和美化。

相关推荐
无限大.14 小时前
前端知识速记--HTML篇:HTML5的新特性
前端·html·html5
Bl_a_ck3 天前
【CSS进阶】常见的页面自适应的方法
前端·css·less·css3·sass·html5·scss
jackzhuoa3 天前
JavaScript + HTML5 Canvas 实现互动爱心雨
开发语言·javascript·html5
百创科技4 天前
H5自适应响应式代理记账与财政咨询服务类PbootCMS网站模板 – HTML5财务会计类网站源码下载
前端·html·html5
我的86呢!4 天前
H5接入支付宝手机网站支付并实现
前端·javascript·vue.js·前端框架·uni-app·html5
非凡网站4 天前
企业网站设计HTML源码模板
开源·html·html5
咸虾米_5 天前
使用css3锥形渐变conic-gradient实现有趣样式
前端·css·css3·html5
ThereIsNoCode5 天前
网页版贪吃蛇小游戏开发HTML实现附源码!
web3·html5
switch_swq5 天前
使用Hexo部署NexT主体网站
笔记·学习·node.js·html5·hexo·next·网页
叶不休5 天前
正则表达式--元字符-限定符(4)
前端·css·正则表达式·edge·html·css3·html5