个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我的 javascript 代码有问题。我想编辑代码来制作我的小游戏。
这是我要编辑的原始代码。这是关于弹跳球。当您按下按钮时，球开始弹跳。球的位置是随机的，每个球都是随机移动的。当他们即将逃离边境时，他们正在返回。这段代码中的一切都完美无缺。原代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#border {height:500px; width:500px; border:1px solid grey; margin:auto; position:relative}
b {display:block; height:10px; width:10px; border-radius:5px; background:red; position:absolute}
h1,div {text-align:center; margin:10px}
</style>
</head>
<body>
</body>
<h1>Balls</h1>
<div id='border'>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
</div>
<div>
<button onclick="run=false"> Stop </button>
<button onclick="run=true;start()"> Start </button>
</div>
<script>
var b=document.getElementsByTagName('B');
var run=false;
var i;
for(i=0;i<b.length;i++)
{
b[i].x=Math.random()*490;
b[i].y=Math.random()*490;
b[i].vx=Math.random()*20-10;
b[i].vy=Math.random()*20-10;
b[i].style.left=b[i].x+"px";
b[i].style.top =b[i].y+"px";
}
function start()
{
var i;
for(i=0;i<b.length;i++)
{
b[i].x+=b[i].vx;
b[i].y+=b[i].vy;
if(b[i].x>490 || b[i].x<0) b[i].vx*=-1;
if(b[i].y>490 || b[i].y<0) b[i].vy*=-1;
b[i].style.left=b[i].x+"px";
b[i].style.top =b[i].y+"px";
}
if(run)
setTimeout(start,20);
}
</script>
</html>
我想用图像替换球。我想我做到了，但它根本不起作用。 图像总是在相同的位置。当我按下按钮移动它们时，图像会朝相同的方向移动。图像正在逃离边界(它们应该在墙上反弹并返回)。我的编辑:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#border {height:500px; width:500px; border:1px solid grey; margin:auto; position:relative}
img {display:block; height:10px; width:10px; position:absolute}
h1,div {text-align:center; margin:10px}
</style>
</head>
<body>
</body>
<h1>Balls</h1>
<div id='border'>
<img src="http://www.doktoranci.uj.edu.pl/image/image_gallery?uuid=8de2ed31-63f2-42f3-83fd-8fc0b7c48975&groupId=1167150&t=1287521328354">
<img src="http://www.doktoranci.uj.edu.pl/image/image_gallery?uuid=8de2ed31-63f2-42f3-83fd-8fc0b7c48975&groupId=1167150&t=1287521328354">
<img src="http://www.doktoranci.uj.edu.pl/image/image_gallery?uuid=8de2ed31-63f2-42f3-83fd-8fc0b7c48975&groupId=1167150&t=1287521328354">
</div>
<div>
<button onclick="run=false"> Stop </button>
<button onclick="run=true; start()"> Start </button>
</div>
<script>
var b=document.getElementsByTagName('IMG');
var run=false;
var i;
for(i=0; i<b.length; i++)
{
b[i].x=Math.random()*490;
b[i].y=Math.random()*490;
b[i].vx=Math.random()*20-10;
b[i].vy=Math.random()*20-10;
b[i].style.left=b[i].x+"px";
b[i].style.top =b[i].y+"px";
}
function start()
{
var i;
for(i=0; i<b.length; i++)
{
b[i].x+=b[i].vx;
b[i].y+=b[i].vy;
if(b[i].x>490 || b[i].x<0) b[i].vx*=-1;
if(b[i].y>490 || b[i].y<0) b[i].vy*=-1;
b[i].style.left=b[i].x+"px";
b[i].style.top =b[i].y+"px";
}
if(run)
setTimeout(start,20);
}
</script>
</html>
我希望我的图像在原始代码中表现得像球一样。你是我唯一的希望。
最佳答案
而不是使用 <img> , 使用
b {background-image: url("http://www.doktoranci.uj.edu.pl/image/image_gallery?uuid=8de2ed31-63f2-42f3-83fd-8fc0b7c48975&groupId=1167150&t=1287521328354");
background-repeat: no-repeat;
background-position: right top;}
关于javascript - 在 div 游戏中弹跳 img，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34579697/
24
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 –
我是一名优秀的程序员,十分优秀！