HTML Random Box Game: Click and Move
<!DOCTYPE html>
<html>
<head>
<title>Random Box Game</title>
<style>
#container {
width: 500px;
height: 500px;
border: 1px solid black;
}
#box {
width: 100px;
height: 100px;
position: absolute;
}
</style>
</head>
<body>
<h1>Random Box Game</h1>
<div id='container'>
<div id='box'></div>
</div>
<script>
//Create a random number between 0 and 400
let randomNumber = Math.floor(Math.random() * 400);
//Set the left and top css properties of the box
document.getElementById('box').style.left = randomNumber + 'px';
document.getElementById('box').style.top = randomNumber + 'px';
//Create a click event on the box
document.getElementById('box').addEventListener('click', function() {
//Create a new random number
let randomNumber = Math.floor(Math.random() * 400);
//Apply the random number to the left and top css properties
this.style.left = randomNumber + 'px';
this.style.top = randomNumber + 'px';
});
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmsa 著作权归作者所有。请勿转载和采集!