1 <!DOCTYPE html> 2 <html lang="en"> 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 border='1'> 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 id="wugui" style="position:absolute;left:100px;top:320px;"> 110 <img src="1.png" border="1"/> 111 </div> 112 113 <div id="cock" style="position:absolute;left:200px;top:300px;"> 114 <img src="2.png" border="1"/> 115 </div> 116 </body> 117 </html>