本文详细介绍如何使用 JavaScript、HTML 和 CSS 开发一个简单的点击星星互动游戏。内容涵盖项目文件结构准备、核心逻辑实现及代码优化建议，提供完整的可运行代码示例，适合前端初学者学习 DOM 操作与事件处理。
项目概述与功能说明
本文分享了一个使用 JavaScript 编写的点击星星游戏的完整实现方案，供读者参考学习。
功能简介
游戏机制如示意图所示，主要玩法为通过点击操作进行互动。
资源准备与文件结构
资源准备
需要一张星星形状的图片素材，示例中将其重命名为 xxx.png。
代码实现与优化建议
开发步骤
创建一个 HTML 文件，并将该图片放置在同一目录下。虽然文件较多时不建议如此管理，但本项目仅涉及少量文件，这样处理即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小星星游戏</title>
</head>
<style>
body{
background-color: black;
}
meter{
width:100%;
}
#title{
width:100%;
position: relative;
text-align: center;
color: #ffffff;
}
#score{
position: absolute;
top:0;
left:90%;
width:10%;
color: #ffffff;
}
#jindu{
padding:0 33%;
}
span{
display: block;
text-align: center;
}
span > button{
width:20%;
}
</style>
<body>
<div><h1 id="title">小星星游戏</h1></div>
<div><h1 id="score">得分:</h1></div>
<div id="jindu">
<span>
<meter id="meter" min="0" max="100"></meter>
</span>
<span>
<button onclick="start()">开始</button>
<button onclick="restart()">重玩</button>
</span>
</div>
<script>
var c = 0;
function start(){
//console.log("调用");
//周期的调用函数，0.2s
t1 = window.setInterval(show,200)
}
var meter = document.getElementById("meter");
meter.value=0;
var j =0;
function show(){
meter.value+=5;
// console.log(meter.value)
if(j<=meter.value){
j=meter.value;
}else{
window.clearInterval(t1)
}
if(j==100){
j=101;
alert("游戏结束,共消除了"+c+"个小星星");
window.clearInterval(t1)
}
var img = document.createElement('img');
img.src='xxx.png';
img.style.position="absolute";
//math.floor向下取整
var w = Math.floor(Math.random()*(100-20+1)+20);
var l = Math.floor(Math.random()*(1500-20+1)+20);
var t = Math.floor(Math.random()*(600-150+1)+150);
img.width = w;
img.style.top = t+"px";
img.style.left = l+"px";
document.body.appendChild(img);
img.onclick =rem;
}
function rem() {
//通过父元素删除子节点
this.parentNode.removeChild(this);
var score= document.getElementById("score")
if(meter.value!=100){
meter.value-=8;
j-=8;
c++;
score.innerText="得分:"+c;
}
}
function restart(){
//重新载入当前文档
location.reload();
}
</script>
</body>
</html>项目收尾
为了代码结构清晰，CSS 样式和 JavaScript 逻辑可以分别写入独立文件，但务必在 HTML 中正确引入这些外部资源。
<link href = "css文件路径" rel = "stylesheet">
<script src="js文件路径" type="text/javascript"></script>如需了解更多 JavaScript 游戏开发技巧，可查阅相关专题《JavaScript 经典游戏 玩不停》。
以上就是本文的全部内容，希望能为读者的学习提供有益帮助，同时也欢迎大家继续支持本站。