WebCat 小游戏 - 点击屏幕开始 - 常规

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>WebCat</title>
    <style>
body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
      }
      .box {
        width: 300px;
        height: 300px;
        background:url(1692263957083.png);
        background-size:100% 100%;
        border: 8px solid black;
        border-radius: 200px;
        //animation: no 8000ms linear infinite;
        position: relative; /* 添加定位属性 */
      }
      .cdm {
        transition: 1000ms;
        position: absolute;
        top: 125px; /* 调整top属性的值 */
        left: 285px;
        //285px;
        //-25px; 
        /* 调整left属性的值 */
        width: 40px;
        height: 40px;
        border-radius: 200px;
        //animation: nko 8000ms linear infinite;
      }
      @keyframes nko {
        0% {
          transform: rotate(360deg);
        }
        100% {
          transform: rotate(0deg);
        }
      }
      @keyframes no {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    .cds{
     position: absolute;
        top: 125px; /* 调整top属性的值 */
        left: -25px;
        //285px;
        //-25px; 
        /* 调整left属性的值 */
        width: 40px;
        height: 40px;
        border-radius: 200px;
        transform-origin:175px 50%;
        //animation: nko 2000ms linear infinite;
     }
   h1 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size:24px;
}
    </style>
  </head>
  <body id="bodh">	
  <h1>点击屏幕开始游戏</h1>
	<div class="box">
      <img id="ddsa" class="cdm" src="NTIwMzA2NTAxNjcxMjI0NjAyNV8xNjQ5NDg3NTAzODI0_5.jpg" />
<pre><code>    &lt;img class=&quot;cds&quot; src=&quot;3a72f5a9a157fa39485bf32cd17d2ab8.png&quot; /&gt;
  
&lt;/div&gt;
</code></pre>
 <script>
 var intervalId;
 var i = 1;
 var s = 1;
 var boxRect = document.querySelector('.box');
 var cdmRect = document.querySelector('.cdm');
 var cddsRect = document.querySelector('.cds');
 function rtgu(){
 var cdmRect = ddsa.getBoundingClientRect();
      var cdsRect = document.querySelector('.cds').getBoundingClientRect();

      // 判断两个元素的位置关系
      if (cdmRect.left < cdsRect.right && cdmRect.right > cdsRect.left && cdmRect.top < cdsRect.bottom && cdmRect.bottom > cdsRect.top) {
        // 弹出弹窗
        clearInterval(intervalId);
        alert('GAME OVER！');
        boxRect.style.animation='no 0s linear infinite';
        cdmRect.style.animation='nko 0s linear infinite';
        cddsRect.style.animation='nko 0s linear infinite';
        s=0;
      }
 }
//setInterval(rtgu,4);
 bodh.onclick=function (){
     if(s==1){
       boxRect.style.animation='no 8s linear infinite';
       cdmRect.style.animation='nko 8s linear infinite';
       cddsRect.style.animation='nko 2s linear infinite';
       setTimeout(function(){intervalId = setInterval(rtgu,4);},100)
       s=0;
       }
//alert('qd');
 if(i==1){
  ddsa.style.left='-25px';
  i=0;
 }else{
  ddsa.style.left='285px';
  i=1;
 }
 }
 </script>
  </body>
</html>
为什么gameover关闭弹窗后，css动画还在转内容：当点击'GAME OVER'关闭弹窗后，CSS动画仍然继续运行的原因是，即使弹窗关闭了，但是在JavaScript代码中，动画的设置仍然保持在原来的状态。
<p>要解决这个问题，可以在关闭弹窗时，通过JavaScript代码来停止动画的运行。具体做法是，在弹窗关闭的事件处理函数中，添加代码来清除动画的设置。</p>
<p>在你的代码中，可以在关闭弹窗的<code>alert('GAME OVER！');</code>后面添加以下代码：</p>
<pre><code class="language-javascript">boxRect.style.animation = 'none';
cdmRect.style.animation = 'none';
 cddsRect.style.animation = 'none';
</code></pre>
<p>这样就可以停止动画的运行。</p>
<p>另外，你还可以在关闭弹窗后，重新设置<code>i</code>和<code>s</code>的值为1，以便再次点击屏幕时重新开始游戏。可以在以上代码的后面添加以下代码：</p>
<pre><code class="language-javascript">i = 1;
s = 1;
</code></pre>
<p>这样就可以重置游戏状态，让动画可以重新开始。</p>
<p>完整的代码如下所示：</p>
<pre><code class="language-javascript">alert('GAME OVER！');
boxRect.style.animation = 'none';
cdmRect.style.animation = 'none';
cddsRect.style.animation = 'none';
i = 1;
s = 1;
</code></pre>
<p>希望能帮助到你！</p>