HTML小游戏源码（猜数字）v1.2版-技术分享-极光资源社区

HTML小游戏源码（猜数字）v1.2版

极光云资源社区

发布于 4天前 21 0 举报

0

背景颜色渐变：使用CSS @keyframes 定义了一个名为 backgroundFade 的动画，使背景颜色在淡灰色和金色之间渐变。

窗口抖动：当用户猜对数字时，使用CSS @keyframes 定义了一个名为 shake 的动画，使游戏容器抖动。

答错时窗口变亮：当用户猜错时，背景颜色会变为亮金色。

<!DOCTYPE html>
<html>
<head>
<title>猜数字游戏</title>
<style>
  body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    transition: background-color 0.5s;
  }

  .game-container {
    text-align: center;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    transition: transform 0.3s ease-in-out;
  }

  h1 {
    color: #333;
    margin: 0 0 20px 0;
    transition: color 0.3s;
  }

  .guessField {
    width: calc(100% - 22px);
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: border-color 0.3s;
  }

  .guessField:focus {
    border-color: #5cb85c;
  }

  .guessSubmit {
    padding: 10px 20px;
    background-color: #5cb85c;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 10px;
    transition: background-color 0.3s, transform 0.1s;
  }

  .guessSubmit:hover {
    background-color: #4cae4c;
    transform: scale(1.05);
  }

  .guessSubmit:active {
    transform: scale(0.95);
  }

  @keyframes backgroundFade {
    0% { background-color: #f4f4f4; }
    50% { background-color: #ffd700; }
    100% { background-color: #f4f4f4; }
  }

  @media (max-width: 600px) {
    .game-container {
      padding: 10px;
    }

    h1 {
      font-size: 20px;
    }
  }
</style>
<script>
var secretNumber = Math.floor(Math.random() * 100) + 1;
var attempts = 0;

function shakeContainer() {
  var gameContainer = document.querySelector('.game-container');
  gameContainer.style.animation = 'shake 0.5s';
  gameContainer.style.animationIterationCount = '1';
}

function checkGuess() {
    var userGuess = document.getElementById("guessField").value;
    userGuess = Number(userGuess);
    attempts += 1;
    if(userGuess == secretNumber) {
        shakeContainer();
        document.body.style.animation = 'none';
        document.body.style.backgroundColor = "#dff0d8";
        document.getElementById("guessField").disabled = true;
        document.querySelector(".guessSubmit").disabled = true;
        alert("恭喜你！猜对了数字是 " + secretNumber + "!");
        alert("你总共猜了 " + attempts + " 次。");
    } else {
        alert("猜错了！");
        document.body.style.backgroundColor = "#ffd700";
    }
}

window.onload = function() {
    document.body.style.animation = 'backgroundFade 10s infinite';
};
</script>
</head>
<body>

<div class="game-container">
  <h1>猜数字游戏</h1>
  <p>我已经想好了一个1到100之间的数字。</p>

  <input type="text" id="guessField" class="guessField">
  <input type="button" value="猜数字" class="guessSubmit" onclick="checkGuess()">

</div>

<style>
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
  }
</style>

</body>
</html>

网站搭建技术其他

本站申明 1、本帖标题：HTML小游戏源码（猜数字）v1.2版
2、论坛网址：https://aurcoc.cn/
3、本贴地址：https://aurcoc.cn/thread-125.htm
4、本论坛一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请，投诉举报
5、本论坛的资源部分来源于网络，如有侵权，请私信联系站长进行删除处理。
6、不得发布和链接任何有关政治, 色情, 宗教, 迷信.低俗、变态、血腥、暴力以及危害国家安全.诋毁政府形象等违法言论和信息的帖子.
7、本帖由极光云资源社区在本论坛技术分享版块发布，如无特需说明均为原创，转载请注明出处！

最新回复 (0)

暂无评论

请先登录后发表评论！

登录注册