<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>乌龟抓小鸡</title>
</head>
<body onkeydown="return move(event)">
<script language="JavaScript">
//相应用户点击按钮或者按下键盘
function move(obj){
//乌龟的高度和宽度
var wugui_height=45;
var wugui_width=75;
//公鸡的高度和宽度
var cock_height=53;
var cock_width=64;
//得到乌龟所在的div对象 DOM编程
var wugui=document.getElementById("wugui");
if(window.event){//window.event可以判断用户是通过按键盘还是点击 控制乌龟的
key=obj.keyCode;//获得用户按下键的code
}
var wugui_top=wugui.style.top;
var wugui_left=wugui.style.left;
//把获取的100px转成100；
wugui_top=parseInt(wugui_top.substring(0,wugui_top.indexOf("p")));
wugui_left=parseInt(wugui_left.substring(0,wugui_left.indexOf("p")));
//判断用户按的哪个键
if(obj.value=="向下"||key==83){
wugui_top=wugui_top+10;
wugui.style.top=(wugui_top+10)+"px";
}
else if(obj.value=="向上"||key==87){
wugui_top=wugui_top-10;
wugui.style.top=(wugui_top-10)+"px";
}
else if(obj.value=="向左"||key==65){
wugui_left=wugui_left-10;
wugui.style.left=(wugui_left-10)+"px"
}
else if(obj.value=="向右"||key==68){
wugui_left=wugui_left+10;
wugui.style.left=(wugui_left+10)+"px";
}
//得到公鸡的left和top
var cock=document.getElementById("cock");
//得到公鸡当前的top和left
var cock_top=cock.style.top;
var cock_left=cock.style.left;
//处理px后缀
cock_top=parseInt(cock_top.substring(0,cock_top.indexOf("p")));
cock_left=parseInt(cock_left.substring(0,cock_left.indexOf("p")));
//判断是否碰到公鸡
y=Math.abs(cock_top-wugui_top);//公鸡乌龟两点间的纵坐标绝对值
x=Math.abs(cock_left-wugui_left);//公鸡乌龟两点间的横坐标的绝对值
//方法一
xx=0;
yy=0;
if(wugui_top<cock_top){//判断乌龟公鸡谁在上面 如果乌龟在上面
if(y<wugui_height) {
yy=1;
}
}
else{//乌龟在下面
if(y<cock_height)
{
yy=1;
}
}
if(wugui_left<cock_left){//判断乌龟公鸡谁在左侧
if(x<wugui_width)//75 如果乌龟在左侧
{
xx=1;
}
}
else{
if(x<cock_width)//64
{
xx=1;
}
}
if(xx==1&&yy==1)
{
alert("乌龟好猛啊");
}
}
</script>
<table border=‘1‘>
<tr><td colspan="3" align="center">控制区域</td></tr>
<tr><td></td><td>
<input type="button" value="向上" onclick="move(this)"/>
</td><td></td></tr>
<tr><td>
<input type="button" value="向左" onclick="move(this)"/>
</td><td></td><td>
<input type="button" value="向右" onclick="move(this)"/>
</td></tr>
<tr><td></td><td>
<input type="button" value="向下" onclick="move(this)"/>
</td><td></td></tr>
</table>
<!--放乌龟 --->
<div id="wugui" style="position:absolute;left:100px;top:320px;">
<img src="1.png" border="1"/>
</div>
<div id="cock" style="position:absolute;left:200px;top:300px;">
<img src="2.png" border="1"/>
</div>
</body>
</html>