Question

这是我在这里发表的第一篇文章......好吧，我需要的是使用键盘上的4个键在屏幕上移动图像并更改每个键的图像，例如：
--W--
A-S-d
当我按“D”键时，我的物体应该向右移动，我的图像应该是“朝向”的当我按下“A”键时，我的物体应该向左移动，我的图像应该是“facingleft”，所以它会......

****编辑：这是我的项目在您的帮助后的方式！谢谢!!!：http://xonny.esy.es/Xonnygame/index.html

我在这里有这个代码，但似乎不可能做我想要的事情，所以我需要修改它！

<html>
<head>

<title>Moving an Image</title>

<script language="JavaScript">

function moveObj(name, Xpix, Ypix) 
{
    obj = document.getElementById(name);

    px = parseInt(obj.style.left) + Xpix;
    py = parseInt(obj.style.top) + Ypix;
    obj.style.left = px;
    obj.style.top = py;
}

function ProcessKeypress(e)
{
    var myObj = "mario";
    var moveBy = 10;

    if (e.keyCode) keycode=e.keyCode;
    else keycode=e.which;
    ch=String.fromCharCode(keycode);

    if(ch=='a' || ch=='A')      moveObj(myObj, -moveBy, 0);
    else if(ch=='d' || ch=='D')     moveObj(myObj, moveBy, 0);
    else if(ch=='w' || ch=='W')     moveObj(myObj, 0, -moveBy);
    else if(ch=='s' || ch=='S')     moveObj(myObj, 0, moveBy);
}

</script>

<body onKeyPress="ProcessKeypress(event);">

<p><img id="mario" style="z-index: 0; left: 300px; position: absolute; top: 250px" 
    height=72 width=100 align=baseline border=0 hspace=0 src="mario right.jpg"></p>

</body>
</html>

Answer 1

示例（首先点击图片，确保在按任意键之前你在正确的画布上）： http://jsfiddle.net/leojavier/f8kp6auc/

<img id="item" style="width:100px; height:100px; cursor:pointer; position:relative; left:10px; top:20px;" src="http://www.adobe.com/business/calculator/VIP/image/loader.gif" alt="">
<script>
(function(){

        item = document.getElementById("item");

        function move(x){
            var currentPositionX = parseInt(item.style.left);
            var currentPositionY = parseInt(item.style.top);
            console.log(currentPositionY);
            switch(x){
                    case "left":
                    item.style.left = currentPositionX - 15 + "px";
                    break;
                    case "right":
                    item.style.left = currentPositionX + 15 + "px";
                    break;
                    case "up":
                    item.style.top = currentPositionY - 15 + "px";
                    break;
                    case "down":
                    item.style.top = currentPositionY + 15 + "px";
                    break;
            }

        }


        window.addEventListener("keydown", key, false);
        function key(e){
            switch(e.keyCode){
                case 65:
                //LEFT
                move('left');
                break;
                case 68:
                //RIGHT
                move('right');
                break;
                case 87:
                //UP
                move('up');
                break;
                case 83:
                //DOWN
                move('down');
                break;
            }
        }
    })();
</script>

Answer 2

你应该创建两个马里奥图像，一个面向右，另一个面向左，并在它们之间切换;

if(ch=='d' || ch=='D'){
    moveObj(myObj, moveBy, 0);
    document.getElementById(myObj).src="mariofacingright.png";
}

左边是这样的。此外，如果您希望动画顺利进行，则应使用keydown和keyup。 Keydown应该创建一个间隔，每个X移动图像，keyup删除间隔。这样你的动画就会很流畅，你可以同时向上移动它。

Answer 3

这将是您的最终代码。在正文中你添加：

<body onkeydown="keydown(event)" onkeyup="keyup(event)">

js就是这样的

var movUp=false, movDown=false, movLeft=false, movRight=false;

function moveMario() 
{
    obj = document.getElementById("mario");
    px = parseInt(obj.style.left);
    py = parseInt(obj.style.top);
    var moveby=5;

    if(movUp) py=py-moveby;
    if(movDown) py=py+moveby;
    if(movLeft) px=px-moveby;
    if(movRight) px=px+moveby;

    if(movUp&&!movLeft&&!movRight&&!movDown) obj.src='mario_up.png';
    if(!movUp&&movLeft&&!movRight&&!movDown) obj.src='mario_left.png';
    if(!movUp&&!movLeft&&movRight&&!movDown) obj.src='mario_right.png';
    if(!movUp&&!movLeft&&!movRight&&movDown) obj.src='mario_down.png';

    if(movUp&&movLeft) obj.src='mario_up_left.png';
    if(movDown&&movLeft) obj.src='mario_down_left.png';
    if(movUp&&movRight) obj.src='mario_up_right.png';
    if(movDown&&movRight) obj.src='mario_down_right.png';

    if(!movUp&&!movLeft&&!movRight&&!movDown) obj.src='mario.png';


    obj.style.left = px;
    obj.style.top = py;
}

function keydown(e){
    ch=String.fromCharCode(e.keyCode).toLowerCase(); // toLowerCase() so we don't have to check for 'a' and 'A';
    moveby=5;
    if(ch=="a") movLeft=true;
    if(ch=="s") movDown=true;
    if(ch=="d") movRight=true;
    if(ch=="w") movUp=true;
}

function keyup(e){
    ch=String.fromCharCode(e.keyCode).toLowerCase();
    moveby=5;
    if(ch=="a") movLeft=false;
    if(ch=="s") movDown=false;
    if(ch=="d") movRight=false;
    if(ch=="w") movUp=false;
}

setInterval("moveMario()",30);

每次按下方向键，我们将该方向设置为true。每30毫秒，调用函数moveMario（），它将图像移动到设置为true的方向，并将图像更改为这些方向。

顺便说一下，在你的html代码中，你永远不会关闭head标签。小心。

如何使用JavaScript更改和移动图像

3 个答案: