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>

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

html,css,js写消灭小星星游戏相关推荐

h5游戏开发：用html+css+js写一个整蛊游戏
文章目录我来做一个简单的整蛊游戏吧! 第一步,先设计骰子第二步,设计行走的格子第三步,加入主角头像第四步,开始写游戏js控制代码最终结果,所有代码 (复制粘贴后改下图片路径和音乐媒体路径后就 ...
广度优先搜索算法的典型应用——消灭小星星游戏的核心代码实现与解析
说明:本文的代码参考了网络上下载的源代码:<2013.3.25 游戏开发基地--孙广东消灭小星星>,在此对原作者表示衷心感谢! 这几天在看算法导论里面的BFS和DFS,于是发现消灭小星星 ...
利用html css javascript写翻翻乐小游戏
利用html css javascript写翻翻乐小游戏废话不多说,先看效果代码放到文章末尾,不想看代码解释的可以直接跳过到后面直接下载我写这个小游戏的过程 1.准备图片我在觅元素上找了 ...
用js写卡牌游戏（一）
用js写卡牌游戏(一) 不想看废话的点这直接看代码的点这废话(前言) 现在游戏多了,不过总是感觉不太对自己的口味,每个游戏都感觉和自己想象中的要差了那么一点点,所以我决定尝试着自己写一个游戏. 因 ...
用Three.js写h5小游戏-3d飞机大战
用Three.js写h5小游戏-飞机大战博主的话运行图片目录路径![在这里插入图片描述](https://img-blog.csdnimg.cn/20190829103702978.jpg?x- ...
html+css+js实现网页拼图游戏
代码地址如下: http://www.demodashi.com/demo/14449.html 项目描述使用 html+js+css 实现一个网页拼图游戏,可支持简单,中等,困难三种难度. 演示效 ...
html+css+js写抽奖程序
html+css+js写抽奖程序简介:本文讲解,如何使用html+css+js写抽奖程序,后面也会加上后端,记录每一次的抽奖的结果. HTML结构这个html结构就十分的简单,几行而已. < ...
渡一教育公开课web前端开发JavaScript精英课学习笔记（三十一）JavaScript消灭小星星游戏
JavaScript消灭小星星游戏 <!DOCTYPE html> <html lang="en"><head><meta charset ...
用js写卡牌游戏（八）
前言好久不见,离发布上次分享,已经过去很久很久了,这段时间发生了很多变故,经历了跳槽.离职.创业等等,手头也一直有很多事情在忙,不过鸽这么久其实是有别的理由,有一个非常重要的功能一直卡住,没有思路, ...

html,css,js写消灭小星星游戏

HTML代码段

css代码段

js代码段

html,css,js写消灭小星星游戏相关推荐

最新文章

热门文章