Question

好的，我一直在网上寻找平台游戏，我正在逐步进行。我已经拥有了我需要的图像以及如何将它们放在屏幕上。我也知道如何做点数系统，但我还没有完成。现在我想知道如何使用屏幕按钮从左到右移动播放器。我正在寻找的东西与我在这里找到的代码完全不同，因为它看起来像代码太多而且它只是将字符向右移动而不停止。

我正在寻找：

1）左右两个按钮

2）按下按钮可向右或向左移动播放器。

3）释放按钮时，播放器停止移动。

// 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>

Answer 1

你走了。希望你的代码不是太多：）

JSfiddle演示是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>

这只是概念证明你离释放Mario Bross 25还有很长的路要走，但这是朝着正确方向迈出的一步还是它离开了？

Javascript使用屏幕按钮向左或向右移动图像

1 个答案: