用javascript写的一个小游戏，点击小球，小球就会随机变位置，代码简单。感兴趣的话你也来试一下吧！
游戏内容
分数：0
剩余时间：60
源代码
<!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>嘿！你点击我我就跑</title>
<style>
#map {
width: 500px;
height: 500px;
background-color: cadetblue;
border: 5px solid rgb(224, 125, 32);
margin: 0 auto;
position: relative;
}
.fenshu {
width: 500px;
margin: 0 auto;
margin-top: 10%;
}
#npc {
width: 10px;
height: 10px;
background-color: rgb(245, 245, 245);
margin-left: 1%;
margin-top: 2%;
border-radius: 50%;
transition-duration:0.5s;
position: absolute;
left: 10%;
top: 10%;
}
#begingame {
width: 70px;
height: 50px;
margin: 0 auto;
margin-top: 44%;
}
button.playgame {
padding: 10px 15px;
background: beige;
border: 1px solid rgb(67 25 207);
}
</style>
</head>
<body>
<div class="fenshu">
<p>分数：<span id = "score">0</span></p>
<p>剩余时间：<span id="time">60</span></p>
</div>
<div id="map">
<div id="npc" onclick="clickNpc()"></div>
<div id="begingame"><button class="playgame" onclick="beginGame()">开始游戏</button></div>
</div>
<script>
function beginGame(){
// 点击后首先将按钮隐藏掉
document.getElementById("begingame").style.display="none";
let count = 60; //倒计时开始的秒数
let countdown = setInterval(
function(){
if(count == 0){
document.getElementById("begingame").style.display="block";
// 弹出最终得分
alert("游戏结束,您的分数为：" + x);
// 重新加载页面
location.reload();
}
count--;
document.getElementById("time").innerHTML = count;
},1000);//倒计时增量
// 自动改变球的大小和位置，延迟时间为1秒
setInterval(function (){
let w = Math.floor(Math.random() * (50 - 20) ) + 20;
let b = Math.floor(Math.random() * (460 - 5) ) + 5;
let c = Math.floor(Math.random() * (460 - 5) ) + 5;
document.getElementById("npc").style.width = w + "px";
document.getElementById("npc").style.height =w + "px";
document.getElementById("npc").style.top = b + "px";
document.getElementById("npc").style.left = c + "px";
},"1000");
}
var x= 0;
function clickNpc(){
// 当点击到球时，球的位置和大小都发生改变
let w = Math.floor(Math.random() * (50 - 20) ) + 20;
let b = Math.floor(Math.random() * (460 - 5) ) + 5;
let c = Math.floor(Math.random() * (460 - 5) ) + 5;
document.getElementById("npc").style.width = w + "px";
document.getElementById("npc").style.height =w + "px";
document.getElementById("npc").style.top = b + "px";
document.getElementById("npc").style.left = c + "px";
// 记录当前的得分
x++;
document.getElementById("score").innerHTML = x;
}
</script>
</body>
</html>