Using Javascript to oscillate an image left and right?

Question

I have this code that is to be used for a simple UFO shooter game. I want to try to make it oscillate left and right, as well as up and down. The thing is, thus far, I've only been able to make it loop left continuously while oscillating up and down. What I want to happen is for the image to reach the right side of the screen, then move back to the left once it reaches it, then move back right, etc.

 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; }

Any help appreciated!

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

This kind of thing is a lot easier and more succinct if you apply some basic math. I highly recommend learning how to use as much trig, geometry, and calc as you can, the ways you can use this stuff isn't always obvious.

Here, I've set the enemy's movement up as a couple of trig functions.

    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();
    }

Another example, if you wanted to give it an elliptical movement as opposed to circular, you could do something like this:

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

The .5 causes the radius parameter to only apply 50% as much on the y axis, so the object will move in an ellipse that is only 50% tall as it is wide.

I realize also that this is just playing around, but if you ever want to do anything more complicated, I'd highly recommend learning to use the canvas element, and especially the window.requestAnimationFrame function, it will make all of your animations so much smoother.

EDIT: Oh, OK, sorry, I misunderstood.

In that case, you're going to want to keep track of which direction your object is travelling. For a basic example, replace your moveIt function with this:

//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);
}

Using Javascript to oscillate an image left and right?

Question

1 answers

solution1
1 ACCPTED 2015-06-24 19:04:26

Using Javascript to oscillate an image left and right?

Question

1 answers

solution1 1 ACCPTED 2015-06-24 19:04:26

solution1
1 ACCPTED 2015-06-24 19:04:26