<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. linux 挂在win下文件

    使用mount命令 #mount -t cifs -o username=abc,password=1234 //192.168.1.10/linux /mnt/linux #mount -t cif ...

  2. 15. 使用Apache Curator管理ZooKeeper

    Apache ZooKeeper是为了帮助解决复杂问题的软件工具,它可以帮助用户从复杂的实现中解救出来. 然而,ZooKeeper只暴露了原语,这取决于用户如何使用这些原语来解决应用程序中的协调问题. ...

  3. 一个简易的服务框架lsf

    项目地址:https://github.com/jianliu/lsf 主体思路是利用javaassist实现一个代理类,代理java的接口,实现每一个方法,实现的代码是对每个方法的名称.参数构建一个 ...

  4. .NET版支付宝商户会员卡接入

    最近公司计划对接支付宝会员卡功能,而任务恰巧由领导安排给我这边,小弟之前也未做过支付宝接口,研究了三天,终于将支付宝会员卡API接口大体上调通了,现将其整理下,以供参考. 蚂蚁金服开发平台-商户会员卡 ...

  5. Foxmail 7.0破解版，拷贝到新机器后，发送邮件乱码问题

    申请了新机器,挺开心,键盘和鼠标也好用了,但是新机器也随之而来一些不便,以前存储的数据需要重新拷贝.还有一些邮件,有些邮件标记了*号. Foxmail7.0绿色版本还挺好用,直接拷贝到新机器上就能直接 ...

  6. Spring Cloud Zuul

    新建Spring Boot工程,命名为zuul 1.pom.xml添加依赖 <?xml version="1.0" encoding="UTF-8"?&g ...

  7. Windows下docker的安装，将ASP.NET Core程序部署在docker中

    参考文章: https://www.cnblogs.com/jRoger/p/aspnet-core-deploy-to-docker.html https://www.cnblogs.com/jRo ...

  8. Python Django CMDB项目实战之-3创建form表单，并在前端页面上展示

    基于之前的项目代码 Python Django CMDB项目实战之-1如何开启一个Django-并设置base页.index页.文章页面 Python Django CMDB项目实战之-2创建APP. ...

  9. 对deep learning的第一周调研

    下面仅是我的个人认识,说得不正确请轻拍. (眼下,我仅仅看了一些deep learning 的review和TOM Mitchell的书<machine learning>中的神经网络一章 ...

  10. UVa 10170 - The Hotel with Infinite Rooms

    题目:求从s開始的递增序列(每次加1).求出他们加和不小于D的那个最后的加数. 分析:数学题.分治.s + s+1 + ... + n = n*(n+1)/2 - s*(s-1)/2 = (n+s)* ...