<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="data:images/wugui.jpg" width="100px" height="75px"/>
    </div>
    <!--把小鸡放在一个div里-->
    <div id="cock" style="position:absolute;left:200px;top:200px">
     <img src="data:images/xiaoji.jpg" width="100px" height="75px"/>
    </div>
 </body>
</html>
对乌龟抓住小鸡的算法的图解

jsDOM编程-乌龟抓小鸡游戏的更多相关文章

  1. 例子：韩顺平JavaScript----JS乌龟抓小鸡游戏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. YTU 2845: 编程题AB-卡片游戏

    2845: 编程题AB-卡片游戏 时间限制: 1 Sec  内存限制: 128 MB 提交: 30  解决: 13 题目描述 小明对数字的序列产生了兴趣: 现有许多张不同的数字卡片,用这若干张卡片能排 ...

  3. python游戏编程——乌龟和鱼类场景编程

    综合举例: 游戏编程:按以下要求定义一个乌龟类和鱼类并尝试编写游戏. O    假设游戏场景为范围(x, y)为0<=x<=10,0<=y<=10 ·       游戏生成1只 ...

  4. 【Qt编程】3D迷宫游戏

    说起迷宫想必大家都很熟悉,个人感觉迷宫对人的方向感是很大的考验,至少我的方向感是不好的,尤其是在三维空间中.由于这段时间帮导师做项目用到了三维作图,便心血来潮想做个三维迷宫玩玩.要想画出三维的迷宫游戏 ...

  5. [转]Linux Socket编程 Socket抓取网页源码

    “一切皆Socket!” 话虽些许夸张,但是事实也是,现在的网络编程几乎都是用的socket. ——有感于实际编程和开源项目研究. 我们深谙信息交流的价值,那网络中进程之间如何通信,如我们每天打开浏览 ...

  6. 小孩学习编程的绝佳游戏——CodeMonkey

    CodeMonkey于2014年1月在以色列成立.它的愿景是建立一个全球性的学习平台,让孩子们通过游戏的方式学习.发现.创造和分享,同时在此过程中获得编程这一项21世纪必备的技能. 通常提到CodeM ...

  7. 编程之美----NIM游戏

    : 博弈游戏·Nim游戏 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 今天我们要认识一对新朋友,Alice与Bob.Alice与Bob总是在进行各种各样的比试,今天他 ...

  8. jsDOM编程-小球在盒子里来回撞击

    首先写一个小页面:页面需要一个div 这个div就是盒子,然后在div里在包含一个子div 这个子div就包含一张小球的图片 代码: <!doctype html> <html> ...

  9. python编程学习--Pygame - Python游戏编程入门(0)---转载

    原文地址:https://www.cnblogs.com/wuzhanpeng/p/4261015.html 引言 博客刚开,想把最近学习的东西记录下来,算是一种笔记.最近打算开始学习Python,因 ...

随机推荐

  1. sklearn.neighbors.kneighbors_graph的简单属性介绍

    connectivity = kneighbors_graph(data, n_neighbors=7, mode='distance', metric='minkowski', p=2, inclu ...

  2. C#使用ManagementObjectSearcher来获取系统信息时会有out of memory的异常

    在开发环境下,时不时出现out of memory的异常,最后是在服务界面重新启动 Windows Management Instrumentation后就好了.

  3. java 之 命令模式（大话设计模式）

    命令模式,笔者一直以为当我们开发的过程中基本上很难用到,直到维护阶段或者重构阶段,我们会发现有些撤销命令和追加命令比较频繁时,自然而然就用到命令模式. 先看下类图 大话设计模式-类图 简单说下类图,最 ...

  4. 使用 dotnet core 和 Azure PaaS服务进行devOps开发（Web API 实例）

    作者:陈希章 发表于 2017年12月19日 引子 这一篇文章将用一个完整的实例,给大家介绍如何基于dotnet core(微软.NET的最新版本,支持跨平台,跨设备的应用开发,详情请参考 https ...

  5. python 3.6 MJ小工具

    2017.07.14 update 做了个界面,不需要使用cmd命令行+文件路径的方式来使用了: 链接如下: http://www.cnblogs.com/chenyuebai/p/7150382.h ...

  6. minicom在虚拟机（linux）安装配置过程

    1. minicom须要ncurses库的支持.否则安装会有问题. A. 下载ncurses.我选择是ncurses-5.6.tar.gz 下载地址:http://directory.fsf.org/ ...

  7. php&amp;&amp;页面静态化

    页面静态化.主要是出于两个方面的考虑.     第一:訪问html页面的速度比訪问php页面的速度快.在訪问php页面时候.须要对php进行解析.訪问html时候,直接浏览器能够解析出来.特别是PV量 ...

  8. MyBatis SQL处理大于、小于号

    MyBatis mapper文件是xml文件,需要特殊字符如大于号.小于号后需要转义. 原字符 转义后字符 < < <= <= > > > >=

  9. 调用接口http封装

    public static String httpHandler(String URL,String xml){ try { URL url=new URL(URL); URLConnection c ...

  10. 自学Zabbix3.10.1.2-事件通知Notifications upon events-媒介类型SMS

    自学Zabbix3.10.1.2-事件通知Notifications upon events-媒介类型SMS 服务器安装串口GSM短信猫之后,zabbix可以使用它来发送短信通知给管理员,如下注意事项 ...