<!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>乌龟抓小鸡</title>

 </head>

 <body onkeydown="return move(event)">

 <script language="JavaScript">

     //相应用户点击按钮或者按下键盘

     function move(obj){

         //乌龟的高度和宽度

         var wugui_height=45;

         var wugui_width=75;

         //公鸡的高度和宽度

         var cock_height=53;

         var cock_width=64;

         //得到乌龟所在的div对象 DOM编程

         var wugui=document.getElementById("wugui");

     if(window.event){//window.event可以判断用户是通过按键盘还是点击 控制乌龟的

         key=obj.keyCode;//获得用户按下键的code

     }

         var wugui_top=wugui.style.top;

         var wugui_left=wugui.style.left;

         //把获取的100px转成100；

         wugui_top=parseInt(wugui_top.substring(0,wugui_top.indexOf("p")));

         wugui_left=parseInt(wugui_left.substring(0,wugui_left.indexOf("p")));

         //判断用户按的哪个键

     if(obj.value=="向下"||key==83){

         wugui_top=wugui_top+10;

         wugui.style.top=(wugui_top+10)+"px";

     }

         else if(obj.value=="向上"||key==87){

         wugui_top=wugui_top-10;

         wugui.style.top=(wugui_top-10)+"px";

     }

         else if(obj.value=="向左"||key==65){

         wugui_left=wugui_left-10;

         wugui.style.left=(wugui_left-10)+"px"

     }

         else if(obj.value=="向右"||key==68){

         wugui_left=wugui_left+10;

         wugui.style.left=(wugui_left+10)+"px";

     }

         //得到公鸡的left和top

         var cock=document.getElementById("cock");

         //得到公鸡当前的top和left

         var cock_top=cock.style.top;

         var cock_left=cock.style.left;

         //处理px后缀

         cock_top=parseInt(cock_top.substring(0,cock_top.indexOf("p")));

         cock_left=parseInt(cock_left.substring(0,cock_left.indexOf("p")));

         //判断是否碰到公鸡

         y=Math.abs(cock_top-wugui_top);//公鸡乌龟两点间的纵坐标绝对值

         x=Math.abs(cock_left-wugui_left);//公鸡乌龟两点间的横坐标的绝对值

         //方法一

         xx=0;

         yy=0;

     if(wugui_top<cock_top){//判断乌龟公鸡谁在上面 如果乌龟在上面

         if(y<wugui_height) {

             yy=1;

         }

     }

     else{//乌龟在下面

         if(y<cock_height){

         yy=1;

         }

     }

     if(wugui_left<cock_left){//判断乌龟公鸡谁在左侧

         if(x<wugui_width)//75 如果乌龟在左侧

         {

             xx=1;

         }

     }

     else{

         if(x<cock_width)//64

         {

             xx=1;

         }

     }

     if(xx==1&&yy==1)

         {

         alert("乌龟好猛啊");

         }

     }

 </script>

 <table border='1'>

 <tr><td colspan="3" align="center">控制区域</td></tr>

 <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></td><td>

 <input type="button" value="向右" onclick="move(this)"/>

 </td></tr>

 <tr><td></td><td>

 <input type="button" value="向下" onclick="move(this)"/>

 </td><td></td></tr>

 </table>

 <!--放乌龟 --->

 <div id="wugui" style="position:absolute;left:100px;top:320px;">

 <img src="1.png" border="1"/>

 </div>

 <div id="cock" style="position:absolute;left:200px;top:300px;">

 <img src="2.png" border="1"/>

 </div>

 </body>

 </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. H5页面项目的思路整理

    这是H5项目完成后的一些整理,有些理解不能非常准确,希望大家能帮忙指出. 移动端的适配 一些名词解释 visual viewport 可视视图 layout viewport 布局视图 vm 可视视图 ...

  2. KMP算法求next数组

    next数组的求解方法是:第一位的next值为0,第二位的next值为1.后面求解每一位的next值时,根据前一位进行比较.首先将前一位与其next值对应的内容进行比较,如果相等,则该位的next值就 ...

  3. codeforces 893C Rumor 前向星+dfs

    893C Rumor 思路: 前向星+DFS 代码: #include <bits/stdc++.h> using namespace std; #define _for(i,a,b) f ...

  4. 51nod 1020 逆序排列 DP

    在一个排列中,如果一对数的前后位置与大小顺序相反,即前面的数大于后面的数,那么它们就称为一个逆序.一个排列中逆序的总数就称为这个排列的逆序数. 如2 4 3 1中,2 1,4 3,4 1,3 1是逆序 ...

  5. HDU 1394 逆序数 线段树单点跟新 | 暴力

    Minimum Inversion Number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java ...

  6. Awk,Cat,Head分析Nginx日志常用命令

    Nginx 日志分析   1.根据访问IP统计UV   awk '{print $1}'  access.log|sort | uniq -c |wc -l   2.统计访问URL统计PV   awk ...

  7. WeChat 隐私政策

    隐私政策 本应用尊重并保护所有使用服务用户的个人隐私权.为了给您提供更准确.更有个性化的服务,本应用会按照本隐私权政策的规定使用和披露您的个人信息.但本应用将以高度的勤勉.审慎义务对待这些信息.除本隐 ...

  8. SketchMaster 隐私政策

    隐私政策 本应用尊重并保护所有使用服务用户的个人隐私权.为了给您提供更准确.更有个性化的服务,本应用会按照本隐私权政策的规定使用和披露您的个人信息.但本应用将以高度的勤勉.审慎义务对待这些信息.除本隐 ...

  9. memcached 安装以及在php中使用

    最近做的一个项目需要不断对数据库内容进行读取和刷新,所以数据库压力很大,用户数目多的时候响应速度也严重受影响. 于是准备将一部分常用数据通过缓存在服务器内存中,减少对数据库的操作来缓解压力(memca ...

  10. 数据模型与查询语言 ------《Designing Data-Intensive Applications》读书笔记2

    数据模型是开发软件的最重要的部分,因为它们对应用程序有着深远的影响:不仅是软件的编写方式,而且也影响我们如何解决的问题的方式.第二篇读书笔记,我们聊一聊数据模型的设计. 1.数据模型的分层 作为一个开 ...