<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. c++的引用和c的指针之创建链表，二叉树的烦恼和区别

    /* **代码功能:创建一个令人头疼的不算头疼的链表,然后把特定的数据删除. *这次的主题不是在代码上,主要是关于创建链表时候的传参问题,嘿嘿,不相信你没遇到过 */#include "st ...

  2. Tinc VPN

    服务端配置 安装 $ apt-get install tinc 配置 $ mkdir -p /etc/tinc/dock/hosts $ cd /etc/tinc/dock 配置 tinc.conf ...

  3. hiho-1015- KMP算法

    #1015 : KMP算法 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho是一对好朋友,出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮助,在 ...

  4. Oracle table names are case sensitive (normally all uppercase)

    oracle_fdw error desc: postgres=# select * from test; ERROR:  Oracle table "sangli"." ...

  5. .NET Core 快速入门教程

    .NET Core 快速学习.入门系列教程.这个入门系列教程主要跟大家聊聊.NET Core的前世今生,以及Windows.Linux(CentOS.Ubuntu)基础开发环境的搭建.第一个.NET ...

  6. Usaco 2006Nov Round Numbers

    题意:定义Round Number为二进制表示下0的个数大于等于1的个数的数.求[l,r]中有多少圆环数 我们把二进制位用一颗01二叉树表示,如下: 我们依据二进制位来遍历这颗线段树,如果当前高度对应 ...

  7. Javascript实现简单的下拉二级菜单

    在线演示;http://jsfiddle.net/Web_Code/ThhbG/embedded/result/ <span style="font-size:14px;"& ...

  8. POJ 3928 &amp; hdu 2492 &amp; Uva1428 PingPong 【树状数组】

    Ping pong                                                   Time Limit: 2000/1000 MS (Java/Others)   ...

  9. 二、spring Boot构建的Web应用中，基于MySQL数据库的几种数据库连接方式进行介绍

    包括JDBC.JPA.MyBatis.多数据源和事务. 一.JDBC 连接数据库 1.属性配置文件(application.properties) spring.datasource.url=jdbc ...

  10. linux 磁盘管理三部曲——（3）mount挂载，/etc/fstab配置文件

    当我们分完区,并做好文件系统格式化,就到了最后的挂载mount了,挂载完毕就可以使用磁盘设备了. 一.什么是挂载,卸载 任何块设备都不能直接访问,需挂载在目录上访问 挂载: 将额外文件系统与根文件系统 ...