jsDOM编程-乌龟抓小鸡游戏
<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编程-乌龟抓小鸡游戏的更多相关文章
- 例子:韩顺平JavaScript----JS乌龟抓小鸡游戏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- YTU 2845: 编程题AB-卡片游戏
2845: 编程题AB-卡片游戏 时间限制: 1 Sec 内存限制: 128 MB 提交: 30 解决: 13 题目描述 小明对数字的序列产生了兴趣: 现有许多张不同的数字卡片,用这若干张卡片能排 ...
- python游戏编程——乌龟和鱼类场景编程
综合举例: 游戏编程:按以下要求定义一个乌龟类和鱼类并尝试编写游戏. O 假设游戏场景为范围(x, y)为0<=x<=10,0<=y<=10 · 游戏生成1只 ...
- 【Qt编程】3D迷宫游戏
说起迷宫想必大家都很熟悉,个人感觉迷宫对人的方向感是很大的考验,至少我的方向感是不好的,尤其是在三维空间中.由于这段时间帮导师做项目用到了三维作图,便心血来潮想做个三维迷宫玩玩.要想画出三维的迷宫游戏 ...
- [转]Linux Socket编程 Socket抓取网页源码
“一切皆Socket!” 话虽些许夸张,但是事实也是,现在的网络编程几乎都是用的socket. ——有感于实际编程和开源项目研究. 我们深谙信息交流的价值,那网络中进程之间如何通信,如我们每天打开浏览 ...
- 小孩学习编程的绝佳游戏——CodeMonkey
CodeMonkey于2014年1月在以色列成立.它的愿景是建立一个全球性的学习平台,让孩子们通过游戏的方式学习.发现.创造和分享,同时在此过程中获得编程这一项21世纪必备的技能. 通常提到CodeM ...
- 编程之美----NIM游戏
: 博弈游戏·Nim游戏 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 今天我们要认识一对新朋友,Alice与Bob.Alice与Bob总是在进行各种各样的比试,今天他 ...
- jsDOM编程-小球在盒子里来回撞击
首先写一个小页面:页面需要一个div 这个div就是盒子,然后在div里在包含一个子div 这个子div就包含一张小球的图片 代码: <!doctype html> <html> ...
- python编程学习--Pygame - Python游戏编程入门(0)---转载
原文地址:https://www.cnblogs.com/wuzhanpeng/p/4261015.html 引言 博客刚开,想把最近学习的东西记录下来,算是一种笔记.最近打算开始学习Python,因 ...
随机推荐
- 12. ZooKeeper配额和认证
ZooKeeper具有与其数据模型相关的可配置配额(quota). 可以设置znode上的配额限制和存储的数据量.如果ZooKeeper命名空间中的一个子树超出与其关联的配额,ZooKeeper会在日 ...
- Javascript-基础概念总结
[作用域]javascript中的作用域可以理解为一个语句执行的环境大小,有全局的作用域,函数作用域和eval作用域.在JS中没有块级作用域.讲到作用域,不得不讲执行环境,执行环境在JS中是最为重要的 ...
- Vue使用Echarts以及Echarts配置分享
一.本篇文章将给大家分享如何在vue中使用echart以及echart各项配置,这些配置都是工作中比较常见以及常用到的,所以给大家分享下,希望对大家有用. 二.vue中使用echart. 1.首先下载 ...
- null id in entry (don't flush the Session after an exception occurs) 解决方法
最近在学习基于ssh的注解的系统,然后在实现往数据库增加记录时可以增加第一个,第二个就报错,在网上查了很多资料,大多都是 该异常信息是在提示我们没有为数据中的非空字段设置值. 然后就一直没有明白 明明 ...
- Scala入门系列(四):Map & Tuple
Map 创建Map // 创建一个不可变的Map scala> val ages = Map("Leo" -> 30, "Sparks" -> ...
- nyoj 63 小猴子下落 思维
nyoj 63 小猴子下落 题目链接: http://acm.nyist.net/JudgeOnline/problem.php?pid=63 思路: 不需要用指针创建二叉树,也不需要用数组来模拟二叉 ...
- 05.haproxy+mysql负载均衡 整合 redis集群+ssm
本篇重点讲解haproxy+mysql负载均衡,搭建完成后与之前搭建的redis+ssm进行整合 (注:这里用到了两台mysql数据库,分别安装两台虚拟机上,已经成功实现主主复制,如果有需要,请查看我 ...
- Xamarin 使用极光推送 详细教程
源码下载地址:http://download.csdn.net/download/kendocross/8677263 有兴趣的看以去看看 一.首先新建一个Xamarin.Android 项目,过程 ...
- quzrtz的使用
Quartz是一个大名鼎鼎的Java版开源定时调度器,功能强悍,使用方便. 一.核心概念 1.Job 表示一个工作,要执行的具体内容,此接口只有一个方法 void execute(JobExecuti ...
- Cocos游戏引擎,让小保安成就大梦想
秦丕胜是大连的一位保安.与非常多自学成才的人一样,2010年,在考上日照职业技术学院一年后便退了学. 因为没有高学历.加上喜欢自由,他来到了大连成为了一名保安.从高中開始,秦丕胜就酷爱代码,他曾自豪地 ...