Ok I have been looking online to build a platformer and I am taking it step by step. I already have the images I need and how to place them onscreen. I also know how to do a point system but I am far from finished. Now I would like to know how to move a player left to right using onscreen buttons. What I am looking for is something totally different from this code I found here as it seems like too much code and it just moves characters to the right without stopping.
I am looking for:
1) 2 buttons right and left
2) press down on the button moves player in either right or left direction.
3) The player stops moving when you release the button.
// Other code
...
imgObj.style.left = '0px';
}
function moveRight() {
imgObj.style.left = parseInt(imgObj.style.left) + 1 + 'px';
}
function stop() {
clearTimeout(animate);
imgObj.style.left = '0px';
}
window.onload =init;
//-->
</script>
</head>
<body>
<form>
<img id="myImage" src="/images/html.gif" />
<p>Click the buttons below to handle animation</p>
<input type="button" value="Start" onclick="moveRight();" />
<input type="button" value="Stop" onclick="stop();" />
</form>
</body>
</html>
Here you go. Hope it's not too much code for you :)
The JSfiddle demo is here .
<head>
<style>
#sprite { position:relative; } // needed for the img to be free to move around
</style>
<script>
var timer_id; // reference of the timer, needed to stop it
var speed = 50; // pixels/second
var period = 40; // milliseconds
var sprite; // the element that will move
var sprite_speed = 0; // move per period
var sprite_position = 100; // pixels
function animate ()
{
sprite_position += sprite_speed;
if (sprite_position < 0) sprite_position = 0;
if (sprite_position > 200) sprite_position = 200;
sprite.style.left = sprite_position+'px';
}
function move(direction)
{
if (timer_id) stop();
sprite_speed = speed * period/1000 * direction;
timer_id = setInterval (animate, period);
}
function stop()
{
clearInterval (timer_id);
timer_id = null;
}
function init()
{
sprite = document.getElementById ("sprite"); // the HTML element we will move
animate(); // just to initialize sprite position
}
window.onload =init; // start doing things once the page has loaded
</script>
</head>
<body>
<img id="sprite" src="http://petiteleve.free.fr/SO/yoshi.png" />
<p>Click the buttons below to handle animation</p>
<input type="button" value="Left" onmousedown="move(-1);" onmouseup="stop();"/>
<input type="button" value="Right" onmousedown="move( 1);" onmouseup="stop();"/>
</body>
This is just a proof of concept.
You are still a long way from releasing Mario Bross 25, but that's a step in the right direction.
Or was it left?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.