黑马程序员_PHP_课程同步笔记day10：JS小游戏由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“黑马程序员php笔记”。
【黑马程序员】PHP课程同步笔记day10：JS小游戏
通过前几周的学习我们对JS有一定的了解，今天的内容就是将之前的学习的内容在小游戏中应用，希望大家能够在小游戏中进一步提升自己的js水平。JS小游戏：
满天都是小星星： 代码:
PUBLIC
“-//W3C//DTD
XHTML
1.0
Transitional//EN” “http://1/DTD/xhtml1-transitional.dtd”>
满天都是小星星
#span1{
} #span2{ display:inline-block;border:1px solid red;width:100px;display:inline-block;height:20px;overflow:hidden;
黑马程序员济南中心 编著
} width:0px;height:20px;
var count=0;//代表星星的个数 var dingshiqi;//定时器名字 var shijian=0;//时间
var gametime;//记录游戏时间定时器
//设置body的颜色
window.onload=init;function init(){ } //var dingshiqi=window.setInterval(“star()”,500);//创建星星的函数 function star(){
//创建星星
var obj=document.createElement(“img”);obj.src=“images/xingxing.gif”;//设置星星的宽度
var w=Math.floor(Math.random()*(90-30+1))+30;//document.body.bgColor=“black”;
黑马程序员济南中心 编著
} obj.width=w;//设置随即位置
//var x=e.clientX;//鼠标的x坐标 //var y=e.clientY;//鼠标的y坐标
var x=Math.floor(Math.random()*1300)+30;var y=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++;//调用函数告诉玩家有多少个星星 countxingxing();//改变进度条
document.getElementById(“span2”).style.width=count*5+“px”;document.getElementById(“span2”).style.backgroundColor=“red”;//删除星星的函数
黑马程序员济南中心 编著
function removestar(){
} //点击开始游戏的函数 function startxingxing(){
} //暂停游戏 function zanting(){ } //星星个数
function countxingxing(){
var shu=document.getElementById(“count”);if(count>20){
} alert(“游戏结束”);window.clearInterval(dingshiqi);window.clearInterval(gametime);alert(“暂停游戏”);dingshiqi=window.setInterval(“star()”,500);gametime=window.setInterval(“youxishijian()”,1000);this.parentNode.removeChild(this);count--;countxingxing();
黑马程序员济南中心 编著
} shu.innerHTML=count+“个星星”;//记录游戏时间 function youxishijian(){
} var obj=document.getElementById(“jishi”);shijian++;obj.innerHTML=“游戏进行”+shijian+“秒”;0个星星 游戏进行0秒
