这就是我现在正在做的:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<style type="text/css" media="screen">
body { font-family:"HelveticaNeue-Light"; margin: 0px; }
input { width: 75%; }
#wrap { background: #f1f1f1; border: 1px solid #d9d9d9; padding: 0px; }
/* #sprite { position: relative; background: #909090; width: 20px; height: 20px; padding: 20px; }*/
#spriteChatBubble { position: relative; background: #fff; border: 1px solid #000; font-size: 10px; max-width: 200px; }
#controlArea { margin-top: 50px; }
.button { background: #fff; color: #0080ff; padding: 5px; border: 1px solid #0050ff; text-decoration: none; }
.button:active { background: #0080ff; color: #fff; }
</style>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// on load
updatePos();
// get it ready
$("#sprite").css("background-image", "url(left100by100.png)");
// our main block
function detectCollision() {
var spritePos = $("#sprite").position();
var spritePosLeft = spritePos.left;
var spritePosTop = spritePos.top;
var chunkPos = $("#chunk").position();
var chunkPosLeft = chunkPos.left;
var chunkPosTop = chunkPos.top;
// show the chunk's position values (test)
$("#posLeftChunk").text(posLeftChunk);
if (spritePosLeft == chunkPosLeft || spritePosTop == chunkPosTop) {
// make it go somewhere random! :D
var randomLeft = Math.floor(Math.random() * 100);
var randomTop = Math.floor(Math.random() * -100);
// $("#chunk").hide();
$("#chunk").css("top", randomTop + "px");
$("#chunk").css("left", randomLeft + "px");
// $("#spriteChatBubble").animate({"top": "-=" + randomTop}, "fast");
}
}
setInterval(detectCollision, 500);
function insertValues(name){
var name = "foop";
var spritePosition = $("#sprite").position();
var leftVal = spritePosition.left;
var topVal = spritePosition.top;
}
insertValues("");
function showMessage(message) {
$("#spriteChatBubble").show('slow');
$("#messageText").text(message);
$("#spriteChatBubble").delay(5000).hide('slow');
}
function updatePos() {
var position = $("#sprite").position();
$("#posLeft").text(position.left);
$("#posTop").text(position.top);
// updatePos();
// insert the values into a database
insertValues("");
}
$(document).keydown(function(ee) {
$("#spriteChatBubble").hide(); // no need to show this!
// if ($("#sprite").position.left < 0) {
// alert();
// } // fail
if (ee.keyCode == 37) {
// going left!
$("#sprite").css("background-image", "url(left100by100.png)");
// alert("going left!");
$("#sprite").animate({"left": "-=50px"}, "fast");
$("#spriteChatBubble").animate({"left": "-=50px"}, "fast");
updatePos();
}
if(ee.keyCode == 39) {
// going right!
$("#sprite").css("background-image", "url(right100by100.png)");
// alert("going right!");
$("#sprite").animate({"left": "+=50px"}, "fast");
$("#spriteChatBubble").animate({"left": "+=50px"}, "fast");
updatePos();
}
if(ee.keyCode == 38) {
$("#sprite").animate({"top": "-=50px"}, "fast");
$("#spriteChatBubble").animate({"top": "-=50px"}, "fast");
updatePos();
}
if(ee.keyCode == 40) {
$("#sprite").animate({"top": "+=50px"}, "fast");
$("#spriteChatBubble").animate({"top": "+=50px"}, "fast");
updatePos();
}
});
$("#left").click(function() {
$("#sprite").animate({"left": "-=50px"}, "fast");
updatePos();
});
$("#right").click(function() {
$("#sprite").animate({"left": "+=50px"}, "fast");
updatePos();
});
$("#talkButton").click(function() {
showMessage($("#speakField").val());
$("#speakField").val("") ;
});
});
</script>
<!-- Date: 2011-05-23 -->
</head>
<body>
<!-- <div id="spriteChatBubble">
<a class="mt" id="messageText">message</a>
</div> -->
<!-- avatar (you, the player) -->
<div id="sprite" style="position: relative; background: url('right100by100.png'); width: 100px; height: 100px;">
</div>
<!-- chunks -->
<div id="chunk" style="position: relative; background: #909090; width: 20px; height: 5px; top: 100px; left: 80px;"></div>
<div id="controlArea">
position.left: <a id="posLeft">0</a><br>
position.top: <a id="posTop">0</a><br>
<br><br>
position.left (chunk): <a id="posLeftChunk">0</a><br>
position.top (chunk): <a id="posTopChunk">0</a><br>
<!-- <input type="text" id="speakField" onchange="javascript:void(0);">
<a href="javascript:void(0);" class="button" id="talkButton">talk!</a>
<a href="javascript:void(0);" onclick="showMessage('foo');" class="button" id="">test it</a>
<br><br>
<a href="javascript:void(0);" class="button" id="left">(</a>
<a href="javascript:void(0);" class="button" id="right">)</a>
-->
</div>
</body>
</html>
它在所需方向上将它移动 50 像素，但是检测到 div 碰撞( Sprite 撞到“ block ”)然后它需要重新定位。你知道检测 div 碰撞的更好方法吗？谢谢。
最佳答案
我给你一个理论上的答案:
您想计算您的 div 的边界——获取您的 x、y Angular 值并查看是否有任何其他 div 的边界与您的其他 div 的值相交。如果存在坐标交点，那么您就会发生碰撞。
如何获取位置坐标:
Top: $("#div").offset().top
Left: $("#div").offset().left
Bottom: $("#div").offset().top + $("#div").height()
Right: $("#div").offset().left + $("#div").width()
关于jquery - 检测div碰撞？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5930020/
我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("
我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll
rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送
我有一个使用SeleniumWebdriver和Nokogiri的Ruby应用程序。我想选择一个类，然后对于那个类对应的每个div，我想根据div的内容执行一个Action。例如，我正在解析以下页面:https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=puppies这是一个搜索结果页面，我正在寻找描述中包含“Adoption”一词的第一个结果。因此机器人应该寻找带有className:"result"的div，对于每个检查它的.descriptiondiv是否包含单词“adoption
我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam
我想知道我的代码是否在rspec下运行。这可能吗？原因是我正在加载一些错误记录器，这些记录器在测试期间会被故意错误(expect{x}.toraise_error)弄得乱七八糟。我查看了我的ENV变量，没有(明显的)测试环境变量的迹象。 最佳答案 在spec_helper.rb的开头添加:ENV['RACK_ENV']='test'现在您可以在代码中检查RACK_ENV是否经过测试。 关于ruby-检测由RSpec、Ruby运行的代码，我们在StackOverflow上找到一个类似的问题
我正在使用rubydaemongem。想知道如何向停止操作添加一些额外的步骤？希望我能检测到停止被调用，并向其添加一些额外的代码。任何人都知道我如何才能做到这一点？ 最佳答案 查看守护程序gem代码，它似乎没有用于此目的的明显扩展点。但是，我想知道(在守护进程中)您是否可以捕获守护进程在发生“停止”时发送的KILL/TERM信号...？trap("TERM")do#executeyourextracodehereend或者你可以安装一个at_exit钩子(Hook):-at_exitdo#executeyourextracodehe
我有一个定义类的Ruby脚本。我希望脚本执行语句BoolParser.generate:file_base=>'bool_parser'仅当脚本作为可执行文件被调用时，而不是当它被irbrequire(或通过-r在命令行上传递)时。我可以用什么来包装上面的语句，以防止它在我的Ruby文件加载时执行？ 最佳答案 条件$0==__FILE__...!/usr/bin/ruby1.8classBoolParserdefself.generate(args)p['BoolParser.generate',args]endendif$0==_
我有以下字符串，我想检测那里的换行符。但是Ruby的字符串方法include?检测不到它。我正在运行Ruby1.9.2p290。我哪里出错了？"/'ædres/\nYour".include?('\n')=>false 最佳答案 \n需要在双引号内，否则无法转义。>>"\n".include?'\n'=>false>>"\n".include?"\n"=>true 关于Ruby无法检测字符串中的换行符，我们在StackOverflow上找到一个类似的问题： h
文章目录1.自动驾驶实战：基于Paddle3D的点云障碍物检测1.1环境信息1.2准备点云数据1.3安装Paddle3D1.4模型训练1.5模型评估1.6模型导出1.7模型部署效果附录show_lidar_pred_on_image.py1.自动驾驶实战：基于Paddle3D的点云障碍物检测项目地址——自动驾驶实战：基于Paddle3D的点云障碍物检测课程地址——自动驾驶感知系统揭秘1.1环境信息硬件信息CPU:2核AI加速卡:v100总显存:16GB总内存:16GB总硬盘:100GB环境配置Python:3.7.4框架信息框架版本:PaddlePaddle2.4.0（项目默认框架版本为2.3