个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
25
4
我正在使用没有 Canvas (!) 的 HTML5 和 jQuery 创建一个迷你游戏，并且在开发弹跳部分时(当圆圈与阶段限制发生碰撞时)，我发现了一个错误:
当圆圈与底部或右侧限制碰撞并且您一直按向下/向右箭头键时，圆圈会继续弹跳到阶段限制，但是当您对相反的阶段限制(顶部和左侧)执行相同的操作时，圆圈反弹一两次，然后停止(我想得到第二个 react ，当它反弹然后停止时)。 我还发现这个bug只出现在Safari中。谁能帮我解决一下？
<!DOCTYPE html>
<html>
<head>
<title>VelJS 3 Pre-Alpha</title>
<!-- This app was coded by Tiago Marinho -->
<!-- Special thanks to Drizr, from the interwebs -->
<!-- Do not leech it! -->
<link rel="shortcut icon" href="http://i.imgur.com/Jja8mvg.png">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var yvel = 0, xvel = 0;
var up = false, // W or arrow up
left = false, // A or arrow left
right = false, // D or arrow right
down = false; // S or arrow down
// Keydown:
document.addEventListener("keydown", function (evt) {
if (evt.keyCode == 87 || evt.keyCode == 38) { // up
up = true;
}
if (evt.keyCode == 65 || evt.keyCode == 37) { // left
left = true;
}
if (evt.keyCode == 68 || evt.keyCode == 39) { // right
right = true;
}
if (evt.keyCode == 83 || evt.keyCode == 40) { // down
down = true;
}
if (evt.keyCode == 8 || evt.keyCode == 80) { // del/p
}
});
// Keyup:
document.addEventListener("keyup", function (evt) {
if (evt.keyCode == 87 || evt.keyCode == 38) { // up
up = false;
}
if (evt.keyCode == 65 || evt.keyCode == 37) { // left
left = false;
}
if (evt.keyCode == 68 || evt.keyCode == 39) { // right
right = false;
}
if (evt.keyCode == 83 || evt.keyCode == 40) { // down
down = false;
}
});
function y(obj){
return $(obj).offset().top;
}
function x(obj){
return $(obj).offset().left;
}
setInterval(function(){
// Keydown/keyup handler:
if (up == true) {
yvel -= 2;
} else {
if (yvel < 0) {
yvel++;
}
}
if (left == true) {
xvel -= 2;
} else {
if (xvel < 0) {
xvel++;
}
}
if (right == true) {
xvel += 2;
} else {
if (xvel > 0) {
xvel--;
}
}
if (down == true) {
yvel += 2;
} else {
if (yvel > 0) {
yvel--;
}
}
var nextposx = $("circle").offset().left+xvel/16;
var nextposy = $("circle").offset().top+yvel/16;
if(nextposy < 0 || nextposy+20 > window.innerHeight){
yvel = Math.round(yvel*-0.5);
}
if(nextposx < 0 || nextposx+20 > window.innerWidth){
console.log(xvel);
xvel = Math.round(xvel*-0.5);
console.log(xvel);
}
$("circle").css({
top:$("circle").offset().top+yvel/16,
left:$("circle").offset().left+xvel/16
});
},8);
</script>
<style>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'> * {
margin: 0;
}
html,
body {
-webkit-text-smoothing: antialiased;
height:100%;
overflow:hidden;
color: #fff;
background-color: #181818;
}
circle{
position:absolute;
top:0;
left:0;
width:20px;
height:20px;
border-radius:10px;
background:#fff;
}
</style>
</head>
<body>
<circle></circle>
</body>
</html>
我没有使用 Canvas ，因为我已经尝试使用 EaselJS 创建这个迷你游戏，但我发现了很多问题，并且没有理由在我的情况下使用它，因为这个游戏没有任何图像(然后不需要硬件加速)。
最佳答案
此答案是对先前无效答案的完整更新。答案的完整代码在底部。
我必须检查所有浏览器以查看问题所在:
-在 Chrome 上一切正常，所以我没有什么可以改变的。
-在 Safari 上，球在底部和右侧弹跳。我发现问题是由设置为 float 而不是 int 的位置引起的，所以我只需要四舍五入位移。
$("circle").css({
top:Math.round($("circle").offset().top+yvel/16),
left:Math.round($("circle").offset().left+xvel/16)
});
我的第一个答案是通过在位移中作弊来解决问题，这次答案解决了它。这种改进应该不会影响 Chrome(但我现在无法对其进行测试)。
- 在 Firefox 上，球停在页面底部之前。我只需要更改 body 碰撞的比较器，并向其添加 0px 的 margin。在旧版本的 Firefox 中，当你按下 UP 时，球会在上升之前稍微下降，我认为这个错误是由于 xvel--, xvel++, yvel-- 和 yvel++ 比 xvel+=2, xvel-=2, yvel+= 2 和 yvel-=2 所以我将它们替换为两次 ++xvel，两次 --xvel，两次++yvel 和两次 --yvel 应该更快(同样我现在无法测试它所以我希望它能工作)。这些改进应该不会影响 Chrome 和 Safari。
然后我优化你的代码，让它更有效率。
您的 HTML 没有改变。
你的CSS现在是:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'> * {
margin: 0;
}
html, body {
-webkit-text-smoothing: antialiased;
height:100%;
overflow:hidden;
color: #fff;
background-color: #181818;
margin: 0px;
}
circle {
position:absolute;
top:0;
left:0;
width:20px;
height:20px;
border-radius:10px;
background:#fff;
}
您的 JavaScript 现在是:
var yvel = 0, xvel = 0;
var up = false, // W or arrow up
left = false, // A or arrow left
right = false, // D or arrow right
down = false; // S or arrow down
// Keydown:
document.addEventListener("keydown", function (evt) {
if (evt.keyCode == 87 || evt.keyCode == 38) { // up
up = true;
}
if (evt.keyCode == 65 || evt.keyCode == 37) { // left
left = true;
}
if (evt.keyCode == 68 || evt.keyCode == 39) { // right
right = true;
}
if (evt.keyCode == 83 || evt.keyCode == 40) { // down
down = true;
}
if (evt.keyCode == 8 || evt.keyCode == 80) { // del/p
}
});
// Keyup:
document.addEventListener("keyup", function (evt) {
if (evt.keyCode == 87 || evt.keyCode == 38) { // up
up = false;
}
if (evt.keyCode == 65 || evt.keyCode == 37) { // left
left = false;
}
if (evt.keyCode == 68 || evt.keyCode == 39) { // right
right = false;
}
if (evt.keyCode == 83 || evt.keyCode == 40) { // down
down = false;
}
});
function y(obj){
return $(obj).offset().top;
}
function x(obj){
return $(obj).offset().left;
}
setInterval(function(){
// Keydown/keyup handler:
if (up) {
--yvel;
--yvel;
} else if (yvel < 0) {
yvel++;
}
if (left) {
--xvel;
--xvel;
} else if (xvel < 0) {
xvel++;
}
if (right) {
++xvel;
++xvel;
} else if (xvel > 0) {
xvel--;
}
if (down) {
++yvel;
++yvel;
} else if (yvel > 0) {
yvel--;
}
var nextposx = $("circle").offset().left+xvel/16;
var nextposy = $("circle").offset().top+yvel/16;
if(nextposy < 0 || nextposy+20 > $('body').height()){
yvel = Math.round(yvel*-0.5);
}
if(nextposx < 0 || nextposx+20 > $('body').width()){
xvel = Math.round(xvel*-0.5);
}
$('circle').css({
top:Math.round($('circle').offset().top+yvel/16),
left:Math.round($('circle').offset().left+xvel/16)
});
},8);
你有一个 JSFiddle 结果 here .
剩下的唯一错误是，在 Firefox 中，圆圈在右侧超出了几个像素，但它非常小。
对不起，如果我的英语不好，我希望你能理解我写的所有内容。我想我在这里的工作已经完成了......玩得开心 =D。
关于javascript - 圆圈弹跳错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22287506/
25
4
0
我是一个 JS 菜鸟。我正在进入浏览器游戏编程，并想制作一个球掉落和弹跳的快速示例以供学习。由于某种原因，当我创建 jsfiddle 时，我的代码实际上不起作用，我的 div id="ball"的 o
我正在努力寻找为此目的的插件/插件，它是我项目的关键部分，我忽略了它，现在它咬了我。 我需要 jQuery 弹跳的变体，它使 div 无限期地围绕父 div/包装器弹跳。 实际上，我将拥有一个屏幕，用
我的 Nib 底部有一个 UIView。我希望它的高度能够增长，但让它看起来好像它没有移动位置，只是在增长。然后将高度缩小回原来的高度，除了高度之外不进行任何移动。不幸的是，它在 y 位置上反弹。它会
我做错了什么？我的技能栏正在跳舞。加载后我想修复它们。 在这里检查我的笔:http://codepen.io/anon/pen/KdEeWW $(window).scroll(function() {
我有一个有 2 列的表格，其中一列具有设定的宽度，第二列占据页面的其余部分。 在第一列中，我有另一个包含 2 个 tr 元素的表(这是由 asp 生成的) 如此处所示的表格:http://jsfidd
我正在使用 jQuery 构建基于标准 ul>li 结构的下拉导航。 一切都运行良好，但是，当我到达三元级别项目时，slideToggle 函数会导致“反弹”并且永远不会显示子 UL 由于有相当多的代
大家好，谢谢大家的帮助， 我想做的事情相当简单，我想显示一个跟随我的弹跳/反射 Raycast 的线渲染器。 这是我目前所拥有的。 private LineRenderer lr; public i
我试图对齐中间圆圈中的文本并让它们在圆圈悬停时弹跳(即文本) 这里是: http://jsfiddle.net/cJ3se/ 希望有人能帮忙 丹佛 最佳答案 将元素中的单行文本垂直居中的最简单方法是将
这很难解释，我来试一试。 我目前有一个从右向左无休止地滑动的图像背景，就像传送带一样。图像用完时会重复。 我试图让图像/动画在重复之前反弹(反向)。所以图像慢慢地向一个方向滑动，然后慢慢地向另一个方向
我想知道为什么我的弹跳动画在 JSFiddle 中不起作用但在我的开发网站上工作。请检查这个有什么问题。在我的开发站点中，箭头会弹跳但不会像我的 CSS 类中所说的那样旋转。 .active.ongo
我正在使用Pymunk模拟安装在细长腿顶部枢轴上的盒子的物理特性，该腿固定在地面上。连接盒子和腿的枢轴是 PivotJoint 和 SimpleMotor 的组合，模拟原始伺服系统，用户可以打开和关闭
我正在开发一个带有 ScrollView 的应用程序。不是很明显有更多内容，并且没有滚动指示器( ScrollView 被分页)。 所以，为了给用户一个“嘿，这里有东西……”，我想让 ScrollVi
我的应用程序中有启用了垂直弹跳的 UIScrollView。我需要屏幕底部的弹跳，但没有在屏幕顶部启用。 我不知道如何用以下方法检测 ScrollView : (void)scrollViewWi
我的网站有问题，我在其中使用带有 jQuery UI 的 jQuery，在登录框上创建弹跳效果。 但是，我对带有登录框的 div 有问题，因为它在屏幕左侧弹跳，当它应该在中间弹跳时，它在完成弹跳后
当网页内容大于视口(viewport)时，我正在尝试实现一种解决方案，以防止 iOS 版 Safari 中的 iOS 反弹效果。 我正在处理的页面在结构上非常具体，与此页面非常相似 http://ne
第一次在这里发帖，如有任何标记问题请见谅。写帖子用SOF框架不习惯。 我试图让一些社交图标在悬停时在我的网站上跳动。我从 jQuery UI 抓取代码进行测试并进行了一些小的编辑，但是我遇到了页面上可
我有一个 UIScrollView，我想在滚动时弹跳，但目前它能够弹跳，尽管内容大小与框架相同。如果内容大小和框架大小相同，如何阻止它弹跳？有没有比重写 setContentSize 和 setFra
我的网页最右侧有一个 div (RightSide)，它位于另一个 div (TopBanner) 的正下方。即使用户向下滚动，TopBanner div 也会保持其在屏幕顶部的准确位置。正是我想要的
我有一个带分页的水平 UIScrollView。有两个按钮。一个向左滚动 scrollView，另一个向右滚动。 左边的代码: - (IBAction)goLeftAction:(id)sender
我正在尝试创建自定义垂直 UIScrollView，它可以处理具有不同页面高度的多个页面。 假设: 页面高度等于或大于屏幕高度 如果页面高于屏幕高度，它会像往常一样滚动 UIScrollView –
我是一名优秀的程序员,十分优秀！