<body>
<div id="big">
<ul id="start">
开始
</ul>
<ul id="again">
再玩一次
</ul>
</div>
</body>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#big{
width: 800px;
height:500px;
background: #000;
margin: 0px auto;
position: absolute;
overflow: hidden;
}
#start{
width: 100px;
height: 40px;
background: #ff0000;
position: absolute;
top: 500px;
left: 350px;
text-align: center;
line-height: 40px;
font-size: 25px;
color: #aaa;
z-index: 2;
cursor: pointer;
}
#again{
width: 100px;
height: 40px;
background: #ff0000;
position: absolute;
top: 500px;
left: 350px;
text-align: center;
line-height: 40px;
font-size: 25px;
color: #aaa;
z-index: 3;
cursor: pointer;
}
</style>
<head>
<script src="animate.js"></script>
</head>
<script>
window.onload = function(){
var big = document.getElementById('big');
var start = document.getElementById('start');
var again = document.getElementById('again');
//myAnimate是写在animate.js里的
myAnimate(start,{top:(big.offsetHeight-start.offsetHeight)/2},400);//设置开始按钮的位置
again.onclick=start.onclick = function(){//开始按钮和再玩一次调用同一个函数
myAnimate(start,{top:big.offsetHeight},400);//点击开始按钮后,开始按钮回到游戏框的下方。
myAnimate(again,{top:big.offsetHeight},400);//点击再玩一次按钮,同样的效果。
var alldivs = big.getElementsByTagName('div');//将游戏角色和障碍物放在一个数组里
var length = alldivs.length;//数组的长度
if(lenth>0){//数组的长度大于0,说明游戏窗体里有存在的div
for(var i =0;i<length;i++){
big.removeChild(alldivs[0]);//清楚游戏窗体的div(此处是游戏结束时发生的)
}
}
//创建游戏角色
var target = document.createElement('div');
big.appendChild(target);
//设置游戏角色的样式
css(target,"width",25);
css(target,"height",25);
css(target,"backgroundColor","#ff0000");
css(target,"position","absolute");
css(target,"top",(big.offsetHeight-target.offsetHeight)/2);
css(target,"left",(big.offsetWidth-target.offsetWidth)/2);
//创建障碍物,并让障碍物运动起来
function create(){
var arr = [];//创建一个数组,为了将障碍物都放进去
var arrl = [];//设置障碍物的offsetLeft
var arrt = [];//设置障碍物的offsetTop
//创建游戏窗体左右两边的障碍物
for(var i=0;i<=30;i++){
var attr1 = [0,800];//800是游戏窗体的width
var attr1index = Math.floor(Math.random()*attr1.length);//生成随机数
var l = attr1[attr1index];//取出随机数
var divs = document.createElement('div');
big.appendChild(divs);
//设置障碍物的样式
css(divs,"width",(1+Math.random())*4);
css(divs,"height",(1+Math.random())*4);
css(divs,"backgroundColor",randcolor());
css(divs,"position","absolute");
css(divs,"top",big.offsetHeight*Math.random());
判断游戏窗体的左右
if(l==0){
css(divs,"left",l-Math.random()*20);//此处的20随便更改
}else{
css(divs,"left",l+Math.random()*20);
}
arr.push(divs);
arrl.push(divs.offsetLeft);
arrt.push(divs.offsetTop);
}
//创建游戏窗体上下的障碍物
for(var i=0;i<=30;i++){
var attr2 = [0,500];
var attr2index = Math.floor(Math.random()*attr2.length);//生成随机数
var l = attr2[attr2index];//取出随机数
var divs = document.createElement('div');
big.appendChild(divs);
css(divs,"width",(1+Math.random())*4);
css(divs,"height",(1+Math.random())*4);
css(divs,"backgroundColor",randcolor());
css(divs,"position","absolute");
css(divs,"left",big.offsetWidth*Math.random());
判断游戏窗体的上下
if(t==0){
css(divs,"top",t-Math.random()*20);
}else{
css(divs,"top",t+Math.random()*20);
}
arr.push(divs);
arrl.push(divs.offsetLeft);
arrt.push(divs.offsetTop);
}
//让障碍物朝着游戏角色的方向运动起来
for(var i=0;i<arr.length;i++){
(function(){
myAnimate(arr[i],{top:(target.offsetTop)*2-arrt[i]+Math.random()*120,le ft:(target.offsetLeft)*2-arrl[i]+Math.random()*120},5000*(1+Math.random ()),Tween.Leaner,function(){
big.removeChild(arr[i]);arrt=[];arrl=[];
},target,again);
})(i)
}
}
create();
target.time = setInterval(function(){
create();
},6000)
//方向键控制游戏角色的运动
document.onkeydown =function(){
var ev = e||window.event;//区分IE和其他浏览器
//左方向键
if(ev.keyCode==37){
document.t = setInterval(function(){
if(target.offsetLeft<=0){
clearInterval(document.t);
target.style.left = 0+"px";
}else{
target.style.left = target.offsetLeft-7 +"px";
}
},30)
}
//上方向键
if(ev.keyCode==38){
document.t = setInterval(function(){
if(target.offsetTop<=0){
clearInterval(document.t);
target.style.top = 0+"px";
}else{
target.style.top = target.top-7+"px";
}
},30)
}
//右方向键
if(ev.keyCode==39){
document.t = setInterval(function(){
if(target.offsetLeft>=big.offsetWidth-target.offsetWidth){//需要自己体会
clearInterval(document.t);
target.style.left = big.offsetWidth-target.offsetWidth+"px";
}else{
target.style.left = target.left+7+"px";
}
},30)
}
//下方向键
if(ev.keyCode==40){
document.t = setInterval(function(){
if(target.offsetTop>=big.offsetHeight-target.offsetHeight){
clearInterval(document.t);
target.style.top = big.offsetHeight-target.offsetHeigth+"px";
}else{
target.style.top = target.top+7+"px";
}
},30)
}
}
//按键弹起时取消计时器
document.onkeyup = function(){
clearInterval(document.t);
document.t = null;
}
//创建随机颜色
function randcolor(){
return "rgb("+Math.ceil(255*Math.random())+","+Math.ceil(255*Math.random())+"," +Math.ceil(255*Math.random())+")";
}
}
}
</script>