Question

我有一个用箭头键在屏幕上移动的图像。我想知道如何用每个键更改正在移动的图像。

我意识到图像附着在每个动作上。每个图像都没有附加运动。

这就是我所拥有的：

<script type="text/javascript">

function leftArrowPressed() {var element = document.getElementById("image1");
element.style.left = parseInt(element.style.left) - 10 + 'px';}

function rightArrowPressed() {var element = document.getElementById("image1");
element.style.left = parseInt(element.style.left) + 10 + 'px';}

function upArrowPressed() {var element = document.getElementById("image1");
element.style.top = parseInt(element.style.top) - 10 + 'px';}

function downArrowPressed() {var element = document.getElementById("image1");
element.style.top = parseInt(element.style.top) + 10 + 'px';}


function moveSelection(event) {                    
switch (event.keyCode) {
case 37:leftArrowPressed();break;
case 39:rightArrowPressed();break;
case 38:upArrowPressed();break;
case 40:downArrowPressed();break;
}
};


function gameLoop()
{
// change position based on speed
moveSelection();
setTimeout("gameLoop()",10);
}

</script>
</head>

<body onload="gameLoop();" onkeydown="moveSelection(event)" onkeyup="moveSelection(event)"'>

<img id="image1" src="images/casual.png" style="position: absolute; left: 15; right: 15; top: 15; bottom: auto; " height="20" width="16">
</body>

Answer 1

您需要在按键时更改img标签的src属性。创建了一个小demo来演示相同的内容。

代码：

function changeImage() {
    document.getElementById("image1").src = "http://andrefrommalta.com/wp-content/uploads/2014/09/137392976177.jpg";
}

function changeImage2() {
    document.getElementById("image1").src = "http://3.bp.blogspot.com/_IY7CmWJmPL4/R8K5bFaKXpI/AAAAAAAABO0/fH7E6kPibuM/S1600-R/random.jpg";
}

function changeImage3() {
    document.getElementById("image1").src = "http://www.newton.ac.uk/files/covers/968361.jpg";
}

function changeImage4() {
    document.getElementById("image1").src = "http://k41.kn3.net/taringa/1/7/0/5/5/4/74/gatessb/E6F.gif?3362";
}

function checkKey(e) {

    e = e || window.event;

    if (e.keyCode == '38') {
        //up arrow
        changeImage();
    } else if (e.keyCode == '40') {
        // down arrow
        changeImage2();
    } else if (e.keyCode == '37') {
        // left arrow
        changeImage3();
    } else if (e.keyCode == '39') {
        // right arrow
        changeImage4();
    }

}

document.onkeydown = checkKey;

Answer 2

在每个ArrowPressed()函数中，只需将元素的src更改为每个箭头键所需的值：

function downArrowPressed() {
    var element = document.getElementById("image1");
    element.style.top = parseInt(element.style.top) + 10 + 'px';
    element.src = "imageForDownArrow.png";
}

function upArrowPressed() {
    var element = document.getElementById("image1");
    element.style.top = parseInt(element.style.top) - 10 + 'px';
    element.src = "imageForUpArrow.png";
}

function leftArrowPressed() {
    var element = document.getElementById("image1");
    element.style.left = parseInt(element.style.left) - 10 + 'px';
    element.src = "imageForLeftArrow.png";
}

function rightArrowPressed() {
    var element = document.getElementById("image1");
    element.style.left = parseInt(element.style.left) + 10 + 'px';
    element.src = "imageForRightArrow.png";
}

用箭头键更改图像？

2 个答案: