JavaScript - Key To Movement

Hi to all,
I am newbie in JS, and I hope that you can help with one javascript

I am trying to use my function for move of image on menu

the function JS function is
Code:

    var start0l = document.getElementById('arrow1').offsetLeft, maxPoz0, timer0;

    function StartPosun(imgId, maxPoz) {
        clearTimeout(timer0);
        maxPoz0 = maxPoz;
        document.getElementById(imgId).style.left = start0l + 'px';
        timer0 = setTimeout("posun0()", 1);
    }

    function ReturnPosun(imgId) {
        clearTimeout(timer0);
        timer0 = setTimeout("ret0()", 1);
    }

    function ret0() {
        if ((document.getElementById('arrow1').offsetLeft - start0l) > 0) {
            document.getElementById('arrow1').style.left = (parseInt(document.getElementById('arrow1').style.left) - 1) + 'px';
            timer0 = setTimeout("ret0()", 3);
        }
    }

    function posun0() {
        if ((document.getElementById('arrow1').offsetLeft - start0l) <= maxPoz0) {
            document.getElementById('arrow1').style.left = (parseInt(document.getElementById('arrow1').style.left) + 1) + 'px';
            timer0 = setTimeout("posun0()", 3);
        }
    }

and the html is

Code:

<ul><li class="l1">
  <a onmouseout="ReturnPosun('arrow1')" onmouseover="StartPosun('arrow1',15)" title="Aktuality" href="?cz_aktuality,22">
    Aktuality
    <img style="position: absolute; left: 306px;" alt="Aktuality" src="templates/img/menu_arrow.png" id="arrow1">
  </a><ul class="sub1"><li class="l1">
  <a onmouseout="ReturnPosun('arrow1')" onmouseover="StartPosun('arrow1',15)" title="AKCE: Bike Music Fest 2011" href="?cz_akce-bike-music-fest-2011,34">
    AKCE: Bike Music Fest 2011
    <img style="position:absolute;" alt="AKCE: Bike Music Fest 2011" src="templates/img/menu_arrow.png" id="arrow1">
  </a>
</li><li class="l2">
  <a onmouseout="ReturnPosun('arrow2')" onmouseover="StartPosun('arrow2',15)" title="AdventureMenu v prodejně TOURATECH CZ" href="?cz_adventuremenu-v-prodejne-touratech-cz,33">
    AdventureMenu v prodejně TOURATECH CZ
    <img style="position: absolute; left: 306px;" alt="AdventureMenu v prodejně TOURATECH CZ" src="templates/img/menu_arrow.png" id="arrow2">
  </a>
</li><li class="lL">
  <a onmouseout="ReturnPosun('arrowL')" onmouseover="StartPosun('arrowL',15)" title="TOURATECH TravelEvent 2011" href="?cz_touratech-travelevent-2011,32">
    TOURATECH TravelEvent 2011
    <img style="position: absolute; left: 306px;" alt="TOURATECH TravelEvent 2011" src="templates/img/menu_arrow.png" id="arrowL">
  </a>
</li></ul>
</li><li class="l2">
  <a onmouseout="ReturnPosun('arrow2')" onmouseover="StartPosun('arrow2',15)" title="O produktu" href="?cz_o-produktu,31">
    O produktu
    <img style="position:absolute;" alt="O produktu" src="templates/img/menu_arrow.png" id="arrow2">
  </a>
</li><li id="selected" class="l3">
  <a onmouseout="ReturnPosun('arrow3')" onmouseover="StartPosun('arrow3',15)" title="E-shop" href="?cz_e-shop,25">
    E-shop
    <img style="position: absolute; left: 306px;" alt="E-shop" src="templates/img/menu_arrow.png" id="arrow3">
  </a>
</li><li class="l4">
  <a onmouseout="ReturnPosun('arrow4')" onmouseover="StartPosun('arrow4',15)" title="Samoohřev" href="?cz_samoohrev,23">
    Samoohřev
    <img style="position: absolute; left: 306px;" alt="Samoohřev" src="templates/img/menu_arrow.png" id="arrow4">
  </a>
</li><li class="l5">
  <a onmouseout="ReturnPosun('arrow5')" onmouseover="StartPosun('arrow5',15)" title="Partneři" href="?cz_partneri,21">
    Partneři
    <img style="position: absolute; left: 306px;" alt="Partneři" src="templates/img/menu_arrow.png" id="arrow5">
  </a>
