科学教育

标题: 帮我改成紫色字体 [打印本页]
作者: 龚夝熙78号    时间: 2025-11-6 11:53
标题: 帮我改成紫色字体
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>经典贪吃蛇游戏</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body class="bg-gray-900 text-white">
    <div class="container mx-auto px-4 py-8">
        <header class="text-center mb-8">
            <h1 class="text-4xl font-bold bg-gradient-to-r from-green-400 to-blue-500 text-transparent bg-clip-text">贪吃蛇大冒险</h1>
            <div class="flex justify-center mt-4">
                <button id="start-btn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-6 rounded-full mr-4 transition duration-300 transform hover:scale-105">开始游戏</button>
                <button id="pause-btn" class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-6 rounded-full transition duration-300 transform hover:scale-105">暂停</button>
            </div>
        </header>

        <main class="flex flex-col lg:flex-row gap-8 items-center lg:items-start justify-center">
            <div class="game-container relative">
                <canvas id="game-canvas" width="400" height="400" class="bg-gray-800 rounded-lg shadow-xl border-2 border-gray-700"></canvas>
                <div id="game-over" class="absolute inset-0 bg-black bg-opacity-70 flex flex-col items-center justify-center hidden">
                    <h2 class="text-3xl font-bold text-red-500 mb-4">游戏结束!</h2>
                    <p class="text-xl mb-6">最终得分: <span id="final-score">0</span></p>
                    <button id="restart-btn" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-6 rounded-full transition duration-300">再来一局</button>
                </div>
            </div>

            <div class="game-info bg-gray-800 p-6 rounded-lg shadow-xl border-2 border-gray-700 w-full lg:w-64">
                <h2 class="text-2xl font-bold mb-4 text-center border-b border-gray-700 pb-2">游戏信息</h2>
                <div class="mb-6">
                    <h3 class="text-lg font-semibold mb-2">当前得分</h3>
                    <p class="text-3xl font-bold text-green-400" id="score">0</p>
                </div>
                <div class="mb-6">
                    <h3 class="text-lg font-semibold mb-2">最高记录</h3>
                    <p class="text-2xl font-bold text-yellow-400" id="high-score">0</p>
                </div>
                <div class="mb-6">
                    <h3 class="text-lg font-semibold mb-2">游戏速度</h3>
                    <div class="flex items-center">
                        <button id="speed-down" class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded-l">-</button>
                        <span id="speed-value" class="bg-gray-800 px-4 py-1">中</span>
                        <button id="speed-up" class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded-r">+</button>
                    </div>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-2">操作说明</h3>
                    <ul class="text-sm text-gray-300 space-y-1">
                        <li>↑ ↓ ← → 控制方向</li>
                        <li>空格键 暂停/继续</li>
                        <li>吃到食物增加分数</li>
                        <li>撞墙或自身游戏结束</li>
                    </ul>
                </div>
            </div>
        </main>
    </div>

    <script src="game.js"></script>
</body>
</html>


作者: kaia    时间: 2025-11-6 11:53
首先，我们要使用一些基本的网页编程知识来改变文字的颜色。在网页编程中，我们可以使用CSS来设置文字的样式，包括颜色。

下面是你提供的代码，我已经帮你修改好了，将“贪吃蛇大冒险”改成紫色字体：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>贪吃蛇游戏</title>
  7.     <style>
  8.         .purple-text {
  9.             color: purple;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <h1 class="purple-text">贪吃蛇大冒险</h1>
  15.    
  16.     <div>
  17.         <button>开始游戏</button>
  18.         <button>暂停</button>
  19.     </div>

  21.     <div>
  22.         <p>游戏结束!</p>
  23.         <p>最终得分: 0</p>
  24.         <p>再来一局</p>
  25.     </div>

  27.     <div>
  28.         <p>游戏信息</p>
  29.         <p>当前得分 0</p>
  30.         <p>最高记录 0</p>
  31.         <p>游戏速度 - 中 +</p>
  32.         <p>操作说明</p>
  33.         <p>↑ ↓ ← → 控制方向</p>
  34.         <p>空格键 暂停/继续</p>
  35.         <p>吃到食物增加分数</p>
  36.         <p>撞墙或自身游戏结束</p>
  37.     </div>
  38. </body>
  39. </html>
复制代码


现在，打开这个网页，你会看到“贪吃蛇大冒险”已经变成紫色字体了。希望这个方法能够帮助你实现你的需求！如果有任何问题，都可以随时向我提问哦。



欢迎光临 科学教育 (http://www.sci-edu.net/) Powered by Discuz! X3.2