打怪升级js，随机产生一只苍蝇，点击消失

这个是body部分，只有简单的东西

<h4>你的分数</h4>

<span id="sorce">

0

</span>

<button>开始</button>

这个是js部分

<script>

//设置一个变量表示分数,count表示计数

var sorces=0,count=0;

var btn1=document.querySelector('button');

var kaishi;

btn1.οnclick=function(){

//调试代码的时候这个时间间隔可以设置短一点

kaishi=window.setInterval("show()",1000);

}

function show(){

count++;

//产生随机坐标X,Y

var left1= Math.random(0.2,0.8)*500;

var top1=Math.random(0.2,0.8)*500;

//为img绑定事件

var img=document.createElement('img');

//创建图片

document.body.appendChild(img);

img.setAttribute("src","https://static.ntimg.cn/original/images/zhaohang_logo.png");

img.setAttribute("width",50+"px");

img.setAttribute("style","position: absolute");

img.style.left=left1+'px';

img.style.top=top1+'px';

img.setAttribute("onclick","remove(this)");

if(count>10){

var body=document.querySelector("body");

alert("游戏结束");

count=0;

//刷新页面的方法清除苍蝇,感觉比较low就没用

// window.location.reload();

//调用函数把图片全删除，然后停止生成苍蝇

removeall(body);

}

}

function remove(bird){

sorces++;

count--;

document.body.removeChild(bird);

console.log("clear");

document.getElementById('sorce').innerHTML=sorces;

}

//清除苍蝇函数

function removeall(parent){

while (parent.lastChild!=document.querySelector('button')) {

parent.removeChild(parent.lastChild);

}

//关闭定时器，这样就不会继续产生苍蝇了

clearInterval(kaishi);

//将span标签重新设置成0，不然虽然数据是0，但是显示出来的东西还是上次的分数

document.getElementById('sorce').innerHTML='0';

sorces=0;

count=0;

}

</script>

全部代码为下面，可以复制先行调试理解

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<h4>你的分数</h4>

<span id="sorce">

0

</span>

<button>开始</button>

<script>

//设置一个变量表示分数,count表示计数

var sorces=0,count=0;

var btn1=document.querySelector('button');

var kaishi;

btn1.οnclick=function(){

//调试代码的时候这个时间间隔可以设置短一点

kaishi=window.setInterval("show()",1000);

}

function show(){

count++;

//产生随机坐标X,Y

var left1= Math.random(0.2,0.8)*500;

var top1=Math.random(0.2,0.8)*500;

//为img绑定事件

var img=document.createElement('img');

//创建图片

document.body.appendChild(img);

img.setAttribute("src","https://static.ntimg.cn/original/images/zhaohang_logo.png");

img.setAttribute("width",50+"px");

img.setAttribute("style","position: absolute");

img.style.left=left1+'px';

img.style.top=top1+'px';

img.setAttribute("onclick","remove(this)");

if(count>10){

var body=document.querySelector("body");

alert("游戏结束");

count=0;

//刷新页面的方法清除苍蝇,感觉比较low就没用

// window.location.reload();

//调用函数把图片全删除，然后停止生成苍蝇

removeall(body);

}

}

function remove(bird){

sorces++;

count--;

document.body.removeChild(bird);

console.log("clear");

document.getElementById('sorce').innerHTML=sorces;

}

//清除苍蝇函数

function removeall(parent){

while (parent.lastChild!=document.querySelector('button')) {

parent.removeChild(parent.lastChild);

}

//关闭定时器，这样就不会继续产生苍蝇了

clearInterval(kaishi);

//将span标签重新设置成0，不然虽然数据是0，但是显示出来的东西还是上次的分数

document.getElementById('sorce').innerHTML='0';

sorces=0;

count=0;

}

</script>

</body>

</html>

打怪升级js，随机产生一只苍蝇，点击消失相关推荐

JS实现小球碰撞边界反弹-点击消失（详细解析实现思路）
本篇文章给大家带来的是原生JS实现小球碰到边界就反弹,点击小球时小球被会销毁,并重新创建一个小球,让小球的数量一直保持在初始的数量,按照思路按步骤进行讲解,只需要源码的小伙伴可以定位到文本末尾直接复制 ...
程序猿菜鸟打怪升级—一路火花带闪电
文章目录一. 昨夜西风凋碧树,独上高楼,望尽天涯路二. 衣带渐宽终不悔,为伊消得人憔悴三.众里寻他千百度,蓦然回首,那人却在,灯火阑珊处 [告别平庸的9个方法] 各位小伙伴,大家好!我是猿人谷, ...
打怪升级之小白的大数据之旅(六十一)＜Hive旅程第二站:Hive安装＞
打怪升级之小白的大数据之旅(六十一) Hive旅程第二站:Hive安装上次回顾上一章我们学习了Hive的概念以及框架原理,本章节是对Hive的安装进行分享,因为它有些需要自己配置的点,所以我单独开 ...
2022.5.16-5.22 AI行业周刊（第98期）：人生路上的打怪升级
上周末看到一个新闻,2022年博士研究生招生人数突破13万人数大关,而硕士生超过100多万,文章链接. 看到这个数字,感觉未来人才竞争和内卷化的程度,愈加激烈. 当然在这背后,是国家对于扩招计划的调控 ...
打怪升级之小白的大数据之旅(四十六)＜HDFS各模块的原理＞
打怪升级之小白的大数据之旅(四十六) HDFS各模块的原理上次回顾上一章,我们学习了HDFS的基本知识以及一些常用的操作,本章,我们对HDFS各模块的原理进行讲解,了解清楚这些,可以更好的辅助我们 ...
cocos2d-html5 -- 打怪升级之路
参考:http://www.cocoachina.com/bbs/read.php?keyword=cocos2d&tid=152450 管理提醒: 本帖被 gagaga 从苹果开发者综合议 ...
基于Java多线程的打怪升级类游戏设计与开发
摘要:本文论述了通过JAVA多线程.基于JAVA Swing的GUI图形用户界面设计.IO输入输出流.JDBC技术,实现了游戏系统的UI设计.游戏数据的存储.关卡的设置.用户头像的上传与更改.游戏数据 ...
Android 开发--利用android studio 制作简单文字打怪升级游戏（伪地牢类）2.主页面及部分事件设计
时隔大半年,总算抽出时间更新这个博客了.去年下半年因为大四忙着备战考研,一直没有心情将第二篇继续更新,今年上半年又忙着搞毕业设计,焦头烂额了属于是orz 由于我的android studio的模拟器实 ...
详解Linux运维工程师打怪升级篇
详解 Linux 运维工程师打怪升级篇积累经验篇做运维也快4年多了,就像游戏打怪升级,升级后知识体系和运维体系也相对变化挺大,学习了很多新的知识点. 运维工程师是从一个呆逼进化为苦逼再成长为牛逼 ...

打怪升级js，随机产生一只苍蝇，点击消失

打怪升级js，随机产生一只苍蝇，点击消失相关推荐

最新文章

热门文章