九耶丨阁瑞钛伦特-井字棋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
大模型铲屎官1 天前
HTML常见文本标签解析:从基础到进阶的全面指南
前端·css·html·编程·html5·文本标签
补三补四1 天前
html的字符实体和颜色表示
前端·html5
山禾女鬼0012 天前
深入探索 HTML5 拖拽效果 API:打造流畅交互体验
前端·html·html5
学问小小谢3 天前
第23节课:前端调试技巧—掌握浏览器开发者工具与性能优化
前端·学习·安全·性能优化·交互·html5
酷爱码3 天前
HTML5+SVG+CSS3实现雪中点亮的圣诞树动画效果源码
前端·css3·html5
小韩学长yyds3 天前
前端实战:小程序搭建商品购物全流程
javascript·css·vue.js·小程序·前端框架·node.js·html5
红虾程序员4 天前
HTML一般标签和自闭合标签介绍
前端·pycharm·html·intellij-idea·html5
大模型铲屎官5 天前
从零开始学 HTML:构建网页的基本框架与技巧
前端·css·html·css3·html5·网页构建
Lorcian6 天前
web前端11--伪类与过渡
前端·css·笔记·html5·visual studio code