这段HTML、CSS和JavaScript代码构成了一个简单的网页游戏，名为“Catch The Insect”

标签：const color JavaScript Insect height insect HTML 屏幕 btn

这段HTML、CSS和JavaScript代码构成了一个简单的网页游戏，名为“Catch The Insect”。以下是对代码的详细分析和说明：

HTML部分

基础结构：
- 使用<!DOCTYPE html>声明文档类型，确保浏览器以标准模式渲染页面。
- <html lang="en">标签定义了文档的语言为英语。
- <head>部分包含了字符集声明、视口设置、内嵌CSS样式和页面标题。
- <body>部分包含了游戏的所有可视元素。
屏幕（Screens）：
- 使用了三个<div class="screen">元素来表示不同的游戏屏幕：开始屏幕、选择昆虫屏幕和游戏屏幕。
- 开始屏幕包含一个标题和一个“Play Game”按钮。
- 选择昆虫屏幕包含一个昆虫列表，每个昆虫用一个<button class="choose-insect-btn">表示，内含图片和名称。
- 游戏屏幕包含显示时间和分数的<h3>元素，以及一个用于显示消息的<h5>元素。

CSS部分

全局样式：
- 使用* { box-sizing: border-box; }来确保所有元素的padding和border都包含在元素的总宽度和高度内。
- body样式设置了背景色、字体、页面不滚动等。
按钮样式：
- .btn类定义了通用按钮的样式。
- .choose-insect-btn类为选择昆虫的按钮设置了特殊样式，包括边框、颜色和悬停、激活状态的效果。
屏幕动画：
- .screen.up类通过margin-top将屏幕移出视图，用于屏幕间的切换。
游戏元素：
- .insect类定义了昆虫的样式，包括大小、位置和点击后的动画效果。
- .message类用于显示游戏消息，通过visible类控制其显示和隐藏。

JavaScript部分

变量初始化：
- 初始化屏幕、按钮、游戏容器、时间、分数和消息等元素的引用。
- 设置初始分数和时间。
事件监听：
- start_btn.addEventListener('click', ...)监听开始按钮的点击事件，切换到选择昆虫屏幕。
- choose_insect_btns.forEach(btn => btn.addEventListener('click', ...))监听每个选择昆虫按钮的点击事件，记录所选昆虫，切换到游戏屏幕，并开始游戏。
游戏逻辑：
- startGame()函数每秒调用increaseTime()来更新时间。
- createInsect()函数在游戏容器中随机位置创建一个昆虫。
- getRandomLocation()函数用于生成昆虫的随机位置。
- catchInsect()函数处理昆虫被点击的事件，增加分数，移除昆虫，并在分数超过19时显示消息。
- addInsects()函数用于在游戏过程中不断增加昆虫。

