大家天天开心
前言
在学习了JavaSCript这门语言的基础后，并稍微了解了点DOM后，我根据所学的一些课程类似写了一个有关乌龟追兔子的小游戏，这里面有很多关于JS和DOM的知识点包括一丢丢的算法，希望大家可以认真阅读一下
提示：以下是本篇文章正文内容，下面案例可供参考
一、对乌龟追兔子的介绍：
乌龟追兔子其实这个就是我们分别插入两张兔子和乌龟的图片，然后通过移动乌龟看是否会与兔子发生碰撞，如果碰撞代表乌龟追到兔子，乌龟就重新复位。
然后这里面我们如何通过让乌龟移动起来呢，如何分别点击向上向下向左向右四个按钮来控制乌龟移动呢，这是我们需要思考的问题。
此源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>乌龟游戏</title>
</head>
<body>
<table border="1">
<tr>
<td></td>
<!--
老韩解读
1. this 表示的是你点击的这个button，而且已经是一个dom对象
2. 可以使用属性和方法
-->
<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
老韩解读
1. style 的 position: absolute 表示绝对定位
2. left:100px 表示图片距离窗口的原点的横坐标
3. top:120px; 表示图片距离窗口的原点的纵坐标
4. 针对图片而言，定位的点，是图片的左上角
-->
<div id="wugui" style="position: absolute ;left:100px;top:120px;">
<img src="1.bmp" border="1" alt=""/>
</div>
<div id="cock" style="left:200px;position:absolute;top:200px;">
<img src="2.bmp" border="1" alt=""/>
</div>
</body>
</html>这里面我的图片的路径是我自己修改名字过后的，大家可以自行修改名字，就自己找图片就行。
二、详细代码和讲解：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>乌龟游戏</title>
<script type="text/javascript">
var cock_top = 200;
var cock_left = 200;
//定义乌龟的高度和宽度
var wugui_height = 50;
var wugui_width = 50;
//定义公鸡的高度和宽度
var cock_height = 50;
var cock_width = 50;
function move(obj) {
var wugui = document.getElementById("wugui");
var wugui_left = wugui.style.left;
var wugui_top = wugui.style.top;
wugui_left = parseInt(wugui_left.substring(0, wugui_left.indexOf("p")));
wugui_top = parseInt(wugui_top.substring(0, wugui_top.indexOf("p")));
if ("向上走" == obj.value) {
wugui_top -= 10;
wugui.style.top = wugui_top + "px";
} else if ("向下走" == obj.value) {
wugui_top += 10;
wugui.style.top = wugui_top + "px";
} else if ("向左走" == obj.value) {
wugui_left -= 10;
wugui.style.left = wugui_left + "px";
} else if ("向右走" == obj.value) {
wugui_left += 10;
wugui.style.left = wugui_left + "px";
}
var y = Math.abs(wugui_top - cock_top);
var x = Math.abs(wugui_left - cock_left);
var yy = 0;//默认纵向没有重叠
var xx = 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) {
xx = 1;
}
} else {
if (x < cock_width) {
xx = 1;
}
}
if (xx && yy) {
alert("乌龟很厉害!");
//乌龟放到原来的位置
wugui.style.left = "100px";
wugui.style.top = "120px";
}
} </script>
</head>
<body>
<table border="1">
<tr>
<td></td>
<!--
老韩解读
1. this 表示的是你点击的这个button，而且已经是一个dom对象
2. 可以使用属性和方法
-->
<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
老韩解读
1. style 的 position: absolute 表示绝对定位
2. left:100px 表示图片距离窗口的原点的横坐标
3. top:120px; 表示图片距离窗口的原点的纵坐标
4. 针对图片而言，定位的点，是图片的左上角
-->
<div id="wugui" style="position: absolute ;left:100px;top:120px;">
<img src="1.bmp" border="1" alt=""/>
</div>
<div id="cock" style="left:200px;position:absolute;top:200px;">
<img src="2.bmp" border="1" alt=""/>
</div>
</body>
</html>
以下是对代码解释：
首先这里面有一个编程思想，不知道是什么就输出，或者日志，或者debug
还有一个编程小技巧就是在不确定情况下，可以输出看看，因为这里面在静态绑定的时候οnclick="move(this)" 这里面this一开始可以替代为“向上走”或者向下走等等，而this就是一个DOM对象。
步骤：
拿到wugui dom 对象
获取wugui.style.left 和 wugui.style.top 的值， 通过修改就可以让乌龟动起来
同时 分析: wugui_left 和 wugui_top 是 string '100px'-> nubmer 100 类型转换是靠api
wugui_left = parseInt(wugui_left.substring(0, wugui_left.indexOf("p")));
wugui_top = parseInt(wugui_top.substring(0, wugui_top.indexOf("p")));
根据 obj.value 来进行上下左右的处理
最后分析如何判断乌龟和公鸡碰撞：
得到乌龟和公鸡左上角的距离, 纵向距离y
// (1) 如果乌龟在上面， 当y< 乌龟图片的高度 时，说明 他们可能在纵 向发生重叠， 使用yy 记录 // (2) 如果乌龟在下面， 当y< 公鸡图片的高度 时，说明 他们可能在纵 向发生重叠， 使用yy 记录
得到乌龟和公鸡左上角的距离, 横向距离x
// (1) 如果乌龟在左面， 当x< 乌龟图片的宽度 时，说明 他们可能在横向发生重叠， 使用xx 记录
// (2) 如果乌龟在右面， 当x< 公鸡图片的宽度 时，说明 他们可能在横 向发生重叠， 使用xx 记录
如果 xx 和 yy 同时为true, 说明一定发生碰撞。
总结
以上就是我要介绍的内容，就是用JS和DOM的内容写了个小游戏，希望大家也可以尝试一下，我会持续的更新的，谢谢大家。