<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. 【Win 10 应用开发】在后台播放视频

    从 1607 (14393)版本开始,MediaPlayer 类就可以在前台与后台之间无缝播放,你不必再考虑前台与后之间的通信,所以从 14393 开始,你就不需要再用 BackgroundMedia ...

  2. Server SQL2008对文件的基础操作（1）

    1.一个文件的基本框架为:文件名.文件地址.文件大小.文件最大的大小.文件的增量(Filegrowth). 2.文件有mdf.ndf.ldf 三种文件的区别. 3.文件组可以进行文件的管理 FileG ...

  3. poj2524 解题报告

    基于并查集的一道简单题目 Ubiquitous Religions Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 22334 ...

  4. Nginx配置优化及深入讲解,大家可以听一下

    随着访问量的不断增加,需要对Nginx和内核做相应的优化来满足高并发用户的访问,那下面在单台Nginx服务器来优化相关参数. 1)       Nginx.conf配置优化: worker_proce ...

  5. java多线程编程核心技术——第二章

    第一节synchronized同步方法目录 1.1方法内的变量为线程安全的 1.2实例变量非线程安全 1.3多个对象多个锁 1.4synchronized方法与锁对象 1.5脏读 1.6synchro ...

  6. Solr6.1.0Windows安装步骤

    一. 环境 solr 6.1.0  下载地址 http://archive.apache.org/dist/lucene/solr/6.1.0/ jdk 1.8 tomcat8 二. 安装solr到t ...

  7. Sql Server 新的日期类型

    新的日期类型:是出现在2008中的在2005中没有的日期类型. 1,Date 数据类型  2,time 数据类型  3, datetime2 数据类型  4, datetimeoffset 数据类型 ...

  8. 逐步搭建Lamp环境之vim的三种模式以及基本命令

    在Linux中vim的三种模式分别为:命令模式.末行模式.编辑模式.以下是三者的关系图: 三种模式的彼此切换: 命令模式是vim中的默认模式. 命令模式切换至末行模式: 使用英文冒号(:). 末行模式 ...

  9. 如何在Raspberry Pi 3B中安装Windows 10 IoT Core

    Windows 10 IoT Core简介 Windows 10 IoT是微软专门为物联网生态打造的操作系统,Windows 10 IoT Core则是Windows 10 IoT 操作系统的核心版本 ...

  10. CentOS6.9-zabbix3.2启动失败原因及页面没有mysql选择项

     环境内核信息: [root@zabbix- ~]# uname -a Linux lodboyedu- -.el6.x86_64 # SMP Tue Mar :: UTC x86_64 x86_64 ...