javascript实现点击星星小游戏


Posted in Javascript onDecember 24, 2019

本文实例为大家分享了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 大数据相加的问题
Aug 03 Javascript
Notify - 基于jquery的消息通知插件
Oct 18 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
Javascript中call,apply,bind方法的详解与总结
Dec 12 Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 Javascript
JS实现使用POST方式发送请求
Aug 30 Javascript
这样回答继承可能面试官更满意
Dec 10 Javascript
vue-router定义元信息meta操作
Dec 07 Vue.js
JS实现小星星特效
Dec 24 #Javascript
JS实现星星海特效
Dec 24 #Javascript
JS实现图片切换特效
Dec 23 #Javascript
JS实现简易留言板特效
Dec 23 #Javascript
JS实现关闭小广告特效
Jan 29 #Javascript
vue element-ui实现动态面包屑导航
Dec 23 #Javascript
vue实现图片上传预览功能
Dec 23 #Javascript
You might like
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
PHP url 加密解密函数代码
2011/08/26 PHP
php中防止伪造跨站请求的小招式
2011/09/02 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
js表格分页实现代码
2009/09/18 Javascript
Javascript调用C#代码
2011/01/17 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
jquery中radio checked问题
2015/03/16 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
Python列表生成器的循环技巧分享
2015/03/06 Python
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
美国婚礼装饰和活动用品批发供应商:Event Decor Direct
2018/10/12 全球购物
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
大学生水文观测实习自我鉴定
2013/09/29 职场文书
优良学风班申请材料
2014/02/13 职场文书
开学季活动策划方案
2014/02/28 职场文书
丧事主持词大全
2014/04/02 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书
Python访问Redis的详细操作
2021/06/26 Python