使用html5制作一个井字格小游戏

最新推荐文章于 2024-07-13 19:15:00 发布

2201_75396384

最新推荐文章于 2024-07-13 19:15:00 发布

阅读量625

点赞数 15

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/2201_75396384/article/details/136792044

版权

由于家里的小孩老是吵着要玩小游戏，于是突发奇想做了一个全屏用符号雨做装饰，中间井字格的小游戏出来玩一玩

话不多说，直接上演示图片在这里插入图片描述
这是代码

<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>井字棋</title>
<style>
    body {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: #000;
        overflow: hidden;
        position: relative;
    }

    .tic-tac-toe {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
    }

    .tic-tac-toe div {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 36px;
        cursor: pointer;
        border: 2px solid #fff;
        color: #fff;
        transition: background-color 0.3s ease;
    }

    .tic-tac-toe div:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }

    .code-rain {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        overflow: hidden;
    }

    .code-rain span {
        position: absolute;
        color: #0f0;
        user-select: none;
        pointer-events: none;
        animation: codeRain 0.5s linear infinite;
    }

    @keyframes codeRain {
        0% {
            transform: translateY(-100%);
        }
        100% {
            transform: translateY(100vh);
        }
    }
</style>
</head>
<body>
<div class="tic-tac-toe">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

<div class="code-rain">
    <!-- 生成代码雨效果 -->
    <script>
        const codeRainContainer = document.querySelector('.code-rain');

        function generateCodeRain() {
            const codeSymbols = '!@#$%^&*()_+{}|:"<>?`-=\\[];\',./';
            const codeLength = 100;
            const codeElements = [];

            for (let i = 0; i < codeLength; i++) {
                const span = document.createElement('span');
                span.textContent = codeSymbols[Math.floor(Math.random() * codeSymbols.length)];
                span.style.left = `${Math.random() * 100}%`;
                span.style.animationDelay = `${Math.random()}s`;
                span.style.fontSize = `${Math.floor(Math.random() * 16) + 12}px`;
                codeElements.push(span);
                codeRainContainer.appendChild(span);
            }

            return codeElements;
        }

        generateCodeRain();
    </script>
</div>

<script>
    const cells = document.querySelectorAll('.tic-tac-toe div');
    let currentPlayer = 'X';
    let gameActive = true;

    function handleCellClick(e) {
        const cell = e.target;

        if (!gameActive || cell.textContent !== '') return;

        cell.textContent = currentPlayer;
        checkWinner();
        currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
    }

    function checkWinner() {
        const winningConditions = [
            [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 (let condition of winningConditions) {
            const [a, b, c] = condition;

            if (
                cells[a].textContent &&
                cells[a].textContent === cells[b].textContent &&
                cells[a].textContent === cells[c].textContent
            ) {
                cells[a].style.backgroundColor = 'green';
                cells[b].style.backgroundColor = 'green';
                cells[c].style.backgroundColor = 'green';
                gameActive = false;
                setTimeout(() => {
                    restartGame();
                }, 5000);
                return;
            }
        }
    }

    function restartGame() {
        cells.forEach(cell => {
            cell.textContent = '';
            cell.style.backgroundColor = '';
        });
        currentPlayer = 'X';
        gameActive = true;
    }

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