1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <title>乌龟抓小鸡</title>
  6.  </head>
  7.  <body onkeydown="return move(event)">
  8.  
  9.  <script language="JavaScript">
  10.      //相应用户点击按钮或者按下键盘
  11.      function move(obj){
  12.          //乌龟的高度和宽度
  13.          var wugui_height=45;
  14.          var wugui_width=75;
  15.          //公鸡的高度和宽度
  16.          var cock_height=53;
  17.          var cock_width=64;
  18.          //得到乌龟所在的div对象 DOM编程
  19.          var wugui=document.getElementById("wugui");
  20.      if(window.event){//window.event可以判断用户是通过按键盘还是点击 控制乌龟的
  21.          key=obj.keyCode;//获得用户按下键的code
  22.      }
  23.          var wugui_top=wugui.style.top;
  24.          var wugui_left=wugui.style.left;
  25.          //把获取的100px转成100；
  26.          wugui_top=parseInt(wugui_top.substring(0,wugui_top.indexOf("p")));
  27.          wugui_left=parseInt(wugui_left.substring(0,wugui_left.indexOf("p")));
  28.          //判断用户按的哪个键
  29.      if(obj.value=="向下"||key==83){
  30.          wugui_top=wugui_top+10;
  31.          wugui.style.top=(wugui_top+10)+"px";
  32.      }
  33.          else if(obj.value=="向上"||key==87){
  34.          wugui_top=wugui_top-10;
  35.          wugui.style.top=(wugui_top-10)+"px";
  36.      }
  37.          else if(obj.value=="向左"||key==65){
  38.          wugui_left=wugui_left-10;
  39.          wugui.style.left=(wugui_left-10)+"px"
  40.      }
  41.          else if(obj.value=="向右"||key==68){
  42.          wugui_left=wugui_left+10;
  43.          wugui.style.left=(wugui_left+10)+"px";
  44.      }
  45.  
  46.          //得到公鸡的left和top
  47.          var cock=document.getElementById("cock");
  48.          //得到公鸡当前的top和left
  49.          var cock_top=cock.style.top;
  50.          var cock_left=cock.style.left;
  51.  
  52.          //处理px后缀
  53.          cock_top=parseInt(cock_top.substring(0,cock_top.indexOf("p")));
  54.          cock_left=parseInt(cock_left.substring(0,cock_left.indexOf("p")));
  55.          //判断是否碰到公鸡
  56.          y=Math.abs(cock_top-wugui_top);//公鸡乌龟两点间的纵坐标绝对值
  57.          x=Math.abs(cock_left-wugui_left);//公鸡乌龟两点间的横坐标的绝对值
  58.  
  59.          //方法一
  60.          xx=0;
  61.          yy=0;
  62.  
  63.      if(wugui_top<cock_top){//判断乌龟公鸡谁在上面 如果乌龟在上面
  64.          if(y<wugui_height) {
  65.              yy=1;
  66.          }
  67.      }
  68.      else{//乌龟在下面
  69.          if(y<cock_height){
  70.          yy=1;
  71.          }
  72.      }
  73.  
  74.      if(wugui_left<cock_left){//判断乌龟公鸡谁在左侧
  75.  
  76.          if(x<wugui_width)//75 如果乌龟在左侧
  77.          {
  78.              xx=1;
  79.          }
  80.      }
  81.      else{
  82.          if(x<cock_width)//64
  83.          {
  84.              xx=1;
  85.          }
  86.      }
  87.  
  88.      if(xx==1&&yy==1)
  89.          {
  90.          alert("乌龟好猛啊");
  91.          }
  92.      }
  93.  </script>
  94.  <table border='1'>
  95.  <tr><td colspan="3" align="center">控制区域</td></tr>
  96.  <tr><td></td><td>
  97.  <input type="button" value="向上" onclick="move(this)"/>
  98.  </td><td></td></tr>
  99.  <tr><td>
  100.  <input type="button" value="向左" onclick="move(this)"/>
  101.  </td><td></td><td>
  102.  <input type="button" value="向右" onclick="move(this)"/>
  103.  </td></tr>
  104.  <tr><td></td><td>
  105.  <input type="button" value="向下" onclick="move(this)"/>
  106.  </td><td></td></tr>
  107.  </table>
  108.  <!--放乌龟 --->
  109.  <div id="wugui" style="position:absolute;left:100px;top:320px;">
  110.  <img src="1.png" border="1"/>
  111.  </div>
  112.  
  113.  <div id="cock" style="position:absolute;left:200px;top:300px;">
  114.  <img src="2.png" border="1"/>
  115.  </div>
  116.  </body>
  117.  </html>

