どのように私は、矢印キーを使って文字を移動する方法を知っているが、どのように私は文字が</p> <p>ことにしたい画像信号んJS

で気にいらない文字は、ここでは、矢印の上に移動することに私のコードがあることを確認してくださいどのようにイメージが文字であることをマークするのですか？どのように私は、矢印キーを使って文字を移動する方法を知っているが、どのように私は文字が</p> <p>ことにしたい画像信号んJS

///// store key codes and currently pressed ones 
 
var keys = {}; 
 
    keys.LEFT = 37; 
 
    keys.RIGHT = 39; 
 

 
///// store reference to character's position and element 
 
var character = { 
 
    x: 100, 
 
    y: 100, 
 
    element: document.getElementById("character") 
 
}; 
 

 
///// key detection (better to use addEventListener, but this will do) 
 
document.body.onkeyup = 
 
document.body.onkeydown = function(e){ 
 
    var kc = e.keyCode || e.which; 
 
    keys[kc] = e.type == 'keydown'; 
 
}; 
 

 
///// character movement update 
 
var moveCharacter = function(dx, dy){ 
 
    character.x += dx||0; 
 
    character.y += dy||0; 
 
    character.element.style.left = character.x + 'px'; 
 
    character.element.style.top = character.y + 'px'; 
 
}; 
 

 
///// character control 
 
var detectCharacterMovement = function(){ 
 
    if (keys[keys.LEFT]) { 
 
    moveCharacter(-1); 
 
    } 
 
    if (keys[keys.RIGHT]) { 
 
    moveCharacter(1); 
 
    } 
 
}; 
 

 
///// game loop 
 
setInterval(function(){ 
 
    detectCharacterMovement(); 
 
}, 1000/24);

あなたは感謝を助けることができる場合は！（：私はJavascriptを初めて使っています。

出典

2017-12-07 William - Devil Minty

'のdocument.getElementById（「文字」）' < - この行を変更して、あなたは、「画像が文字である」によって意味ですか何 –

を行って、あなたが文字を置き換えますかいますか？画像を使って矢印キーで動かす –

あなたのページの本文にあなたのキャラクターのイメージを追加してid = "character"としてください。以下のスニペットのような初期CSSを使用してください

///// store key codes and currently pressed ones 
 
var keys = {}; 
 
    keys.LEFT = 37; 
 
    keys.RIGHT = 39; 
 

 
///// store reference to character's position and element 
 
var character = { 
 
    x: 100, 
 
    y: 10, 
 
    element: document.getElementById("character") 
 
}; 
 

 
///// key detection (better to use addEventListener, but this will do) 
 
document.body.onkeyup = 
 
document.body.onkeydown = function(e){ 
 
    
 
    var kc = e.keyCode || e.which; 
 
    keys[kc] = e.type == 'keydown'; 
 
}; 
 

 
///// character movement update 
 
var moveCharacter = function(dx, dy){ 
 
    character.x += dx||0; 
 
    character.y += dy||0; 
 
    character.element.style.left = character.x + 'px'; 
 
    character.element.style.top = character.y + 'px'; 
 
}; 
 

 
///// character control 
 
var detectCharacterMovement = function(){ 
 
    if (keys[keys.LEFT]) { 
 
    moveCharacter(-1); 
 
    } 
 
    if (keys[keys.RIGHT]) { 
 
    moveCharacter(1); 
 
    } 
 
}; 
 

 
///// game loop 
 
setInterval(function(){ 
 
    detectCharacterMovement(); 
 
}, 1000/24);

#character{ 
 
    position:absolute; 
 
    width: 50px; 
 
    height: 50px; 
 
    left: 100px; 
 
    top: 10px; 
 
} 
 
.wrap{ 
 
    position:relative 
 
}

<body> 
 
<span>Click on Mario and use LEFT/RIGHT arrows to move it</span> 
 
<div class="wrap"> 
 
<img src="https://rocketdock.com/images/screenshots/Mario-Icon.jpg" id="character"/> 
 
</div> 
 
</body>

出典

2017-12-08 08:35:05

どのように私は、矢印キーを使って文字を移動する方法を知っているが、どのように私は文字が</p> <p>ことにしたい画像信号んJS

答えて

関連する問題