当前位置：首页 > java >正文

【Web前端】JS+DOM来实现乌龟追兔子小游戏

java 2025/9/4 9:38:18

大家天天开心

文章目录

前言
一、对乌龟追兔子的介绍：
二、详细代码和讲解：
- 以下是对代码的解释：
总结

前言

在学习了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>