</li><li class="lL">
  <a onmouseout="ReturnPosun('arrowL')" onmouseover="StartPosun('arrowL',15)" title="Kontakty" href="?cz_kontakty,24">
    Kontakty
    <img style="position:absolute;" alt="Kontakty" src="templates/img/menu_arrow.png" id="arrowL">
  </a>
</li></ul>

and the problem is, that I can move with the first one, but I don't how I can move with the others like alone function
I thought that I can use somethink like if (onmouseover == true) .... but I failed
can someone hellp with this problem pls?

Hey guys, I just started to create my first Javascript game. It is a platformer and i just cant figure out how to do the movement. ATM my "character" is just a black rectangle. Here is my code. I have not been able to find the bug.

var c = document.getElementById("mainCanvas");
var ctx = c.getContext("2d");
var level1 = new Image();
level1.src = "Textures/level1.png"
level1.addEventListener("load", function() {ctx.drawImage(level1, 0,0,1024,1024)
ctx.fillRect(playerX, playerY, 55, 118)})
//Charecter Position
var playerX = 512
var playerY = 512
//Render
function playerRender() {ctx.fillRect(playerX, playerY, 55, 118)}
window.addEventListener("keydown", function(evt){
if (evt.keycode == 87) {playerY-=10}
})
var RenderPlayerInterval = setInterval(playerRender() ,10)





Reply With Quote




01-25-2015, 12:34 AM #2
Old Pedant View Profile View Forum Posts

Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts

Code:

ctx.fillRect(playerX, playerY, 55, 118)})
//Charecter Position
var playerX = 512
var playerY = 512

When you *CALL* that fillRect, neither playerX nor playerY has yet been defined!

SO you are essentially doing Code:

ctx.fillRect( null, null, 55, 118)

And where are the semicolons on the end of EACH LINE. Yes, I know they aren't required. But put them in. It will save you from grief someday.

How could you say make a x move around a grid using the arrow keys?

Hello everyone,im new to programming and have been learning a little bit of JavaScript.Im mostly learning it for a program called unity 3d,Its a game engine.And well,im stuck and can't figure this part out.i was wondering if anyone could help me.
the script is to make the character move forward and shoot.but the character jumps instead of moving forward. any advice?
Code:

var speed = 3.0;

var rotateSpeed = 3.0;

var bullitPrefab:Transform;



function Update () 

{

		var controller : CharacterController = GetComponent(CharacterController);

		

		// Rotate around y - axis

		transform.Rotate(0, Input.GetAxis ("Horizontal") * rotateSpeed, 0);

		

		// Move Forward / backward

		var forward = transform.TransformDirection(Vector3.forward);

		var curSpeed = speed * Input.GetAxis ("Vertical");

		controller.SimpleMove(forward * curSpeed);

		

		if(Input.GetButtonDown("Jump"))

		{

			var bullit = Instantiate(bullitPrefab, GameObject.Find("spawnPoint").transform.position,

Quaternion.identity);

		}	

}



@script RequireComponent(CharacterController);

Hi, I want the image in the header of my website to move from left to right and back in an endless loop. The image width is larger than the width of the div which contains the image, so when the image moves to the right, the right end of the image has to disappear. When the image moves back to the left, the left end has to disappear. Now I know I can use the overflow: hidden; element in the CSS file to hide a part of the image.

I found already several javascript scripts to move an image over the screen, but these scripts move the image only in 1 direction. I need it to go in the 2 directions in loop. Also these scripts require a position: relative; element to the image, so the hidden overflow of the div doesn't work.

An example of this kind of script:

Code:

<body onload="moveRight()">
<div id="header" style="width: 1010px;height: 170px;overflow: hidden;">
	<img src="images/header.jpg" id="header" style="position:relative;top:0px;left:0px; ">
</div>
<script type="text/javascript">

var userWidth = window.screen.width;
function moveRight() {
var pp = document.getElementById("header");
var lft = parseInt(pp.style.left);
var tim = setTimeout("moveRight()",100);  // 100 controls the speed
lft = lft+3;  // move by 3 pixels
pp.style.left = lft+"px";
if (lft > 50) {  // left edge of image past the right edge of screen
pp.style.left = 0;  // back to the left
}
}

</script> 
</body>

Is there any way to improve this script to my requirements, or am I completely looking in the wrong direction?