how do i make a image follow another in javascript for my game

Question

Hey can someone show me how i can make a picture of a zombie move towards a player image. so a zombie image would move towards zs.png at a certain speed and maybe could add health so when the zombie touches the player the player looses health

This game is for the 3ds browser so it has to be javascript and html

Also here is a link to the page im running it on Link

And could someone give me the full code because im new to javascript. Thanks

this is what i have so far.

<html>
<head>
<script type='text/javascript'>

// movement vars
var xpos = 100;
var ypos = 100;
var xspeed = 1;
var yspeed = 0;
var maxSpeed = 5;

// boundary
var minx = 0;
var miny = 0;
var maxx = 300;
var maxy = 190;
// controller vars
var upPressed = 0;
var downPressed = 0;
var leftPressed = 0;
var rightPressed = 0;

function slowDownX()
{
  if (xspeed > 0)
    xspeed = xspeed - 0.5;
  if (xspeed < 0)
    xspeed = xspeed + 0.5;
}

function slowDownY()
{
  if (yspeed > 0)
    yspeed = yspeed - 0.5;
  if (yspeed < 0)
    yspeed = yspeed + 0.5;
}

function gameLoop()
{
  // change position based on speed
  xpos = Math.min(Math.max(xpos + xspeed,minx),maxx);
  ypos = Math.min(Math.max(ypos + yspeed,miny),maxy);

  // or, without boundaries:
  // xpos = xpos + xspeed;
  // ypos = ypos + yspeed;

  // change actual position
  document.getElementById('character').style.left = xpos;
  document.getElementById('character').style.top = ypos;

  // change speed based on keyboard events
  if (upPressed == 1)
    yspeed = Math.max(yspeed - 0.1,-0.1*maxSpeed);
  if (downPressed == 1)
    yspeed = Math.min(yspeed + 0.1,0.1*maxSpeed)
  if (rightPressed == 1)
    xspeed = Math.min(xspeed + 0.1,0.1*maxSpeed);
  if (leftPressed == 1)
    xspeed = Math.max(xspeed - 0.1,-0.1*maxSpeed);

  // deceleration
  if (upPressed == 0 && downPressed == 0)
     slowDownY();
  if (leftPressed == 0 && rightPressed == 0)
     slowDownX();
// loop
  setTimeout("gameLoop()",10);
}

function keyDown(e)
{
  var code = e.keyCode ? e.keyCode : e.which;
  if (code == 38)
    upPressed = 1;
  if (code == 40)
    downPressed = 1;
  if (code == 37)
    leftPressed = 1;
  if (code == 39)
    rightPressed = 1;
}

function keyUp(e)
{
  var code = e.keyCode ? e.keyCode : e.which;
  if (code == 38)
    upPressed = 0;
  if (code == 40)
    downPressed = 0;
  if (code == 37)
    leftPressed = 0;
  if (code == 39)
    rightPressed = 0;
}

</script>

</head>

<body onload="gameLoop()" onkeydown="keyDown(event)" onkeyup="keyUp(event)" bgcolor='red'>

   <!-- The Level -->
   <div style='width:320;height:220;position:absolute;left:0;top:0;background:green;'>
   </div>

   <!-- The Character -->
   <img id='character' src='zs.gif'     style='position:absolute;left:100;top:100;height:30;width:20;'/>

</body>

</html>

possible duplicate of [how do i make a image follow another in javascript](http://stackoverflow.com/questions/18112455/how-do-i-make-a-image-follow-another-in-javascript) — Michael Petrotta, Aug 23 '13 at 16:16

score 0 · Answer 1 · edited May 23 '17 at 12:20

Edit: Updated a few blocks of code to make them actually work(!), added note about where to put scripts and included a jsFiddle

jsFiddle Link

Edit 2: Don't just put left:100;top:100;height:30;width:20; as it isn't valid CSS and many browsers will choke on it. Add px after each number to get left:100px;top:100px;height:30px;width:20px; instead.

A little research goes a long way.

How to detect if two divs touch with jquery?

Binding arrow keys in JS/jQuery

jquery animate .css

You almost definitely want to be using jQuery for what you're doing.

Try something like the following:

$(document).ready(function(){
    $(document).keydown(function(e){
        var c = $("#character");
        if (e.keyCode === 37) { 
            // left arrow pressed
            c.css("left","-=10px"); // subtract 10px from the character's CSS 'left' property, although you probably want some system to add a limit to this value
        }else if(e.keyCode === 38) {
            // up arrow pressed
            c.css("top","-=10px"); // subtract 10px from the character's CSS 'up' property
        }else if(e.keyCode === 39) {
            // right arrow pressed
            c.css("left","+=10px"); // add 10px to the character's CSS 'left' property
        }else if(e.keyCode === 40) {
            // down arrow pressed
            c.css("top","+=10px"); // add 10px to the character's CSS 'top' property
        }
        return false;
    });
});

This allows the character to move by using the arrow keys.

Making the zombie image move is a little more difficult. First, add the following div tag to your document:

<div id="zombie" style="position:absolute;top:10px;left:10px;"><img src="YOUR_ZOMBIE_IMAGE.gif" /></div>

Then, add the following JavaScript above the $(document).ready(function(){ line:

var zombieFrequency = 1000; // how long (in milliseconds) it should take the zombie to move to the character's position
var easeType = "swing"; // change this to "linear" for a different kind of zombie animation

Finally, add the following into the $(document).ready(function(){ block:

setInterval(function(){
    var c = $("#character");
    $("#zombie").animate({"left":c.css("left"),"top":c.css("top")},zombieFrequency,easeType);
},zombieFrequency);

This should make the zombie move to the character's position every 0.6 seconds (600ms = 0.6s), although I haven't tested it myself.

Alternatively, you could consider using CSS transitions, although I doubt they'd run smoothly (or even be supported) on a Nintendo 3DS.

Pay special attention to this!

Also, you cannot put links to scripts and internal scripts in the same <script> tag, like this:

<script src="//ajax.googleapis.com/libs/jquery/1.10.2/jquery.min.js">
    // some more scripting
</script>

They must be separate, like this:

<script src="//ajax.googleapis.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    // some more scripting
</script>

On a separate note, it's recommended to decide on using either single quotes ' or double quotes ", according to the W3 spec. Most people use double quotes.

Single vs Double quotes (' vs ")

Thanks but i tried it and it didnt work i put it on this page [link](http://3dshq.heliohost.org/games/zinvasion) and it didnt work. — user2662081, Aug 08 '13 at 18:51
I've updated most of the code, and tested it in my jsFiddle (see link at top of answer) and it definitely works for me. Also, read especially the "**pay special attention to this**" section, as you made this mistake! — Robbie JW, Aug 08 '13 at 19:36
so is there no way in javascript to do this? because i need the movement to be like this [LINK](http://www.3dshq.heliohost.org/games/zinvasionnew) also the boundry so you cant go out the level — user2662081, Aug 09 '13 at 16:20
I'd recommend that you try and make some simpler JavaScript projects first before trying to make a game. Making an HTML + JavaScript game without Flash is already a pretty good achievement, for someone who's new to JavaScript I wouldn't recommend it. If you can't work out how to prevent a value from being increased after hitting a certain limit (using `if...else` statements) then you might want to consider learning JavaScript in a bit more depth first. — Robbie JW, Aug 09 '13 at 16:48

how do i make a image follow another in javascript for my game

1 Answers1

Pay special attention to this!