从零开始 飞机大战（二）简单开发

上次我们设置了一个背景图片在舞台自上而下的移动，但是因为只有一张背景图片的原因，导致总有那么一刻背景图片会从上面滑下来，就是说我们的背景保持住了短暂的连续性，但不能长时间保持，因此我们要解决这个问题，需要我们一开时就在舞台加载两张背景图片，用时钟该控件来控制这两张图片一起移动，并且实时判断两张图片相对与舞台的位置，完成第一张图片结束时第二张图片顶上，第二章图片结束时第一张图片顶上
在html中加入两张图片

<div id="stage">
			<div class="bg1"></div>
			<div class="bg2"></div>
		</div>

js

$(function(){
	//这里写代码的时候是可以控制所有htmldom节点的
	//dom
	
	var stage=document.getElementById("stage"); //获取舞台节点
	var bg1=stage.getElementsByClassName("bg1")[0];//获取背景图片
	// console.log(bg1)  //检查是否捕获bg1
	var bg2=stage.getElementsByClassName("bg2")[0];//获取背景图片
	var topval=-200;
	var topval2=-968;
	var k=0;
	// bg1.style.cssText="top: -30px;"
	var t1=setInterval(function(){
		k++;
		if(k==768){
			topval=-968;
			
			
		}else if(k==768*2){
			topval2-968;
			k=0;
		}
		// console.log("ddd")
		// console.log(bg1.style.cssText)
		// bg1.scrollTop=bg1.scrollTop+10;
		bg1.style.cssText="top: "+topval+"px";
		topval+=1;
		bg2.style.cssText="top: "+topval2+"px";
		topval2+=1;
		//topval++背景向下移动  
		
	},10);
	
	// t1.clearInterval();  //时钟停止
	
	
	// 第二章图片
	// var stage=document.getElementById("stage"); //获取舞台节点
	
	// // console.log(bg1)  //检查是否捕获bg1
	
	// // bg1.style.cssText="top: -30px;"
	// var t1=setInterval(function(){
	// 	// console.log("ddd")
	// 	// console.log(bg1.style.cssText)
	// 	// bg1.scrollTop=bg1.scrollTop+10;
	// 	bg2.style.cssText="top: "+topval2+"px";
	// 	topval2+=1
	// 	//topval++背景向下移动  
		
	// },70);
	
	
});