<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{background: black;}
#zone{border: 1px white solid;position: absolute;top:100px;left:300px;width: 800px;height: 400px;}
#head,.body{width: 20px;height: 20px;float: left;position: relative;left:240px;top:140px;}
#head{background: gray;}
.body{background: white;margin-left:5px;}
.fruit{background: green;width: 20px;height: 20px;position: relative;top: 0px;left: 0px;}
</style>
<script type="text/javascript">
//通过类选择器获得元素
function getByClass(oParent,sClass){
var aElement=oParent.getElementsByTagName('*');
var aResult=[];
for(var i=0;i<aElement.length;i++){
if(aElement[i].className==sClass){
aResult.push(aElement[i]);
}
}
return aResult;
}
//运动函数 参数：对象，运动属性，操作，运动速度，定时器速度
function move(obj,attr,oper,speed,tspeed){
clearInterval(obj.timer);
var zone=document.getElementById('zone');//获得运动区
var xMax=zone.offsetWidth-obj.offsetWidth;//获得运动区域x的最大值
var yMax=zone.offsetHeight-obj.offsetHeight;//获得运动区域y的最大值
var fr=getByClass(zone,'fruit')[0];//获得绿色div节点
//clearInterval(obj.timer);
if(typeof(speed)=='undefined')speed=20;
if(typeof(tspeed)=='undefined')tspeed=50;
var offset='offset'+attr.replace(/(\w)/,function(v){return v.toUpperCase()});//处理字符串
obj.timer=setInterval(function(){
/*document.onkeyup=function(){
clearInterval(obj.timer);
};*/
if(typeof(oper)=='undefined'){
oper='+';
}else{
switch(oper){//运动对象
case '+':obj.style[attr]=obj[offset]+speed+'px';break;
case '-':obj.style[attr]=obj[offset]-speed+'px';break;
}
}
var con1=obj.offsetLeft-fr.offsetLeft;//灰色div碰到水果的条件1
var con2=obj.offsetTop-fr.offsetTop;//灰色div碰到水果的条件2
if(Math.abs(con1)<15&&Math.abs(con2)<15){//判断碰到的误差是否在15px
zone.removeChild(fr);//移除绿色div节点
fruit(obj);//重新创建绿色div节点
}
//如果灰色div碰到运动白框区域就输了
if(obj.offsetLeft<0||obj.offsetLeft>xMax||obj.offsetTop<0||obj.offsetTop>yMax){
zone.innerHTML="<center><font color='red' size='7'>You Lose！</font></center>";
clearInterval(obj.timer);
document.onkeydown=null;
zone.style.border='1px red solid';
}
},tspeed);
}
//创建绿色div的坐标
function getPos(){
var xMax=zone.offsetWidth-20;//获得绿色div创建的最大x坐标
var yMax=zone.offsetHeight-20;//最大y坐标
var left=parseInt(Math.random()*(xMax+1),10);//随机生成坐标
var top=Math.floor(Math.random()*(yMax+1));
return {left:left,top:top};//返回坐标
}
//生成一个水果：绿色div 参数是灰色div对象
function fruit(obj){
var pfruit=getPos();//创建坐标
var fruit=document.createElement('div');//创建绿色div
fruit.setAttribute('class','fruit');//设置div类选择器
zone.appendChild(fruit);//插入节点
//设置绿色div属性，条件是绿色div不在灰色div的20px像素之内
do{
fruit.style.left=pfruit.left+'px';
fruit.style.top=pfruit.top+'px';
}while((fruit.offsetLeft<=obj.offsetLeft+obj.offsetWidth&&fruit.offsetLeft>=obj.offsetLeft-obj.offsetWidth)||(fruit.offsetTop<=obj.offsetTop-obj.offsetWidth&&fruit.offsetTop>=obj.offsetTop+obj.offsetWidth));
}
window.onload=function(){
var zone=document.getElementById('zone');.//运动区
var hDiv=document.getElementById('head');//灰色div
var bDiv=getByClass(zone,'body');
fruit(hDiv);//一运行脚本就生成一个绿色div
document.onkeydown=function(ev){
var oEvent=ev||event;
clearInterval(hDiv.timer);
if(oEvent.keyCode==40){//down
move(hDiv,'top','+');
}
if(oEvent.keyCode==37){//left
//clearInterval(hDiv.timer);
move(hDiv,'left','-');
}
if(oEvent.keyCode==38){//up
//clearInterval(hDiv.timer);
move(hDiv,'top','-');
}
if(oEvent.keyCode==39){//right
//clearInterval(hDiv.timer);
move(hDiv,'left','+');
}
};
};
</script>
</head>
<body>
<div id="zone">
<div id="head"></div>
<!--<div class="body"></div>
<div class="body"></div>-->
</div>
</body>
</html>
<html>
<head>
<title></title>
<style type="text/css">
body{background: black;}
#zone{border: 1px white solid;position: absolute;top:100px;left:300px;width: 800px;height: 400px;}
#head,.body{width: 20px;height: 20px;float: left;position: relative;left:240px;top:140px;}
#head{background: gray;}
.body{background: white;margin-left:5px;}
.fruit{background: green;width: 20px;height: 20px;position: relative;top: 0px;left: 0px;}
</style>
<script type="text/javascript">
//通过类选择器获得元素
function getByClass(oParent,sClass){
var aElement=oParent.getElementsByTagName('*');
var aResult=[];
for(var i=0;i<aElement.length;i++){
if(aElement[i].className==sClass){
aResult.push(aElement[i]);
}
}
return aResult;
}
//运动函数 参数：对象，运动属性，操作，运动速度，定时器速度
function move(obj,attr,oper,speed,tspeed){
clearInterval(obj.timer);
var zone=document.getElementById('zone');//获得运动区
var xMax=zone.offsetWidth-obj.offsetWidth;//获得运动区域x的最大值
var yMax=zone.offsetHeight-obj.offsetHeight;//获得运动区域y的最大值
var fr=getByClass(zone,'fruit')[0];//获得绿色div节点
//clearInterval(obj.timer);
if(typeof(speed)=='undefined')speed=20;
if(typeof(tspeed)=='undefined')tspeed=50;
var offset='offset'+attr.replace(/(\w)/,function(v){return v.toUpperCase()});//处理字符串
obj.timer=setInterval(function(){
/*document.onkeyup=function(){
clearInterval(obj.timer);
};*/
if(typeof(oper)=='undefined'){
oper='+';
}else{
switch(oper){//运动对象
case '+':obj.style[attr]=obj[offset]+speed+'px';break;
case '-':obj.style[attr]=obj[offset]-speed+'px';break;
}
}
var con1=obj.offsetLeft-fr.offsetLeft;//灰色div碰到水果的条件1
var con2=obj.offsetTop-fr.offsetTop;//灰色div碰到水果的条件2
if(Math.abs(con1)<15&&Math.abs(con2)<15){//判断碰到的误差是否在15px
zone.removeChild(fr);//移除绿色div节点
fruit(obj);//重新创建绿色div节点
}
//如果灰色div碰到运动白框区域就输了
if(obj.offsetLeft<0||obj.offsetLeft>xMax||obj.offsetTop<0||obj.offsetTop>yMax){
zone.innerHTML="<center><font color='red' size='7'>You Lose！</font></center>";
clearInterval(obj.timer);
document.onkeydown=null;
zone.style.border='1px red solid';
}
},tspeed);
}
//创建绿色div的坐标
function getPos(){
var xMax=zone.offsetWidth-20;//获得绿色div创建的最大x坐标
var yMax=zone.offsetHeight-20;//最大y坐标
var left=parseInt(Math.random()*(xMax+1),10);//随机生成坐标
var top=Math.floor(Math.random()*(yMax+1));
return {left:left,top:top};//返回坐标
}
//生成一个水果：绿色div 参数是灰色div对象
function fruit(obj){
var pfruit=getPos();//创建坐标
var fruit=document.createElement('div');//创建绿色div
fruit.setAttribute('class','fruit');//设置div类选择器
zone.appendChild(fruit);//插入节点
//设置绿色div属性，条件是绿色div不在灰色div的20px像素之内
do{
fruit.style.left=pfruit.left+'px';
fruit.style.top=pfruit.top+'px';
}while((fruit.offsetLeft<=obj.offsetLeft+obj.offsetWidth&&fruit.offsetLeft>=obj.offsetLeft-obj.offsetWidth)||(fruit.offsetTop<=obj.offsetTop-obj.offsetWidth&&fruit.offsetTop>=obj.offsetTop+obj.offsetWidth));
}
window.onload=function(){
var zone=document.getElementById('zone');.//运动区
var hDiv=document.getElementById('head');//灰色div
var bDiv=getByClass(zone,'body');
fruit(hDiv);//一运行脚本就生成一个绿色div
document.onkeydown=function(ev){
var oEvent=ev||event;
clearInterval(hDiv.timer);
if(oEvent.keyCode==40){//down
move(hDiv,'top','+');
}
if(oEvent.keyCode==37){//left
//clearInterval(hDiv.timer);
move(hDiv,'left','-');
}
if(oEvent.keyCode==38){//up
//clearInterval(hDiv.timer);
move(hDiv,'top','-');
}
if(oEvent.keyCode==39){//right
//clearInterval(hDiv.timer);
move(hDiv,'left','+');
}
};
};
</script>
</head>
<body>
<div id="zone">
<div id="head"></div>
<!--<div class="body"></div>
<div class="body"></div>-->
</div>
</body>
</html>
