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多种数据类型表格排序代码分析
Sep 11 Javascript
简单的jquery拖拽排序效果实现代码
Sep 20 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
Oct 30 Javascript
JS基于Mootools实现的个性菜单效果代码
Oct 21 Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 Javascript
jQuery使用$.ajax进行即时验证的方法
Dec 08 Javascript
JS简单获取及显示当前时间的方法
Aug 03 Javascript
Ajax的概述与实现过程
Nov 18 Javascript
Vue实现自定义下拉菜单功能
Jul 16 Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
May 16 Javascript
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
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
PHP has encountered an Access Violation
2007/01/15 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
js实现随机点名小功能
2017/08/17 Javascript
深入浅析ES6 Class 中的 super 关键字
2017/10/20 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
详解webpack require.ensure与require AMD的区别
2017/12/13 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
react-native封装插件swiper的使用方法
2018/03/20 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
JavaScript生成指定范围随机数和随机序列的方法
2018/05/05 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
JS如何生成动态列表
2020/09/22 Javascript
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
Python 利用内置set函数对字符串和列表进行去重的方法
2018/06/29 Python
python实现简单成绩录入系统
2019/09/19 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
导致python中import错误的原因是什么
2020/07/01 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
当当网软件测试笔试题
2015/11/24 面试题
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
聘任证明怎么写
2015/03/02 职场文书
东京审判观后感
2015/06/01 职场文书
远程教育学习心得体会
2016/01/23 职场文书
redis 存储对象的方法对比分析
2021/08/02 Redis