html css js写消灭小星星游戏

首先，要写一个消灭小星星，必须考虑到有开始和重新开始两个功能，当点击小星星的时候，小星星消失，而且记录的分数随着小星星的消失而增加

HTML代码段

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%;}

css代码段

meter是HTML的新标签，定义度衡量的，规定最大最小值。还有，当点击开始按钮时，游戏开始，星星开始随机出现，当然，点击重玩时，清理界面，重新开始

<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>

js代码段

定时器setInterval有两个参数，一个是执行的函数，一个等待的时间

<script>var c = 0;function start(){//console.log("调用");//周期的调用函数，0.2st1 = 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='1.jpg';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>

有什么疑问的，或者建议的欢迎留言在下方评论区