HTML Pony Race Game: Simple and Fun
<html>
<head>
<title>Pony Race Game - Simple and Fun</title>
<style>
/* Styling for the game elements */
#track {
width: 500px;
height: 300px;
position: relative;
background: #ccc;
border: 10px solid #000;
margin: 0 auto;
}
#pony1, #pony2 {
position: absolute;
width: 50px;
height: 50px;
background: #000;
border-radius: 50%;
}
</style>
</head>
<body>
<h1>Pony Race</h1>
<!-- This is the track where the ponies will race -->
<div id='track'></div>
<!-- The ponies will be placed here -->
<div id='pony1'></div>
<div id='pony2'></div>
<script>
// This is the function that will control the game
function race() {
// Get the track element
let track = document.getElementById('track');
// Get the ponies
let pony1 = document.getElementById('pony1');
let pony2 = document.getElementById('pony2');
// Place the ponies at the start of the race
pony1.style.left = '0px';
pony2.style.left = '0px';
// Start the race
let raceInterval = setInterval(() => {
// Increase the position of the ponies
let pony1Position = parseInt(pony1.style.left);
let pony2Position = parseInt(pony2.style.left);
pony1.style.left = (pony1Position + Math.random() * 10) + 'px';
pony2.style.left = (pony2Position + Math.random() * 10) + 'px';
// Check if one of the ponies has passed the finish line
if (pony1Position > track.offsetWidth - pony1.offsetWidth) {
alert('Pony 1 has won the race!');
clearInterval(raceInterval);
} else if (pony2Position > track.offsetWidth - pony2.offsetWidth) {
alert('Pony 2 has won the race!');
clearInterval(raceInterval);
}
}, 20);
}
// Start the race when the page is loaded
window.addEventListener('load', race);
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmcd 著作权归作者所有。请勿转载和采集!