javascript实现点击星星小游戏

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js实现漫天星星效果

    js实现漫天星星效果

    本文实例为大家分享了漫天小星星效果的实现代码,供大家参考,具体内容如下 效果图: 实现代码: <html onclick="init(event)"> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script ty

  • 基于JavaScript实现飘落星星特效

    基于JavaScript实现飘落星星特效

    本文实例为大家分享了js飘落星星特效的具体代码,供大家参考,具体内容如下 1.效果图 2.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> img{ position: absolute; } body { background-image: u

  • js实现飞入星星特效代码

    本文实例讲述了js实现飞入星星特效代码,分享给大家供大家参考. 具体实现代码如下: 复制代码 代码如下: <html> <head> <title>星空极速飞入效果</title> <style type="text/css"> <!-- body { background-color: #000066; } --> </style> </head> <body> <scr

  • javascript实现随机显示星星特效

    本文实例讲解了javascript实现随机显示星星特效的详细代码,具体内容如下 (1)网页背景是黑的  (2)星星随机大小:min=15,max=80  (3)星星的坐标是随机的:               x_left=0,x_right=(浏览器宽-星星宽)               y_top=0,y_bottom=? (4)单击某个星星,星星消失 (5)网页加载完成,开始显示星星 (6)定时器:每隔一个周期,插入一个星星 <html> <head> <meta h

  • javascript实现点击星星小游戏

    本文实例为大家分享了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{

  • javascript+css3开发打气球小游戏完整代码

    javascript+css3开发打气球小游戏完整代码

    效果知识点: css3画气球, 自定义属性运用,随机阵列, DOM元素操作,高级回调函数与参数复传,动态布局,鼠标事件,定时器运用,CSS3新增样式等. css代码如下: <style> {margin:0;padding:0;} body{background:#434343;overflow:hidden} .balloon{ position:absolute; left:0; top:0; margin:auto; width:160px; height:160px; 圆角: 左上 右

  • JavaScript 实现锅拍灰太狼小游戏

    JavaScript 实现锅拍灰太狼小游戏

    1.项目文件 2.使用HTML及css进行页面布局 HTML部分 <div class="container"> <h1 class="score">0</h1> <div class="progress"></div> <div id="start"> <h2>锅打灰太狼</h2> <button class="s

  • JS实现消灭星星小游戏

    JS实现消灭星星小游戏

    本文实例为大家分享了JS实现消灭星星小游戏的具体代码,供大家参考,具体内容如下 先看看效果图: 先准备css和一张星星图片,很简单,body背景设为黑色. <style>         body {             background-color: black;         } </style> 就直接写JS代码了,解释都写在注释里面了 <script>         function start() {             //设置一个定时器,重

  • javascript实现的猜数小游戏完整实例代码

    本文实例讲述了javascript实现的猜数小游戏.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • 纯javascript模仿微信打飞机小游戏

    纯javascript模仿微信打飞机小游戏

    七夕情人节也不要忘了打游戏喔喔-,下面小编为大家准备的情人节礼物之纯javascript模仿微信打飞机小游戏分享给天下的情人们. 首先给大家展示效果图: 查看演示      源码下载 纯JavaScript模仿微信打飞机游戏,做网页小游戏的借鉴下,界面设计是竖长形仿手机屏幕风格,游戏效果流畅.具有分数统计,里面的JS封装类中包括有创建飞机类.飞机移动行为控制,创建子弹类,产生min到max之间的随机数,判断本方飞机是否移出边界,如果移出边界,则取消mousemove事件,反之加上mousemov

  • JavaScript写个贪吃蛇小游戏(超详细)

    贪吃蛇大家都玩过,但你会制作嘛?听起来好像很难的样子,其实非常的简单,话不多说直接上代码 我们先把dom结构写出来 <div id="content"> <div id="snake"> <div class="box head"></div> <div class="box"></div> </div> </div> 其中,con

  • JavaScript实现气球打字的小游戏

    JavaScript实现气球打字的小游戏

    目录 一.实现效果 1.定义球的类 二.源码仓库和效果 一.实现效果 1.定义球的类 气球类中我们需要对26个字符进行处理 this.arr = "abcdefghijklmnopqrstuvwxyz".split(""); 生成一个随机字母 this.index = parseInt(Math.random() * this.arr.length); // 定义随机字符 this.str = this.arr[this.index]; 生成一个div标签并对图片进

  • javascript实现简单飞机大战小游戏

    javascript实现简单飞机大战小游戏

    本文实例为大家分享了javascript实现飞机大战小游戏的具体代码,供大家参考,具体内容如下 效果图 html文件 <!DOCTYPE html><html lang='zh'><head>    <meta charset='UTF-8'>    <title>mm</title>    <link rel="stylesheet" href="./css/index.css">

  • 基于javascript实现贪吃蛇经典小游戏

    本文实例为大家分享了JS实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt

随机推荐