Question

我有这个代码用于简单的UFO射击游戏。我想尝试让它左右摆动，以及上下摆动。事情是，到目前为止，我只能在上下振荡时连续循环。我想要的是图像到达屏幕的右侧，然后一旦到达它就向后移动，然后向右移动等等。

var timer1 = null;
var el = null;
var score = 0;
var shots = 0;

function moveIt() {
  if (parseInt(el.style.left) > (screen.width - 50))
    el.style.left = 0;
  el.style.left = parseInt(el.style.left) + 6 + 'px';
  el.style.top = 100 + (80 * Math.sin(parseInt(el.style.left) / 50)) + 'px';
  timer1 = setTimeout(moveIt, 25);
}

function scoreUp() {
  score++;
}

function scoreboard() {
  document.getElementById("score").innerHTML = "Shots: " + shots + " Score: " + score;
}
window.onload = function() {
  el = document.getElementById("img1");
  el.onclick = scoreUp;
  document.getElementById("range").onclick = function() {
    shots++;
    scoreboard();
  }
  scoreboard();
  el.style.left = '50px';
  moveIt();
}

#range {
  position: absolute;
  top: 0px;
  left: 0px;
  background: url(http://i.imgur.com/jmwvwDs.jpg);
  cursor: crosshair;
  width: 100%;
  height: 500px;
}
#img1 {
  position: absolute;
  border: none;
  left: 0px;
  top: 100px;
  padding: 10px;
}
#score {
  font: 16px normal arial, verdana, sans-serif;
  color: white;
  padding: 10px;
}

任何帮助表示赞赏！

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Space Shooter</title>
        <style>
            #range {
                position:absolute;
                top: 0px;
                left: 0px;
                background: url(http://i.imgur.com/jmwvwDs.jpg);
                cursor: crosshair;
                width: 100%;
                height: 500px;
            }
            #img1 {
                position:absolute;
                border:none;
                left: 0px;
                top: 100px;
                padding: 10px;
            }
            #score {
                font: 16px normal arial, verdana, sans-serif;
                color: white;
                padding: 10px;
            }
        </style>
        <script>
            var timer1 = null;
            var el = null;
            var score = 0;
            var shots = 0;
            function moveIt() {
                if(parseInt(el.style.left) > (screen.width - 50))
                el.style.left = 0;
                el.style.left = parseInt(el.style.left) + 6 + 'px';
                el.style.top = 100 + (80 * Math.sin(parseInt(el.style.left)/50)) + 'px';
                timer1 = setTimeout(moveIt, 25);
            }
            function scoreUp() {
                score++;
            }
            function scoreboard() {
                document.getElementById("score").innerHTML = "Shots: " + shots + " Score: " + score;
            }
            window.onload = function() {
                el = document.getElementById("img1");
                el.onclick = scoreUp;
                document.getElementById("range").onclick = function() {
                    shots++;
                    scoreboard();
                }
                scoreboard();
                el.style.left = '50px';
                moveIt();
            }
        </script>
    </head>
    <body>
        <div id="range">
            <div id="score"></div>
            <img alt="Fire!" id="img1" src="http://imgur.com/wPFsjCj.png" />
        </div>
    </body>
</html>

Answer 1

如果你应用一些基本的数学，这种事情会更简单，更简洁。我强烈建议你学习如何使用尽可能多的trig，geometry和calc，你可以使用这些东西的方式并不总是很明显。

在这里，我将敌人的动作设置为几个三角函数。

    var timer1 = null;
    var ticks_elapsed = 0;
    //The coordinates you want the thing to circle around.
    var originx = 150;
    var originy = 150;
    //how far you want it to be from the origin as it circles.
    var radius  = 100;
    //how fast you want it to go.  
    var speed = .09;

    var el = null;
    var score = 0;
    var shots = 0;
    function moveIt() {
        ticks_elapsed++;
        el.style.left = (originx + Math.cos(timer1 * speed) * radius) + 'px';
        el.style.top  = (originy + Math.sin(timer1 * speed) * radius) + 'px';
        timer1 = setTimeout(moveIt, 25);
    }
    function scoreUp() {
        score++;
    }
    function scoreboard() {
        document.getElementById("score").innerHTML = "Shots: " + shots + " Score: " + score;
    }
    window.onload = function() {
        el = document.getElementById("img1");
        el.onclick = scoreUp;
        document.getElementById("range").onclick = function() {
            shots++;
            scoreboard();
        }
        scoreboard();
        el.style.left = '50px';
        moveIt();
    }

另一个例子，如果你想给它一个椭圆运动而不是圆形，你可以这样做：

el.style.left = (originx + Math.cos(timer1 * speed) * radius) + 'px';
el.style.top  = (originy + Math.sin(timer1 * speed) * radius * .5) + 'px';

.5使得radius参数仅在y轴上应用50％，因此对象将以椭圆形移动，其宽度仅为50％。

我也意识到这只是玩，但如果你想做更复杂的事情，我强烈建议学习使用canvas元素，特别是window.requestAnimationFrame函数，它会使所有你的动画更加流畅。

编辑：哦，好的，对不起，我误解了。

在这种情况下，您将要跟踪对象的行进方向。有关基本示例，请将moveIt函数替换为：

//define your variables outside of this function
var xspeed = 6;
var yspeed = 6;

//defining these outside of the CSS properties makes it easier to keep track of,
//and we don't have to convert from strings all the time
var x = 0;
var y = 0;

function moveIt() {

    if (x < 0 || x > window.innerWidth)
        xspeed = xspeed * -1; //multiplying it by -1 converts it to its opposite no matter what
    if (y < 0 || y > window.innerHeight)
        yspeed = yspeed * -1;

    x = x + xspeed;
    y = y + yspeed;

    el.style.left = x + 'px';
    el.style.top  = y + 'px';
    timer1 = setTimeout(moveIt, 25);
}

使用Javascript左右摆动图像？

1 个答案: