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

最新推荐文章于 2024-08-10 16:15:00 发布

ZIP953

最新推荐文章于 2024-08-10 16:15:00 发布

阅读量230

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/weixin_60648725/article/details/121755290

版权

javascript p2p linq

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这个是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>