<!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. MySQL二进制日志格式对复制的影响

    复制的分类 基于SQL语句的复制 - SBR 主库二进制日志格式使用STATEMENT 在MySQL 5.1之前仅存在SBR模式, 又称之为逻辑复制. 主库记录CUD操作的SQL语句, 从库会读取并重 ...

  2. 网页设计——4.html基本标签链接,图片,表格

    今天主要认识一个有趣的html标签 1.超链接标签a 基本结构:<a href="url" >内容 </a> url就是网页地址. 但直接用这种超链接,会自 ...

  3. [置顶] Java WebService接口生成和调用 图文详解

    webservice简介: Web Service技术, 能使得运行在不同机器上的不同应用无须借助附加的.专门的第三方软件或硬件, 就可相互交换数据或集成.依据Web Service规范实施的应用之间 ...

  4. 自己动手写http服务器——线程池(一)

    创建一个线程池,每有一个连接对象就将它添加到工作队列中,线程池中的线程通过竞争来取得任务并执行它(它是通过信号量实现的). //filename threadpool.h #ifndef THREAD ...

  5. 二叉树的递归遍历 Tree UVa548

    题意:给一棵点带权的二叉树的中序和后序遍历,找一个叶子使得他到根的路径上的权值的和最小,如果多解,那该叶子本身的权值应该最小 解题思路:1.用getline()输入整行字符,然后用stringstre ...

  6. BigInteger详解

    在Java中有两个类BigInteger和BigDecimal分别表示大整数类和大浮点数类,理论上能够表示无线大的数,只要计算机内存足够大. 这两个类都在 java.math.* 包中,因此每次必须在 ...

  7. C#将dataGridView中显示的数据导出到Excel(大数据量超有用版)

    开发中非常多情况下须要将dataGridView控件中显示的数据结果以Excel或者Word的形式导出来,本例就来实现这个功能. 因为从数据库中查找出某些数据列可能不是必需显示出来,在dataGrid ...

  8. Android之——ListView优化

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/47209253 作为client.其最基本的任务就是最直观的和用户交互.从serve ...

  9. 获取AJAX加载的内容

    1.有些网页内容使用AJAX加载,AJAX一般返回的是JSON,直接对AJAX地址进行post或get,就返回JSON数据了. 2.用抓包工具分析https://movie.douban.com/j/ ...

  10. Jquery 改变样式

    Jquery简单的操作 Jquery 是一个非常好用JS库,有很多的特殊的操作,为了方便,我们都可以引入Jquery. <script src="dist/js/vendor/jque ...