WebCat 小游戏：躲避追逐，挑战极限！
<p>WebCat 是一款简单有趣的小游戏，你需要控制一个圆形物体，躲避另一个圆形物体的追逐。点击屏幕开始游戏，看看你能坚持多久！</p>
<p>游戏规则：</p>
<ul>
<li>点击屏幕开始游戏。</li>
<li>控制圆形物体（蓝色）躲避另一个圆形物体（红色）的追逐。</li>
<li>如果两个圆形物体发生碰撞，游戏结束。</li>
</ul>
<p>游戏技巧：</p>
<ul>
<li>注意观察红色圆形物体的移动轨迹。</li>
<li>及时调整蓝色圆形物体的方向，避开红色圆形物体。</li>
<li>尽可能地延长游戏时间。</li>
</ul>
<p>游戏代码：</p>
<pre>
<!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" />
<img class="cds" src="3a72f5a9a157fa39485bf32cd17d2ab8.png" />
</div>
<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>
</html>
</pre>
<p>cdm和cds仍然在转动是因为在关闭弹窗后，虽然停止了动画的播放，但是元素的样式仍然保持不变。如果希望在关闭弹窗后停止cdm和cds的转动，可以在弹窗关闭后，通过修改元素的样式来停止动画的播放。</p>
<p>在弹窗关闭的地方添加以下代码：</p>
<pre>
cdmRect.style.animation = 'none';
cddsRect.style.animation = 'none';
</pre>
<p>这样就会将cdm和cds的动画设置为none，从而停止它们的转动。</p>
<p>希望你能喜欢这款简单的小游戏！</p>
原文地址: https://www.cveoy.top/t/topic/qnkV 著作权归作者所有。请勿转载和采集!