<html>
<head>
<title>js乌龟抓小鸡游戏 </title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript">
//响应用户的点击按钮或者键盘按钮
function move(obj){
//alert(obj.keyCode);
//得到乌龟图片的高度与宽度
var wu_width = 100;
var wu_height = 75;
//得到小鸡图片的高度与宽度
var cock_width = 100;
var cock_height = 75;
var wugui = document.getElementById('wugui'); //得到乌龟所在的div
//可以判读用户是通过点击鼠标还是按下键盘
if(window.event){
var key = obj.keyCode;//keyCode 键盘值
}
//得到乌龟的top值 left值
var wu_top = wugui.style.top;
var wu_left = wugui.style.left;
//将乌龟的top值 left值 去掉px并转化为数字
wu_top = parseInt(wu_top.substr(0,wu_top.indexOf("p")));
wu_left = parseInt(wu_left.substr(0,wu_left.indexOf("p")));
//判断用户点击或按下的是哪个按钮
if((obj.value == '向下走') || (key == 40)){
wugui.style.top = (wu_top+10)+'px';
wu_top += 10;
}else if((obj.value == '向右走') || (key == 39 )){
wugui.style.left = (wu_left+10)+'px';
wu_left += 10;
}else if((obj.value == '向左走') || (key == 37 )){
wugui.style.left = (wu_left-10)+'px';
wu_left -= 10;
}else if((obj.value == '向上走') || (key == 38 )){
wugui.style.top = (wu_top-10)+'px';
wu_top -= 10;
}
//得到小鸡当前的top 与 left
var cock = document.getElementById('cock');
var cock_top = cock.style.top;
var cock_left = cock.style.left;
cock_top = parseInt(cock_top.substr(0,cock_top.indexOf('p')));
cock_left = parseInt(cock_left.substr(0,cock_left.indexOf('p')));
var y = Math.abs(cock_top-wu_top); //两点间纵坐标的绝对值
var x = Math.abs(cock_left-wu_top);//两点间横坐标的绝对值
/*
：window.event代表着事件对象的状态。只有在事件发生时生效。如鼠标、键盘等事件被触发时这个对象才存在。
window.event这只在IE下是这样的。他并不是标准。。也就是说其他浏览器并不支持。
在W3C标准支持的浏览器下事件对向是引发事件涵数的第一个参数，
参数名随意,在下面的例子中我的事件对象的参数名是evt,也可以定义为其他名字．为了兼容IE浏览器可以这样写
*/
//判读乌龟是否抓住小鸡
var xx = 0;
var yy = 0;
//判断纵向
if(wu_top < cock_top){
if(y<wu_height){
yy = 1;
}
}else{
if(y<cock_height){
yy = 1;
}
}
//判断横向
if(wu_width<cock_width){
if(x<wu_width){
xx = 1;
}
}else{
if(x<cock_width){
xx = 1;
}
}
if((xx==1)&&(yy==1)){
window.alert('乌龟挺快嘛！赞');
wugui.style.top = 120+'px';
wugui.style.left = 100+'px';
}
}
//自由移动小鸡的位置
function fRandomBy(under, over){
switch(arguments.length){
case 1: return parseInt(Math.random()*under+1);
case 2: return parseInt(Math.random()*(over-under+1) + under);
default: return 0;
}
}
function movecock(){
var random = fRandomBy(-20,20);
var ji = document.getElementById('cock');
var ji_top = ji.style.top;
var ji_left = ji.style.left;
ji_top = parseInt(ji_top.substr(0,ji_top.indexOf('p')));
ji_left = parseInt(ji_left.substr(0,ji_left.indexOf('p')));
/*alert(document.body.scrollHeight);
var body_width = parseInt(document.body.scrollHeight.substr(0,document.body.scrollHeight.indexOf('p'));
var body_hieght= parseInt(document.body.scrollWidth.substr(0,document.body.scrollWidth.indexOf('p'));
if(ji_left >=body_width || ji_top >= body_height){
ji_top -= random;
ji_left -= random;
}
*/
ji_top += random;
ji_left += random;
ji.style.top = ji_top + 'px';
ji.style.left = ji_left + 'px';
//alert(ji_top + '==>'+ji_left);
};
var mytimer=setInterval('movecock()',500);
/*function reRun(){
mytimer=setInterval('movecock()',500);
}*/
</script>
</head>
<body onkeydown="return move(event)" >
<table border="1">
<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><input type="button" value="向下走" onclick="move(this)"/></td>
<td><input type="button" value="向右走" onclick="move(this)"/></td>
</tr>
</table>
<!--把乌龟放在一个div里-->
<div id="wugui" style="position:absolute;left:100px;top:120px">
<img src="images/wugui.jpg" width="100px" height="75px"/>
</div>
<!--把小鸡放在一个div里-->
<div id="cock" style="position:absolute;left:200px;top:200px">
<img src="images/xiaoji.jpg" width="100px" height="75px"/>
</div>
</body>
</html>
对乌龟抓住小鸡的算法的图解
