首先,要写一个消灭小星星,必须考虑到有开始和重新开始两个功能,当点击小星星的时候,小星星消失,而且记录的分数随着小星星的消失而增加
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>
有什么疑问的,或者建议的欢迎留言在下方评论区