Random Game in HTML: Simple and Fun
<!DOCTYPE html>
<html>
<head>
<title>Random Game in HTML</title>
<style>
body {
background-color: #000;
}
<pre><code>#game {
background-color: #fff;
border-radius: 5px;
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#game img {
width: 100%;
height: 100%;
border: 0;
}
#game button {
width: 50px;
height: 50px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border: 0;
}
</code></pre>
</style>
</head>
<body>
<div id='game'>
<img src='http://placehold.it/300x300' alt='Random Game'>
<button onclick='playGame()'>Play</button>
</div>
<script>
function playGame() {
// Generate a random number between 0 and 1
let randomNumber = Math.random();
<pre><code> // If the number is greater than 0.5, show a success message
if (randomNumber > 0.5) {
alert('You won!');
}
// If the number is less than 0.5, show a failure message
else {
alert('You lost!');
}
}
</code></pre>
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmsk 著作权归作者所有。请勿转载和采集!