サッカーのゲーム
Soccer Game
Let's Play Soccer!
Team A
Goals: 0
Score Board
Team A: 0
Team B: 0
Team B
Goals: 0
<!DOCTYPE html>
<html>
<head>
<title>Soccer Game</title>
<style>
body {
background-color: green;
}
h1 {
color: white;
text-align: center;
margin-top: 50px;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
margin-top: 50px;
}
.team {
display: flex;
flex-direction: column;
align-items: center;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
}
h2 {
color: black;
margin-top: 0;
}
p {
color: gray;
margin-top: 5px;
font-size: 18px;
}
button {
background-color: blue;
border: none;
color: white;
padding: 10px 20px;
border-radius: 5px;
margin-top: 10px;
cursor: pointer;
}
.score {
display: flex;
flex-direction: column;
align-items: center;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
margin-left: 50px;
}
.score h2 {
color: black;
margin-top: 0;
font-size: 40px;
}
.score img {
width: 50px;
height: 50px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Let's Play Soccer!</h1>
<div class="container">
<div class="team">
<img src="https://i.pinimg.com/originals/3b/13/f7/3b13f7488c57e4e1c4f6d5b6cf8ca6ce.png" alt="team-logo">
<h2>Team A</h2>
<p>Goals: <span id="goals-a">0</span></p>
<button onclick="score('a')">Score Goal</button>
</div>
<div class="score">
<img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/football-scoreboard-1654608-1408451.png" alt="ball">
<h2>Score Board</h2>
<p>Team A: <span id="score-a">0</span></p>
<p>Team B: <span id="score-b">0</span></p>
<button onclick="reset()">Reset</button>
</div>
<div class="team">
<img src="https://freepngimg.com/thumb/football/42554-9-football-clipart.png" alt="team-logo">
<h2>Team B</h2>
<p>Goals: <span id="goals-b">0</span></p>
<button onclick="score('b')">Score Goal</button>
</div>
</div>
<script>
let scoreA = 0;
let scoreB = 0;
let goalsA = 0;
let goalsB = 0;
function score(team) {
if (team === 'a') {
scoreA += 1;
goalsA += 1;
document.getElementById('score-a').innerHTML = scoreA;
document.getElementById('goals-a').innerHTML = goalsA;
} else {
scoreB += 1;
goalsB += 1;
document.getElementById('score-b').innerHTML = scoreB;
document.getElementById('goals-b').innerHTML = goalsB;
}
document.body.style.backgroundColor = randomColor();
}
function reset() {
scoreA = 0;
scoreB = 0;
goalsA = 0;
goalsB = 0;
document.getElementById('score-a').innerHTML = scoreA;
document.getElementById('score-b').innerHTML = scoreB;
document.getElementById('goals-a').innerHTML = goalsA;
document.getElementById('goals-b').innerHTML = goalsB;
document.body.style.backgroundColor = 'green';
}
// This is a joke related to the content of the application
function randomColor() {
const colors = ['red', 'blue', 'yellow', 'purple', 'orange'];
return colors[Math.floor(Math.random() * colors.length)];
}
</script>
</body>
</html>