九耶丨阁瑞钛伦特-井字棋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")。以上代码只是一个基本示例,你可以根据需要进行扩展和美化。

相关推荐
长路 ㅤ   3 小时前
前端技术博客汇总文档
javascript·vue.js·css3·html5·前端技术
张晓~183399481214 小时前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
xhload3d5 小时前
智慧航天运载体系全生命周期监测 | 图扑数字孪生
物联网·3d·智慧城市·html5·webgl·数字孪生·可视化·工业互联网·三维建模·工控·航空航天·火箭升空·智慧航空·智慧航天·火箭发射·火箭回收
涔溪3 天前
HTML5 实现的圣诞主题网站源码,使用了 HTML5 和 CSS3 技术,界面美观、节日氛围浓厚。
css3·html5·节日
Amy.Wang3 天前
前端如何实现电子签名
前端·javascript·html5
veminhe3 天前
html怎么设置html5
html·html5
失落的多巴胺4 天前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
veminhe14 天前
HTML5 浏览器支持
前端·html·html5
伍哥的传说14 天前
react gsap动画库使用详解之text文本动画
前端·vue.js·react.js·前端框架·vue·html5·动画
veminhe15 天前
HTML5简介
前端·html·html5