总体来说，这段代码提供了一个基础的游戏框架，通过进一步的完善和优化，可以成为一个有趣的小游戏。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <style>
          * {
              box-sizing: border-box;
          }

          body {
              background-color: #516dff;
              color: #fff;
              font-family: 'Press Start 2P', sans-serif;
              height: 100vh;
              overflow: hidden;
              margin: 0;
              text-align: center;
          }

          a {
              color: #fff;
          }

          h1 {
              line-height: 1.4;
          }

          .btn {
              border: 0;
              background-color: #fff;
              color: #516dff;
              padding: 15px 20px;
              font-family: inherit;
              cursor: pointer;
          }

              .btn:hover {
                  opacity: 0.9;
              }

              .btn:focus {
                  outline: 0;
              }

          .screen {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              height: 100vh;
              width: 100vw;
              transition: margin 0.5s ease-out;
          }

              .screen.up {
                  margin-top: -100vh;
              }

          .insects-list {
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              list-style-type: none;
              padding: 0;
          }

              .insects-list li {
                  margin: 10px;
              }

          .choose-insect-btn {
              background-color: transparent;
              border: 2px solid #fff;
              color: #fff;
              cursor: pointer;
              font-family: inherit;
              width: 150px;
              height: 150px;
          }

              .choose-insect-btn:hover {
                  background-color: #fff;
                  color: #516dff;
              }

              .choose-insect-btn:active {
                  background-color: rgba(255, 255, 255, 0.7);
              }

              .choose-insect-btn img {
                  width: 100px;
                  height: 100px;
                  object-fit: contain;
              }

          .game-container {
              position: relative;
          }

          .time,
          .score {
              position: absolute;
              top: 20px;
          }

          .time {
              left: 20px;
          }

          .score {
              right: 20px;
          }

          .message {
              line-height: 1.7;
              background-color: rgba(0, 0, 0, 0.5);
              width: 100%;
              padding: 20px;
              z-index: 100;
              text-align: center;
              opacity: 0;
              position: absolute;
              top: 0;
              left: 50%;
              transform: translate(-50%, -150%);
              transition: transform 0.4s ease-in;
          }

              .message.visible {
                  transform: translate(-50%, 150%);
                  opacity: 1;
              }

          .insect {
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: center;
              width: 100px;
              height: 100px;
              position: absolute;
              transform: translate(-50%, -50%) scale(1);
              transition: transform 0.3s ease-in-out;
          }

              .insect.caught {
                  transform: translate(-50%, -50%) scale(0);
              }

              .insect img {
                  width: 100px;
                  height: 100px;
              }

      </style>
    <title>Catch The Insect</title>
  </head>
  <body>
    <div class="screen">
      <h1>Catch The Insect</h1>
      <button class="btn" id="start-btn">Play Game</button>
    </div>

    <div class="screen">
      <h1>What is your "favorite" insect?</h1>
      <ul class="insects-list">
        <li>
          <button class="choose-insect-btn">
            <p>Fly</p>
            <img src="http://pngimg.com/uploads/fly/fly_PNG3946.png" alt="fly">
          </button>
        </li>
        <li>
          <button class="choose-insect-btn">
            <p>Mosquito</p>
            <img
               src="http://pngimg.com/uploads/mosquito/mosquito_PNG18175.png"
               alt="mosquito"
               />
          </button>
        </li>
        <li>
          <button class="choose-insect-btn">
            <p>Spider</p>
            <img
               src="http://pngimg.com/uploads/spider/spider_PNG12.png"
               alt="spider"
               />
          </button>
        </li>
        <li>
          <button class="choose-insect-btn">
            <p>Roach</p>
            <img
               src="http://pngimg.com/uploads/roach/roach_PNG12163.png"
               alt="roach"
               />
          </button>
        </li>
      </ul>
    </div>

    <div class="screen game-container" id="game-container">
      <h3 id="time" class="time">Time: 00:00</h3>
      <h3 id="score" class="score">Score: 0</h3>
      <h5 id="message" class="message">
        Are you annoyed yet? <br>
        You are playing an impossible game!!
      </h5>
    </div>

    <script>
        const screens = document.querySelectorAll('.screen');
        const choose_insect_btns = document.querySelectorAll('.choose-insect-btn');
        const start_btn = document.getElementById('start-btn')
        const game_container = document.getElementById('game-container')
        const timeEl = document.getElementById('time')
        const scoreEl = document.getElementById('score')
        const message = document.getElementById('message')
        let seconds = 0
        let score = 0
        let selected_insect = {}

        start_btn.addEventListener('click', () => screens[0].classList.add('up'))

        choose_insect_btns.forEach(btn => {
            btn.addEventListener('click', () => {
                const img = btn.querySelector('img')
                const src = img.getAttribute('src')
                const alt = img.getAttribute('alt')
                selected_insect = { src, alt }
                screens[1].classList.add('up')
                setTimeout(createInsect, 1000)
                startGame()
            })
        })

        function startGame() {
            setInterval(increaseTime, 1000)
        }

        function increaseTime() {
            let m = Math.floor(seconds / 60)
            let s = seconds % 60
            m = m < 10 ? `0${m}` : m
            s = s < 10 ? `0${s}` : s
            timeEl.innerHTML = `Time: ${m}:${s}`
            seconds++
        }

        function createInsect() {
            const insect = document.createElement('div')
            insect.classList.add('insect')
            const { x, y } = getRandomLocation()
            insect.style.top = `${y}px`
            insect.style.left = `${x}px`
            insect.innerHTML = `<img src="${selected_insect.src}" alt="${selected_insect.alt}" style="transform: rotate(${Math.random() * 360}deg)" />`

            insect.addEventListener('click', catchInsect)

            game_container.appendChild(insect)
        }

        function getRandomLocation() {
            const width = window.innerWidth
            const height = window.innerHeight
            const x = Math.random() * (width - 200) + 100
            const y = Math.random() * (height - 200) + 100
            return { x, y }
        }

        function catchInsect() {
            increaseScore()
            this.classList.add('caught')
            setTimeout(() => this.remove(), 2000)
            addInsects()
        }

        function addInsects() {
            setTimeout(createInsect, 1000)
            setTimeout(createInsect, 1500)
        }

        function increaseScore() {
            score++
            if (score > 19) {
                message.classList.add('visible')
            }
            scoreEl.innerHTML = `Score: ${score}`
        }
    </script>
  </body>
</html>

标签：const,color,JavaScript,Insect,height,insect,HTML,屏幕,btn
From： https://blog.csdn.net/2201_76060199/article/details/142289086

这段HTML、CSS和JavaScript代码构成了一个简单的网页游戏，名为“Catch The Insect”

HTML部分

CSS部分

JavaScript部分

相关文章

赞助商

阅读排行