如何解决单击播放按钮时不会移动到下一个屏幕
所以我正在编写一个代码来制作一个游戏，当我们点击按钮时，它会出现一个带有玩游戏按钮的屏幕，它会将我们重定向到下一个屏幕，但这不起作用。我已经发布了到目前为止我编写的所有代码，这还没有完全完成，但足以在点击玩游戏按钮后进入下一个屏幕。*
*HTML***strong text**
let score=0
let selected_agent={}
start_btn.addEventListener('click',() =>screens[0].classList.add('up'))
choose_game_btn.forEach(btn=>{
btn.addEventListener('click',()=> {
const img = btn.querySelector('img')
const src = img.getAttribute('src')
const alt = img.getAttribute('alt')
selected_agent = {src,alt}
screens[1].classList.add('up')
setTimeout(createAgent,1000)
startGame()
})
})
function CreateInsect(){
const agent=document.createElement('div')
.agent.classList.add('agent')
const{x,y}=getRandomLocation()
agent.style.top='${y}px'
agent.style.left='${y}px'
agent.innerHTML='<img src="${selected_agent.src}" alt="${selected_agent.alt}"style="transform: rotate(${Math.random' +
'()*360}deg)" />'
game_container.appendChild(agent)
agent.
}
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}
}@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
* {
box-sizing: border-box;
}
body{
background-color: blue;
color: white;
font-family: "Press Start 2p",sans-serif;
height: 100vh;
overflow: hidden;
margin: 0;
text-align: center;
}
{ color:#fff;
}
h1{
line-height: 1.4;
}
.btn {
border: 0;
background-color: white;
color: yellowgreen;
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;
}
.Game-List{
display: flex;
flex-wrap:wrap ;
justify-content: center;
list-style-type: none;
padding: 0;
}
.Game-List li{
margin: 10px;
}
.choose-game-btn{
background-color: transparent;
color: white;
cursor: pointer;
font-family: inherit;
}
.choose-game-btn:hover{
background-color: white;
color: #516dff;
}
.choose-game-btn:active{
background-color: rgba(255,255,0.7);
}
.choose-game-btn image {
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.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;
}
.agent{
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;
}
.agent.caught{
transform: translate(-50-50) scale(0);
}
.agent img{
width: 100px;
height: 100px;
}
.screen.up{
margin-top: -100vh ;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="GAME.css">
<script src="GAME.js" rel="stylesheet"></script>
<meta charset="UTF-8">
<title>
</title>
</head>
<body>
<div
class="screen">
<h1>Catch it</h1>
<button class="btn" id="start-btn">Play Game</button>
</div>
<div class="screen">
<h1> What is ur FAVOURITE AGENT </h1>
<ul class="Game-List">
<li>
<button class="choose-game-btn">
<img src="jett.png" alt="Jett" width="150" height="150"/>
</button>
</li>
<li>
<button class="choose-game-btn">
<img src="raze.jpg" alt="raze" width="150" height="150"/>
</button>
</li>
<li>
<button class="choose-game-btn">
<img src="yoru.jpg" alt="yoru" width="150" height="150"/>
</button>
</li>
<li>
<button class="choose-game-btn">
<img src="reyna.jpg" alt="reyna" width="150" height="150"/>
</button>
</li>
<li>
<button class="choose-game-btn">
<img src="pheonix.jpg" alt="phoenix" width="150" height="150"/>
</button>
</li>
</ul>
</div>
<div
class="screen game-container" id="game-container">
<h3 id="time" class="time">class=00:00</h3>
<h3 class="score" id="score">:0</h3>
<h5 id="message" class="message visible">
Keep doing till ur hands bends<br>
If u win U win 1000000000$ so keep doing it until it says u did it
</h5>
</div>
</body>
</html> *CSS*
@
import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
* {
box-sizing: border-box;
}
body{
background-color: blue;
color: white;
font-family: "Press Start 2p",sans-serif;
height: 100vh;
overflow: hidden;
margin: 0;
text-align: center;
}
{ color:#fff;
}
h1{
line-height: 1.4;
}
.btn {
border: 0;
background-color: white;
color: yellowgreen;
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;
}
.Game-List{
display: flex;
flex-wrap:wrap ;
justify-content: center;
list-style-type: none;
padding: 0;
}
.Game-List li{
margin: 10px;
}
.choose-game-btn{
background-color: transparent;
color: white;
cursor: pointer;
font-family: inherit;
}
.choose-game-btn:hover{
background-color: white;
color: #516dff;
}
.choose-game-btn:active{
background-color: rgba(255,0.7);
}
.choose-game-btn image {
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.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;
}
.agent{
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;
}
.agent.caught{
transform: translate(-50-50) scale(0);
}
.agent img{
width: 100px;
height: 100px;
}
.screen.up{
margin-top: -100vh ;
}
*JS*
let score=0
let selected_agent={}
start_btn.addEventListener('click',() =>screens[0].classList.add('up'))
choose_game_btn.forEach(btn=>{
btn.addEventListener('click',()=> {
const img = btn.querySelector('img')
const src = img.getAttribute('src')
const alt = img.getAttribute('alt')
selected_agent = {src,alt}
screens[1].classList.add('up')
setTimeout(createAgent,1000)
startGame()
})
})
function CreateInsect(){
const agent=document.createElement('div')
.agent.classList.add('agent')
const{x,y}=getRandomLocation()
agent.style.top='${y}px'
agent.style.left='${y}px'
agent.innerHTML='<img src="${selected_agent.src}" alt="${selected_agent.alt}"style="transform: rotate(${Math.random' +
'()*360}deg)" />'
game_container.appendChild(agent)
agent.
}
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}
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
