例子:韩顺平JavaScript----JS乌龟抓小鸡游戏
2015-09-17 17:46
746 查看
<!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>
相关文章推荐
- JS达到Web指定保存的和打印功能的内容
- JS类的实现
- javascript 和 jq 的调试 用console.log() 函数
- js javascript 获取url,获得当前页面的url,静态html文件js读取url参数
- 用js控制frame框架自适应高度
- createjs-打豆豆小游戏制作(4)
- js之History对象
- js动态引入的四种方式
- Javascript学习笔记【第三章】2
- JS类的封装及实现代码
- javascript控制开始日期,和结束日期在同一个月
- Jsp九大内置对象及四个作用域
- (转)js prototype 详解
- JavaScript编码风格指南(中文版)
- javascript必知必会之prototype
- JSON返回值不是预定的值,而是无效时的值(情况不定)
- js根据URL获取参数的值
- javaScript中的页面传值
- JSP四大作用域
- 搭建D3.js的开发环境