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

Question

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 1）左右两个按钮

2) press down on the button moves player in either right or left direction. 2）按下按钮可在左右方向上移动播放器。

3) The player stops moving when you release the button. 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

Here you go. 干得好。 Hope it's not too much code for you :) 希望它对您来说不是太多的代码:)

The JSfiddle demo is here . JSfiddle演示在这里。

<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. 与发布Mario Bross 25相比，您还有很长的路要走，但这是朝正确方向迈出的一步。
Or was it left? 还是离开了？

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

问题描述

1 个解决方案

解决方案1
0 2014-01-05 06:40:10

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

问题描述

1 个解决方案

解决方案1 0 2014-01-05 06:40:10

解决方案1
0 2014-01-05 06:40:10