例子：韩顺平JavaScript----JS乌龟抓小鸡游戏的更多相关文章

  1. jsDOM编程-乌龟抓小鸡游戏

    <html> <head>  <title>js乌龟抓小鸡游戏 </title>    <meta http-equiv="conten ...

  2. 韩顺平dedecms讲解上课记录

    感谢韩顺平: 如何打开php的gd库,通过php设置->php扩展-->phpdb库;打上勾就行: dede存在四张十分重要的表,channeltype,模型表最原始的发源arctype: ...

  3. HTML5坦克大战（韩顺平版本）

    HTML5坦克大战(韩顺平版本) 2017-3-22 22:46:22 by SemiconductorKING 去年暑假学习了一下HTML5实现简单的坦克大战,觉得对JavaScript初学者来说, ...

  4. 韩顺平Java（持续更新中）

    原创上课笔记,转载请注明出处 第一章 面向对象编程(中级部分) PDF为主 1.1 IDEA 删除当前行,ctrl+y 复制当前行,ctrl+d 补全代码,alt+/ 添加或者取消注释,ctrl+/ ...

  5. 【MarkMark学习笔记学习笔记】javascript/js 学习笔记

    1.0, 概述.JavaScript是ECMAScript的实现之一 2.0,在HTML中使用JavaScript. 2.1 3.0,基本概念 3.1,ECMAScript中的一切(变量,函数名,操作 ...

  6. 韩顺平Oracle笔记

    韩顺平Oracle笔记 分类: DataBase2011-09-07 10:24 3009人阅读 评论(0) 收藏 举报 oracle数据库sqljdbcsystemstring   目录(?)[-] ...

  7. javascript(js)小数精度丢失的解决方案

    原因:js按照2进制来处理小数的加减乘除,在arg1的基础上 将arg2的精度进行扩展或逆扩展匹配,所以会出现如下情况. javascript(js)的小数点加减乘除问题,是一个js的bug如0.3* ...

  8. 【转】关于URL编码/javascript/js url 编码/url的三个js编码函数

    来源:http://www.cnblogs.com/huzi007/p/4174519.html 关于URL编码/javascript/js url 编码/url的三个js编码函数escape(),e ...

  9. paip.java 以及JavaScript (js) 的关系以及区别

    paip.java 以及JavaScript (js) 的关系以及区别 作者Attilax  艾龙,  EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http:// ...

随机推荐

  1. Tosska SQL Tuning Expert 工具优化SQL语句

    对于SQL开发人员和DBA来说,根据业务需求写出一条正确的SQL很容易.但是SQL的执行性能怎么样呢?能优化一下跑得更快吗?如果不是资深的DBA,估计很多人都没有信心. 幸运的是,自动化优化工具可以帮 ...

  2. session与cookie的区别与联系

    session与cookie是在做项目中很常用的会话技术,session与cookie也是面试中被问到频率最高的问题,有一次我去面试,面试官就怼着我session与cookie一直问(头都大了),下面 ...

  3. javascript设计模式——单例模式

    前面的话 单例模式是指保证一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式是一种常用的模式,有一些对象往往只需要一个,比如线程池.全局缓存.浏览器中的window对象等.在javaScri ...

  4. ssm开发关于web.xml配置

    <?xml version="1.0" encoding="UTF-8"?> <web-app version="3.0" ...

  5. 洛谷 P3927 Factorial

    题目描述 SOL君很喜欢阶乘.而SOL菌很喜欢研究进制. 这一天,SOL君跟SOL菌炫技,随口算出了n的阶乘. SOL菌表示不服,立刻就要算这个数在k进制表示下末尾0的个数. 但是SOL菌太菜了于是请 ...

  6. 网络基础之 OSI七层模型

    OSI七层模型模型图如下: 前三层(应用层,表示层,会话层)=>给用户提供服务. 后四层(传输层,网络层,数据链路层,物理层)=>数据传递提供服务. 其中 数据链路层中MAC地址负责局域网 ...

  7. jQuery使用serialize(),serializeArray()方法取得表单数据+字符串和对象类型两种表单提交的方法

    原始form表单值获取方式(手动): $.ajax({ type: "POST", url: "ajax.php", data: "Name=摘取天上 ...

  8. HDU 1043 Eight (BFS&#183;八数码&#183;康托展开)

    题意  输出八数码问题从给定状态到12345678x的路径 用康托展开将排列相应为整数  即这个排列在全部排列中的字典序  然后就是基础的BFS了 #include <bits/stdc++.h ...

  9. .NET作品集：linux下的.net mvc cms

    cms程序架构 本程序是主要是用于企业网站开发的,也可以做博客程序,程序是从之前上一篇的.net 博客程序改进过来的,主要技术由webform转成.net mvc了,由于是很早之前的项目,12年还是m ...

  10. 解决IOS微信内置浏览器返回后不执行js脚本的问题

    在A页面写一个$(function(){}) 后随便点击一个URL跳转到B页面 利用微信内置浏览器 返回键返回到A页面后发现这段JS不执行,后来找到了解决方案 $(function () { var ...