javascript实现点击星星小游戏
2019-12-25 12:03
1566 查看
本文实例为大家分享了JavaScript实现点击星星的具体代码,供大家参考,具体内容如下
<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #d2{ width:100px; height:20px; border:1px solid red; display:inline-block; } #d3{ display:inline-block; background:yellow; height:20px; } </style> <script type="text/javascript"> <!-- var dingshiqi; //定时器 var count=0; //记录星星的个数 var n=0; //记录游戏时间的变量。 var sj; //时间定时器(解决一直按开始游戏bug) function StarGame(){ //开始游戏 window.clearInterval(sj); //清除时间定时器 window.clearInterval(dingshiqi);//清楚定时器 dingshiqi=window.setInterval("star()",400); sj=window.setInterval("shijian()",1000); } //创建星星 function star(){ var obj=document.createElement("img"); //给星星添加src属性 obj.src="image.png" //随机星星大小 var w=Math.floor(Math.random()*80+20); obj.width=w; obj.height=w; //随机位置 var x=Math.floor(Math.random()*1166+100); var y=Math.floor(Math.random()*500+100); obj.style.position="absolute"; obj.style.top=y+"px"; obj.style.left=x+"px"; //放到body中 document.body.appendChild(obj); //添加onclick点击事件(绑定的onclick 不需要加";") obj.οnclick=removeStar; //控制大于20个星星游戏结束 count++; var sp=document.getElementById("d3"); sp.style.width=count*5+"px"; if(count>20){ alert("大于20个星星游戏结束"); window.clearInterval(dingshiqi); location.reload(); //重新加载 } //放到body中 document.body.appendChild(obj); } //点击删除星星 function removeStar(){ this.parentNode.removeChild(this); count--; //点击星星删除,都要count-1. var sp=document.getElementById("d3"); sp.style.width=count*5+"px"; } //点击暂停游戏。 function zanting(){ alert("暂停游戏"); } //记录游戏时间的函数 function shijian(){ n++; var obj=document.getElementById("d1"); obj.innerHTML="游戏进行了"+n+"秒" } //--> </script> </head> <body> <input type="button" value="开始游戏" οnclick="StarGame()"> <input type="button" value="暂停游戏" οnclick="zanting()"> <span id="d1">游戏进行了0秒</span> <span id="d2"><span id="d3"></span></span> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- JavaScript基础——点击星星小游戏
- javascript实现消灭星星小游戏简单版
- javascript实现消灭星星小游戏简单版
- 纯JavaScript 实现flappy bird小游戏实例代码
- javascript实现随机显示星星特效
- javascript实现随机显示星星特效
- javascript 实现图片轮播和点击切换功能
- javascript实现一个按钮,点击按钮拷贝电脑指定路径到u盘(并在U盘上创建新的文件夹)
- javascript实现点击鼠标右键全选表格行的所有checkbox
- javascript实现2048小游戏
- JavaScript给每一个li节点绑定点击事件的实现方法
- JavaScript实现点击按钮直接打印
- JavaScript实现简单的图片轮播(通过点击数字切换)
- JavaScript访问剪切板,实现“点击按钮后,复制自己想要复制的文本“
- 仿开心消消乐 大树星星无限循环 点击(自定义view实现)
- javascript实现鼠标点击生成文字特效
- javascript实现点击按钮让DIV层弹性移动的方法
- JavaScript, 实现贪吃蛇小游戏
- 基于JavaScript实现点击页面任何位置返回
- JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里