<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. 【原创】通过搬瓦工vps搭建SS环境，供学习用

    博主前段时间处于某些不可告人的目的,但又限于各类科学工具被禁的窘境,用搬瓦工的vps搭建了次SS环境,现在就来回顾并不知廉耻的传授下经验. 第一步:购买vps 1.登录官网 https://bwh1. ...

  2. ThinkPHP中处理Layout模板的问题

    ThinkPHP中的模板引擎内置了布局模板功能支持,可以方便实现嵌套. 其中有两种布局方式,一种为以布局模板为入口的布局方式,但是需要开启LAYOUT_ON 参数(默认不开启) 并且设置布局入口文件名 ...

  3. php获取当前月与上个月月初及月末时间戳的方法

    php 获取今日.昨日.上周.本月的起始时间戳和结束时间戳的方法,主要使用到了 php 的时间函数 mktime.下面首先还是直奔主题以示例说明如何使用 mktime 获取今日.昨日.上周.本月的起始 ...

  4. 写一段PHP代码，确保多个进程同时写入同一个文件成功（腾讯）

       

  5. WireShark 使用

    1.干货 Wireshark(前称Ethereal)是一个网络封包分析软件.网络封包分析软件的功能是撷取网络封包,并尽可能显示出最为详细的网络封包资料.Wireshark使用WinPCAP作为接口,直 ...

  6. C# 修改DataTable列 类型 并从新赋值

    DataTable dt = ds.Tables[]; DataTable dtResult = new DataTable(); //克隆表结构 dtResult = dt.Clone(); for ...

  7. keystone V3 与Microsoft Active Directory（AD）的集成

    一  环境准备 1. 安装或在现有的windows server2008,操作Microsoft Acitve Directory(下面简称AD).欲了解AD请看系列文章[深入浅出ActiveDire ...

  8. 利用qq设置个性化的域名邮箱

    首先有域名.先去注冊先,国内有非常多域名交易平台.我是在易名中国网上注冊的一个域名,Lios.top,因为这个域名价值非常低.一年才 10元,价格非常实惠. 下一步就是去qq邮箱的设置里,找到账户,然 ...

  9. 从头认识Spring-2.7 自己主动检測Bean（2）-过滤器&lt;context:include-filter/&gt;

    这一章节我们来讨论一下过滤器<context:include-filter/>的使用. 1.domain Person接口: package com.raylee.my_new_sprin ...

  10. 2015级C++第4周项目 函数

    [项目1-求最大公约数] 參考解答 (1)输入两个数.并求出其最大公约数 #include <iostream> using namespace std; //自己定义函数的原型(即函数声 ...