1 <!DOCTYPE html>
2 <html >
3 <head>
4 <meta charset="UTF-8">
5 <title>乌龟抓小鸡</title>
6 </head>
7 <body onkeydown="return move(event)">
8
9 <script language="JavaScript">
10 //相应用户点击按钮或者按下键盘
11 function move(obj){
12 //乌龟的高度和宽度
13 var wugui_height=45;
14 var wugui_width=75;
15 //公鸡的高度和宽度
16 var cock_height=53;
17 var cock_width=64;
18 //得到乌龟所在的div对象 DOM编程
19 var wugui=document.getElementById("wugui");
20 if(window.event){//window.event可以判断用户是通过按键盘还是点击 控制乌龟的
21 key=obj.keyCode;//获得用户按下键的code
22 }
23 var wugui_top=wugui.style.top;
24 var wugui_left=wugui.style.left;
25 //把获取的100px转成100；
26 wugui_top=parseInt(wugui_top.substring(0,wugui_top.indexOf("p")));
27 wugui_left=parseInt(wugui_left.substring(0,wugui_left.indexOf("p")));
28 //判断用户按的哪个键
29 if(obj.value=="向下"||key==83){
30 wugui_top=wugui_top+10;
31 wugui.style.top=(wugui_top+10)+"px";
32 }
33 else if(obj.value=="向上"||key==87){
34 wugui_top=wugui_top-10;
35 wugui.style.top=(wugui_top-10)+"px";
36 }
37 else if(obj.value=="向左"||key==65){
38 wugui_left=wugui_left-10;
39 wugui.style.left=(wugui_left-10)+"px"
40 }
41 else if(obj.value=="向右"||key==68){
42 wugui_left=wugui_left+10;
43 wugui.style.left=(wugui_left+10)+"px";
44 }
45
46 //得到公鸡的left和top
47 var cock=document.getElementById("cock");
48 //得到公鸡当前的top和left
49 var cock_top=cock.style.top;
50 var cock_left=cock.style.left;
51
52 //处理px后缀
53 cock_top=parseInt(cock_top.substring(0,cock_top.indexOf("p")));
54 cock_left=parseInt(cock_left.substring(0,cock_left.indexOf("p")));
55 //判断是否碰到公鸡
56 y=Math.abs(cock_top-wugui_top);//公鸡乌龟两点间的纵坐标绝对值
57 x=Math.abs(cock_left-wugui_left);//公鸡乌龟两点间的横坐标的绝对值
58
59 //方法一
60 xx=0;
61 yy=0;
62
63 if(wugui_top<cock_top){//判断乌龟公鸡谁在上面 如果乌龟在上面
64 if(y<wugui_height) {
65 yy=1;
66 }
67 }
68 else{//乌龟在下面
69 if(y<cock_height){
70 yy=1;
71 }
72 }
73
74 if(wugui_left<cock_left){//判断乌龟公鸡谁在左侧
75
76 if(x<wugui_width)//75 如果乌龟在左侧
77 {
78 xx=1;
79 }
80 }
81 else{
82 if(x<cock_width)//64
83 {
84 xx=1;
85 }
86 }
87
88 if(xx==1&&yy==1)
89 {
90 alert("乌龟好猛啊");
91 }
92 }
93 </script>
94 <table >
95 <tr><td colspan="3" align="center">控制区域</td></tr>
96 <tr><td></td><td>
97 <input type="button" value="向上" onclick="move(this)"/>
98 </td><td></td></tr>
99 <tr><td>
100 <input type="button" value="向左" onclick="move(this)"/>
101 </td><td></td><td>
102 <input type="button" value="向右" onclick="move(this)"/>
103 </td></tr>
104 <tr><td></td><td>
105 <input type="button" value="向下" onclick="move(this)"/>
106 </td><td></td></tr>
107 </table>
108 <!--放乌龟 --->
109 <div >
110 <img src="1.png" />
111 </div>
112
113 <div >
114 <img src="2.png" />
115 </div>
116 </body>
117 </html>