console.log(" Tic Tac Toe");
let music = new Audio("/tic tac toe/tic tac toe/music.mp3");
let audioTurn = new Audio("/tic tac toe/tic tac toe/ting.mp3");
let gameover = new Audio("/tic tac toe/tic tac toe/gameover.mp3");
let turn = "X";
let isgameover = false;
let button = document.getElementsByClassName('play');
// music.play();
// Function to change the Turn...
const changeTurn = ()=>{
return turn === "X"? "0": "X";
}
// Function to check for a win...
const checkWin = ()=>{
let boxtext = document.getElementsByClassName('boxtext');
let wins = [
[0, 1, 2, 5, 5, 0],
[3, 4, 5, 5, 15, 0],
[6, 7, 8, 5, 25, 0],
[0, 3, 6, -5, 15, 90],
[1, 4, 7, 5, 15, 90],
[2, 5, 8, 15, 15, 90],
[0, 4, 8, 5, 15, 45],
[2, 4, 6, 5, 15, 135],
]
wins.forEach(e =>{
if((boxtext[e[0]].innerText === boxtext[e[1]].innerText) && (boxtext[e[2]].innerText === boxtext[e[1]].innerText) && (boxtext[e[0]].innerText !== "") ){
document.querySelector('.info').innerText = boxtext[e[0]].innerText + " Won"
isgameover = true
document.querySelector('.imgbox').getElementsByTagName('img')[0].style.width = "200px";
document.querySelector(".line").style.transform = `translate(${e[3]}vw, ${e[4]}vw) rotate(${e[5]}deg)`
document.querySelector(".line").style.width = "20vw";
}
})
}
// music.play();
// Game Logic...
let boxes = document.getElementsByClassName("box");
Array.from(boxes).forEach(element =>{
let boxtext = element.querySelector('.boxtext');
element.addEventListener('click', ()=>{
if(boxtext.innerText === ''){
boxtext.innerText = turn;
turn = changeTurn();
audioTurn.play();
checkWin();
if (!isgameover){
document.getElementsByClassName("info")[0].innerText = "Turn for " + turn;
}
}
})
})
// Add onclick listener to Reset Button...
reset.addEventListener('click' , ()=>{
let boxtexts = document.querySelectorAll('.boxtext');
Array.from(boxtexts).forEach(element => {
element.innerText = ""
});
turn = "X";
isgameover = false
document.querySelector(".line").style.width = "0";
document.getElementsByClassName("info")[0].innerText = "Turn for " + turn;
document.querySelector('.imgbox').getElementsByTagName('img')[0].style.width = "0px"
}
)
// For handling the music play....
button.addEventListener('click', ()=>{
if(music.paused){
music.play();
button.classList.remove("fa-play-circle");
button.classList.add("fa-pause-circle");
}
else{
music.pause();
button.classList.add("fa-play-circle");
button.classList.remove("fa-pause-circle");
}
});@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2&display=swap');
*{
margin: 0;
padding: 0;
}
nav{
background-color: #a60776;
color: white;
height: 65px;
font-size: 27px;
display: flex;
align-items: center;
padding: 0 12px;
font-family: 'Roboto', sans-serif;
}
nav ul{
list-style: none;
}
.gameContainer{
display: flex;
justify-content: center;
margin-top: 50px;
}
.container{
display: grid;
grid-template-rows: repeat(3, 10vw);
grid-template-columns: repeat(3, 10vw);
font-family: 'Roboto', sans-serif;
position: relative;
}
.box{
border: 2px solid black;
font-size: 8vw;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.box:hover{
background-color: rgb(249, 226, 249);
}
.info{
font-size: 22px;
}
.gameInfo{
padding: 0 34px;
font-family: 'Baloo Bhaina 2', cursive;
}
.gameInfo h1{
font-size: 2.5rem;
}
.imgbox img{
width: 0;
transition: width 0.7s ease-in-out;
}
.br-0{
border-right: 0;
}
.bl-0{
border-left: 0;
}
.bt-0{
border-top: 0;
}
.bb-0{
border-bottom: 0;
}
#reset{
margin: 0 23px;
padding: 6px 14px;
background-color: #fbddfb;
border-radius: 6px;
cursor: pointer;
font-family: 'Baloo Bhaina 2';
font-size: 15px;
font-weight: bolder;
}
.buttons{
display: flex;
align-items: center;
justify-content: center;
}
.play{
margin: 0 0 0 2rem;
}
.line{
background-color: black;
height: 3px;
width: 0;
position: absolute;
background-color: #911d91;
transition: width 1s ease-in-out;
}
@media screen and (max-width: 950px) {
.gameContainer{
flex-wrap: wrap;
}
.gameInfo{
margin-top: 34px;
}
.gameInfo h1{
font-size: 1.5rem;
}
.container{
grid-template-rows: repeat(3, 20vw);
grid-template-columns: repeat(3, 20vw);
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tic-Tac-Toe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li>MyTicTacToe.com</li>
</ul>
</nav>
<div class="gameContainer">
<div class="container">
<div class="line"></div>
<div class="box bt-0 bl-0"><span class="boxtext"></span></div>
<div class="box bt-0"><span class="boxtext"></span></div>
<div class="box bt-0 br-0"><span class="boxtext"></span></div>
<div class="box bl-0"><span class="boxtext"></span></div>
<div class="box"><span class="boxtext"></span></div>
<div class="box br-0"><span class="boxtext"></span></div>
<div class="box bb-0 bl-0"><span class="boxtext"></span></div>
<div class="box bb-0"><span class="boxtext"></span></div>
<div class="box bb-0 br-0"><span class="boxtext"></span></div>
</div>
<div class="gameInfo">
<h1>Welcome to Tic Tac Toe</h1>
<div class="buttons">
<span class="info">Turn for X</span>
<button id="reset">Reset</button>
<i class="play fas fa-4x fa-circle-play"></i>
<!-- <i class="play fa-solid fa-circle-pause"></i> -->
</div>
<div class="imgbox">
<img src="/tic tac toe/tic tac toe/excited.gif" alt="excited">
</div>
</div>
</div>
<script src="https://kit.fontawesome.com/a90b59c65b.js" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>这是问题代码。
// For handling the music play....
button.addEventListener('click', ()=>{
if(music.paused){
music.play();`enter code here`
button.classList.remove("fa-play-circle");
button.classList.add("fa-pause-circle");
}
else{
music.pause();
button.classList.add("fa-play-circle");
button.classList.remove("fa-pause-circle");
}
});
我只是想让这个按钮工作。如果我点击按钮，音乐就会播放，当我想暂停时，只需点击并暂停音乐。请帮助我，解决我的问题。请解决我的问题我是一年级学生。我在计算机科学与工程专业帮助我，我是新的javascript编码到达这个问题，而编码请给我一个解决方案和帮助。
这个(你的代码)看起来应该可以工作。
let music = new Audio("https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3");
function toggle_play() {
if (music.paused) {
music.play()
} else {
music.pause()
// optional:
//music.currentTime = 0;
}
}<button onclick="toggle_play()">play/pause</button>试试这个
<script>
var playbutton = document.getElementById("play");
var pausebutton = document.getElementById("pause");
function play() {
playbutton.play();
}
function pause() {
pausebutton.pause();
}
</script>
将暂停和播放按钮分开，以便您可以测试每种方法。
这是一个修改版本的代码，https://www.geeksforgeeks.org/html-dom-audio-pause-method/#:~:text=The%20HTML%20DOM%20Audio%20pause,etc%2C%20attached%20on%20the%20audio.
查看链接。如果代码没有帮助，它可能有一些有用的东西来解决这个问题。
我明白了我的错误，并找到了解决问题的方法。这是解决方案…
playbutton.addEventListener("click", ()=>{
if(music.paused || music.currentTime <=0){
music.play();
playbutton.classList.remove("fa-play-circle");
playbutton.classList.add("fa-pause-circle");
} else {
music.pause();
playbutton.classList.remove("fa-pause-circle");
playbutton.classList.add("fa-play-circle");
}
});
现在音乐和按钮的变化是完全工作与这段代码
console.log(" Tic Tac Toe");
let music = new Audio("/tic tac toe/tic tac toe/music.mp3");
let audioTurn = new Audio("/tic tac toe/tic tac toe/ting.mp3");
let gameover = new Audio("/tic tac toe/tic tac toe/gameover.mp3");
let turn = "X";
let isgameover = false;
let playbutton = document.getElementById('play');
// let pausebutton = document.getElementsByClassName('fas fa-4x fa-circle-pause');
// function play(){
// playbutton.play();
// }
// function pause(){
// pausebutton.pause();
// }
// For handling the music play....
// function toggleplay(e){
// if(e == music.paused){
// music.play();
// }
// else {
// music.pause();
// playbutton.innerHTML = "fa-circle-play";
// }
// }
// Code for background Music...
playbutton.addEventListener("click", ()=>{
if(music.paused || music.currentTime <=0){
music.play();
playbutton.classList.remove("fa-play-circle");
playbutton.classList.add("fa-pause-circle");
} else {
music.pause();
playbutton.classList.remove("fa-pause-circle");
playbutton.classList.add("fa-play-circle");
}
});
// music.play();
// Function to change the Turn...
const changeTurn = ()=>{
return turn === "X"? "0": "X";
}
// Function to check for a win...
const checkWin = ()=>{
let boxtext = document.getElementsByClassName('boxtext');
let wins = [
[0, 1, 2, 5, 5, 0],
[3, 4, 5, 5, 15, 0],
[6, 7, 8, 5, 25, 0],
[0, 3, 6, -5, 15, 90],
[1, 4, 7, 5, 15, 90],
[2, 5, 8, 15, 15, 90],
[0, 4, 8, 5, 15, 45],
[2, 4, 6, 5, 15, 135],
]
wins.forEach(e =>{
if((boxtext[e[0]].innerText === boxtext[e[1]].innerText) && (boxtext[e[2]].innerText === boxtext[e[1]].innerText) && (boxtext[e[0]].innerText !== "") ){
document.querySelector('.info').innerText = boxtext[e[0]].innerText + " Won"
isgameover = true
document.querySelector('.imgbox').getElementsByTagName('img')[0].style.width = "200px";
document.querySelector(".line").style.transform = `translate(${e[3]}vw, ${e[4]}vw) rotate(${e[5]}deg)`
document.querySelector(".line").style.width = "20vw";
}
})
}
// music.play();
// Game Logic...
let boxes = document.getElementsByClassName("box");
Array.from(boxes).forEach(element =>{
let boxtext = element.querySelector('.boxtext');
element.addEventListener('click', ()=>{
if(boxtext.innerText === ''){
boxtext.innerText = turn;
turn = changeTurn();
audioTurn.play();
checkWin();
if (!isgameover){
document.getElementsByClassName("info")[0].innerText = "Turn for " + turn;
}
}
})
})
// Add onclick listener to Reset Button...
reset.addEventListener('click' , ()=>{
let boxtexts = document.querySelectorAll('.boxtext');
Array.from(boxtexts).forEach(element => {
element.innerText = ""
});
turn = "X";
isgameover = false
document.querySelector(".line").style.width = "0";
document.getElementsByClassName("info")[0].innerText = "Turn for " + turn;
document.querySelector('.imgbox').getElementsByTagName('img')[0].style.width = "0px"
}
)@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2&display=swap');
*{
margin: 0;
padding: 0;
}
nav{
background-color: #a60776;
color: white;
height: 65px;
font-size: 27px;
display: flex;
align-items: center;
padding: 0 12px;
font-family: 'Roboto', sans-serif;
}
nav ul{
list-style: none;
}
.gameContainer{
display: flex;
justify-content: center;
margin-top: 50px;
}
.container{
display: grid;
grid-template-rows: repeat(3, 10vw);
grid-template-columns: repeat(3, 10vw);
font-family: 'Roboto', sans-serif;
position: relative;
}
.box{
border: 2px solid black;
font-size: 8vw;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.box:hover{
background-color: rgb(249, 226, 249);
}
.info{
font-size: 22px;
}
.gameInfo{
padding: 0 34px;
font-family: 'Baloo Bhaina 2', cursive;
}
.gameInfo h1{
font-size: 2.5rem;
}
.imgbox img{
width: 0;
transition: width 0.7s ease-in-out;
}
.br-0{
border-right: 0;
}
.bl-0{
border-left: 0;
}
.bt-0{
border-top: 0;
}
.bb-0{
border-bottom: 0;
}
#reset{
margin: 0 23px;
padding: 6px 14px;
background-color: #fbddfb;
border-radius: 6px;
cursor: pointer;
font-family: 'Baloo Bhaina 2';
font-size: 15px;
font-weight: bolder;
}
.buttons{
display: flex;
align-items: center;
justify-content: center;
}
.button{
margin: 0 0 0 2rem;
}
.line{
background-color: black;
height: 3px;
width: 0;
position: absolute;
background-color: #911d91;
transition: width 1s ease-in-out;
}
@media screen and (max-width: 950px) {
.gameContainer{
flex-wrap: wrap;
}
.gameInfo{
margin-top: 34px;
}
.gameInfo h1{
font-size: 1.5rem;
}
.container{
grid-template-rows: repeat(3, 20vw);
grid-template-columns: repeat(3, 20vw);
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tic-Tac-Toe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul>
<li>MyTicTacToe.com</li>
</ul>
</nav>
<div class="gameContainer">
<div class="container">
<div class="line"></div>
<div class="box bt-0 bl-0"><span class="boxtext"></span></div>
<div class="box bt-0"><span class="boxtext"></span></div>
<div class="box bt-0 br-0"><span class="boxtext"></span></div>
<div class="box bl-0"><span class="boxtext"></span></div>
<div class="box"><span class="boxtext"></span></div>
<div class="box br-0"><span class="boxtext"></span></div>
<div class="box bb-0 bl-0"><span class="boxtext"></span></div>
<div class="box bb-0"><span class="boxtext"></span></div>
<div class="box bb-0 br-0"><span class="boxtext"></span></div>
</div>
<div class="gameInfo">
<h1>Welcome to Tic Tac Toe</h1>
<div class="buttons">
<span class="info">Turn for X</span>
<button id="reset">Reset</button>
<i class="button fas fa-4x fa-play-circle" id="play"></i>
<!-- <i class="button fas fa-4x fa-circle-pause" id="pause"></i> -->
</div>
<div class="imgbox">
<img src="/tic tac toe/tic tac toe/excited.gif" alt="excited">
</div>
</div>
</div>
<script src="https://kit.fontawesome.com/a90b59c65b.js" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>…请检查以上代码