黑马程序员济南中心php第10天教程

《黑马程序员济南中心php第10天教程》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、【济南中心】PHP课程同步笔记day06：JS小游戏通过前几周的学习我们对JS有一定的了解，今天的内容就是将之前的学习的内容在小游戏中应用，希望大家能够在小游戏中进一步提升自己的js水平。JS小游戏：满天都是小星星：代码:

2、g/1999/xhtml"xml:lang="zh-cn">#span1{border:1pxsolidred;width:100px;display:inline-block;height:20px;overflow:hidden;}#span2{display:inlin

3、e-block;width:0px;height:20px;}varcount=0;//代表星星的个数vardingshiqi;//定时器名字varshijian=0;//时间vargametime;//记录游戏时间定时器//设置body的颜色window.onload=init;functioninit(){//document.body.bgColor="black";}//vardingshiqi=window.setI

4、nterval("star()",500);//创建星星的函数functionstar(){//创建星星varobj=document.createElement("img");obj.src="images/xingxing.gif";//设置星星的宽度varw=Math.floor(Math.random()*(90-30+1))+30;obj.width=w;//设置随即位置//varx=e.clientX;//鼠标的x坐标//vary=e.clientY;//鼠标的y坐标varx=Math.f

5、loor(Math.random()*1300)+30;vary=Math.floor(Math.random()*500)+30;obj.style.position="absolute";obj.style.top=y+"px";obj.style.left=x+"px";//把obj加到body中document.body.appendChild(obj);//给对象绑定事件obj.onclick=removestar;//记录星星个数count++;//调用函数告诉玩家有多少个星星countx

6、ingxing();//改变进度条document.getElementById("span2").style.width=count*5+"px";document.getElementById("span2").style.backgroundColor="red";}//删除星星的函数functionremovestar(){this.parentNode.removeChild(this);count--;countxingxing();}//点击开始游戏的函数functionstartxin

7、gxing(){dingshiqi=window.setInterval("star()",500);gametime=window.setInterval("youxishijian()",1000);}//暂停游戏functionzanting(){alert("暂停游戏");}//星星个数functioncountxingxing(){varshu=document.getElementById("count");if(count>20){alert("游戏结束");window.clearIn

8、terval(dingshiqi);window.clearInterval(gametime);}shu.innerHTML=count+"个星星";}//记录游戏时间functionyouxishijian(){varobj=document.getElementById("jishi");shijian++;obj.innerHTML="游戏进行"+shijian+"秒";}