介绍 & lt; head>
,& lt; meta charset=癠TF-8"比;
,& lt; title> Document
,& lt; style 类型=拔谋?css"比;
,# d2 {
,宽度:100 px;
,高度:20 px;
,边界:1 px solid 红色;
,显示:inline-block;
,}
,# d3 {
,显示:inline-block;
,背景:黄色;
,高度:20 px;
,}
,& lt;/style>
,& lt; script 类型=拔谋?javascript"比;
& lt; !
,var dingshiqi;//定时器
,var 数=0;//记录星星的个数
,var n=0;//记录游戏时间的变量。
,var sj;//时间定时器(解决一直按开始游戏错误)
,function StarGame(){,//开始游戏
,window.clearInterval (sj);,//清除时间定时器
,window.clearInterval (dingshiqi);//清楚定时器
,dingshiqi=setinterval(“星()“,400);
,sj=setinterval (“shijian ()“, 1000);
,}
,//创建星星
,function 明星(){
,var obj=document.createElement (“img");
,//给星星添加src属性
,obj.src=https://www.yisu.com/zixun/癷mage.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=熬浴?
obj.style.top=y +“px”;
obj.style.left=x +“px”;//放到身体中
document.body.appendChild (obj);//添加onclick点击事件(绑定的onclick不需要加“,”)
obj.οnclick=removeStar;//控制大于20个星星游戏结束
数+ +;
var sp=. getelementbyid (d3);
sp.style.width=数* 5 +“px”;
如果(数> 20){
alert("大于20个星星游戏结束”);
window.clearInterval (dingshiqi);
location.reload ();//重新加载
}//放到身体中
document.body.appendChild (obj);
}//点击删除星星
函数removeStar () {
this.parentNode.removeChild(这个);
数,//点击星星删除,都要把1。
var sp=. getelementbyid (d3);
sp.style.width=数* 5 +“px”;
}//点击暂停游戏。
函数桑特岛(){
alert("暂停游戏”);
}//记录游戏时间的函数
函数shijian () {
n + +;
var obj=. getelementbyid (d1);
obj.innerHTML="游戏进行了”+ n +“秒”
}//- ->
游戏进行了0秒
<跨度id=" d3 ">
身体
这篇文章将为大家详细讲解有关javascript如何实现点击星星小游戏,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
具体内容如下