我正在使用 HTML5 和 jQuery 创建一个没有 Canvas (!)的小游戏，并且在开发反弹部分时(当圆圈与舞台限制碰撞时)，我发现了一个错误:
当圆圈与下限或右限相撞并且您一直按向下/向右箭头键时，圆圈会继续与舞台限制一起弹跳，但是当您对相反的舞台限制(顶部和左侧)执行相同操作时，圆圈反弹一两次，然后停止(我想得到第二 react ，当它反弹然后停止)。 我还发现这个错误只发生在 Safari 中。 有人能帮我解决吗？
JSFiddle
Demo on site
<!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 碰撞的比较器并向其添加
margin 的 0px 即可。在旧版本的 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 - 圆形弹跳bug，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22287506/