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

大家天天开心

文章目录

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

前言

在学习了JavaSCript这门语言的基础后，并稍微了解了点DOM后，我根据所学的一些课程类似写了一个有关乌龟追兔子的小游戏，这里面有很多关于JS和DOM的知识点包括一丢丢的算法，希望大家可以认真阅读一下

提示：以下是本篇文章正文内容，下面案例可供参考

一、对乌龟追兔子的介绍：

乌龟追兔子其实这个就是我们分别插入两张兔子和乌龟的图片，然后通过移动乌龟看是否会与兔子发生碰撞，如果碰撞代表乌龟追到兔子，乌龟就重新复位。

然后这里面我们如何通过让乌龟移动起来呢，如何分别点击向上向下向左向右四个按钮来控制乌龟移动呢，这是我们需要思考的问题。

此源码：

html 复制代码

<!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>

这里面我的图片的路径是我自己修改名字过后的，大家可以自行修改名字，就自己找图片就行。

二、详细代码和讲解：

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的内容写了个小游戏，希望大家也可以尝试一下，我会持续的更新的，谢谢大家。