原生js实现打气球计分小游戏

<!DOCTYPE html>
　　<html>
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title></title>
　　　　<style type="text/css">
　　　　　　html,body{ height: 100%; background-color: #ccc; overflow: hidden;}
　　　　　　div{ width: 250px; height: 333px; position: absolute; background: url(ballons.png) no-repeat -250px 0; cursor: crosshair;}
　　　　</style>
　　</head>
　　<body>

　　　　<!--打气球-->
　　　　<h1></h1>
　　　　<h1></h1>

　　　　<script type="text/javascript">
　　　　//面向对象
　　　　//创建气球的构造函数
　　　　function Ballon(){
　　　　//列举气球所有的属性 方法 和监听事件
　　　　　　this.dom=null;
　　　　　　this.x=null;//横坐标
　　　　　　this.y=null;//纵坐标
　　　　　　this.scroe=null;//气球上的分数
　　　　　　this.init();//初始化
　　　　　　this.bindEvent();//绑定事件
　　　　　　//把new出来的对象存放全局数组中
　　　　　　Ballons.push(this);

　　　　}

　　　　//init方法
　　　　Ballon.prototype.init=function(){
　　　　　　//上Dom树
　　　　　　this.dom=document.createElement("div");
　　　　　　document.body.appendChild(this.dom);
　　　　　　//初始化x、y
　　　　　　this.y=document.documentElement.clientHeight;//窗口可视高度
　　　　　　this.x=parseInt(Math.random()*(document.documentElement.clientWidth-250));//可视宽度
　　　　　　this.dom.style.left=this.x+"px";
　　　　　　this.dom.style.top=this.y+"px";

　　　　　　//产生随机分数 1-12
　　　　　　this.scroe=parseInt(Math.random()*12)+1;
　　　　　　//显示分数对应的气球
　　　　　　// 1 2 3 4 x:0 -250 -250*2 -250*3 y:0
　　　　　　// 5 6 7 8 x:0 -250 -250*2 -250*3 y:-333
　　　　　　// 9 10 11 12 x:0 -250 -250*2 -250*3 y:-333*2
　　　　　　var cutX= -(this.scroe-1)%4*250;
　　　　　　var cutY=0;
　　　　　　if(this.scroe>8){
　　　　　　　　cutY=-333*2;
　　　　　　}else if(this.scroe>4){
　　　　　　　　cutY=-333;
　　　　　　}
　　　　　　this.dom.style.backgroundPosition=cutX+"px "+cutY+"px";


　　　　}

　　　　//
　　　　Ballon.prototype.update=function(){
　　　　　　this.y-=this.scroe*6//气球往上升 改变y位置
　　　　　　//当到了临界值时
　　　　　　if(this.y<-333){
　　　　　　　　this.goDie();
　　　　　　}
　　　　　　this.dom.style.top=this.y+"px";
　　　　}

　　　　//移出可视区域后删除该元素
　　　　Ballon.prototype.goDie=function(){
　　　　　　document.body.removeChild(this.dom);
　　　　　　//之前所在的数组删除该元素
　　　　　　for(var i=0;i<Ballons.length;i++){
　　　　　　　　if(this===Ballons[i]){
　　　　　　　　　　Ballons.splice(i,1);
　　　　　　　　}
　　　　　　}
　　　　}

　　　　//绑定事件
　　　　Ballon.prototype.bindEvent=function(){
　　　　　　var that=this;
　　　　　　this.dom.onclick=function(){
　　　　　　　　scroeAll+=that.scroe;
　　　　　　　　that.goDie();
　　　　　　}
　　　　}


　　　　//定义一个全局数组 气球加到数组中 对气球批量处理
　　　　var Ballons=[];
　　　　var scroeAll=0;//总分数
　　　　var allTime=20;//游戏总时间
　　　　var iframe=0;//定义帧数

　　　　var timer=setInterval(function(){
　　　　　　iframe++;
　　　　　　if(iframe%10==0){
　　　　　　　　allTime--;
　　　　　　　　//每秒创建4个气球
　　　　　　　　for(var i=0;i<4;i++){
　　　　　　　　　　new Ballon();
　　　　　　　　}
　　　　　　}

　　　　　　document.getElementsByTagName("h1")[0].innerHTML="你的目前总分为"+scroeAll;
　　　　　　document.getElementsByTagName("h1")[1].innerHTML="游戏剩余时间"+allTime;

　　　　　　//让Ballons里面所有的气球对象调用update()
　　　　　　for(var i=0;i<Ballons.length;i++){
　　　　　　　　Ballons[i]&&Ballons[i].update();

　　　　　　}

　　　　　　if(allTime<0){
　　　　　　　　allTime=0;
　　　　　　　　clearInterval(timer);
　　　　　　　　alert("Game over 你的游戏得分为"+scroeAll);
　　　　　　}

　　　},100)
　　</script>


　　</body>
</html>

posted @ 2018-06-06 16:09  于小鱼7  阅读(606)  评论(7)    收藏  举报