Javascript 在为第二个图像创建文字对象后，如何使用WASD键移动该图像

我正试图学习用WASD键移动第二个对象，但我找不到详细说明如何移动的具体信息。我也无法调整它的大小。我目前正在探索这个游戏，尽我所能学习。

---

你可以简单地复制火箭的代码，并将其用于UFO。要将移动键绑定到WASD，只需扩展

keydownHandler

函数中的

if

语句以包含WASD键

//箭头键代码
var UP=38，
向下=40，
右=39，
左=37；
//wasd键码
var W=87，
A=65，
S=83，
D=68；
//火箭物体
var火箭={
img:document.querySelector（“火箭”），
x:490，
y:390，
宽度：100
};
变量UFO={
img:document.querySelector（“ufo”），
x:300，
y:200，
宽度：200//需要在x，y定位上读取
};
//声阵
var声音=[“光子”，“弹片]；
var currentSound=null；
恒速=8；
设鱼雷=document.querySelector（#鱼雷”），
startBtn=document.querySelector（#start”），
fireBtn=document.querySelector（#fire”），
ufo=文档查询选择器（“ufo”）；
//初始化屏幕上的对象
render（）；
/*
函数startGameHandler（）{
“严格使用”
//隐藏介绍屏幕，显示游戏屏幕
introScreen.style.display=“无”；
gameScreen.style.display=“block”；
rocket.img.style.display=“block”；
ufo.style.display=“block”；
}
*/
常量startGameHandler=（）=>{
“严格使用”；
//隐藏介绍屏幕，显示游戏屏幕
introScreen.style.display=“无”；
gameScreen.style.display=“block”；
rocket.img.style.display=“block”；
ufo.style.display=“block”；
}; 
函数处理程序（）{
“严格使用”
//发射光子鱼雷！
//每当鱼雷发射时，CSS动画就会出现
//“left”属性更改值
鱼雷.style.visibility=“可见”；
鱼雷.style.left=（rocket.x-200）+“px”；
}
const keydownHandler=事件=>{
“严格使用”
如果（event.keyCode==UP）{
火箭。y-=速度；
}
如果（event.keyCode==左）{
火箭.x-=速度；
}
如果（event.keyCode===向下）{
火箭。y+=速度；
}
如果（event.keyCode==右）{
火箭。x+=速度；
}
如果（event.keyCode==W）{
UFO.y-=速度；
}
如果（event.keyCode==A）{
UFO.x-=速度；
}
如果（event.keyCode===S）{
UFO.y+=速度；
}
如果（event.keyCode==D）{
UFO.x+=速度；
}
render（）；
}
//移动不明飞行物
（功能（）{
var requestAnimationFrame=window.requestAnimationFrame | | window.mozRequestAnimationFrame||
window.webkitRequestAnimationFrame | | window.msRequestAnimationFrame；
window.requestAnimationFrame=requestAnimationFrame；
})();
//必要变量
var=x=10；
变量y=10；
var-keyW=false；
var-keyA=false；
var-keyS=false；
var-keyD=false；
//主要动画功能
函数ufoboster（）{
window.requestAnimationFrame（ufoboster）；
var canvas=document.getElementById（“ufo”）；
if（keyD==true）{
点击X+=1；
}
如果（键==true）{
clickY+=1；
}
if（keyA==true）{
点击X-；
}
if（keyW==true）{
clickY--；
}
}
window.requestAnimationFrame（ufoboster）；
//移动到这里是为了让箭头功能正常工作。
startBtn.addEventListener（“单击”，startGameHandler，false）；
fireBtn.addEventListener（“单击”，firebtHandler，false）
addEventListener（“keydown”，keydownHandler，false）；
函数渲染（）{
“严格使用”
//在屏幕上定位对象
rocket.img.style.left=rocket.x+“px”；
rocket.img.style.top=rocket.y+“px”；
UFO.img.style.left=UFO.x+“px”；
UFO.img.style.top=UFO.y+“px”；
鱼雷.style.left=（火箭.x+10）+“px”；
鱼雷.style.top=（火箭.y+8）+“px”；
鱼雷.style.visibility=“隐藏”；
}

*{margin:0；
填充：0；
}
@字体{
字体系列：“太空时代”；
src:url（'../font/space_age-webfont.eot'）；
src:url（'../font/space_age-webfont.eot？#iefix'）格式（'embedded-opentype'），
url（'../font/space_age-webfont.woff'）格式（'woff'），
url（'../font/space_age-webfont.ttf'）格式（'truetype'），
url（'../font/space_age-webfont.svg#space_ageregular'）格式（'svg'）；
字体大小：正常；
字体风格：普通；
}
#内屏蔽{
保证金：50px自动；
填充：50px 30px；
宽度：540px；
高度：350px；
位置：相对位置；
背景色：#0d152a；
字体系列：Arial、Helvetica、无衬线字体；
颜色：白色；
}
#头衔{
字体大小：32px；
线高：1.1米；
字体系列：太空时代；
}
#内屏蔽img{
浮动：左；
右边距：20px；
}
#内屏幕h3{
明确：两者皆有；
字体系列：太空时代；
边缘顶端：40px；
}
#屏幕内分区{
边缘顶端：40px；
文本对齐：居中；
}
钮扣{
字体系列：太空时代；
字体大小：150%；
填充：4px8px；
光标：指针；
颜色：白色；
-webkit边界半径：10px；
-moz边界半径：10px；
边界半径：10px；
背景：-webkit线性梯度（顶部，#A3A3，#000）；
背景：-莫兹线性梯度（顶部，#A3A3，#000）；
背景：线性渐变（顶部，
//Controls
var controls = {
    "ufo":
    {
        "left":[65, 74], //A/J
        "right":[68, 76], //D/L
        "up":[87, 73], //W/I
        "down":[83, 75] //S/K
    }

    "rocket":{
        "left":[37], //LEFT
        "right":[39], //RIGHT
        "up":[38], //UP
        "down":[40] //DOWN
    },

    "pause":[80], //P
    "mute":[77] //M
};

//Is Key down?
//For eg, if the W (87) key is down, isKeyDown[87] will be true, otherwise, false.    
var isKeyDown = {}; 

//To Set: 
for(var i in controls)
    if(controls.hasOwnProperty(i))
        if(i=="rocket" || i=="ufo"){ //special cases where we have nested objects
            for(var j in controls[i]){
                for(var k=0;j<controls[i][j].length;k++)
                    isKeyDown[controls[i][j][k]] = false;   
            }
        }
        else for(var j=0;j<controls[i].length;j++)
            isKeyDown[controls[i][j]] = false;

window.addEventListener("keydown", function (e) {
    for(i in isKeyDown)
        if(isKeyDown.hasOwnProperty(i) && e.keyCode == i)
            isKeyDown[e.keyCode] = true;
}, false);

window.addEventListener("keyup", function (e) {
    if(isKeyDown[e.keyCode] != undefined)
        isKeyDown[e.keyCode] = false;
    else return;

    //Actual movements can be handled elsewhere in your tick/main animation function (see below)

    //Pausing and muting (just in case you want them):
    for(var j=0;j<controls["pause"].length;j++)
        if(e.keyCode==controls["pause"][j]){
            //PAUSE GAME
            break;
        }

    for(var j=0;j<controls["mute"].length;j++)
        if(e.keyCode==controls["mute"][j]){
            //MUTE GAME
            break;
        }
}, false);

var movements = {
    "ufo":{
        "up":false,
        "down":false,
        "right":false,
        "left":false
    },
    "rocket":{
        "up":false,
        "down":false,
        "right":false,
        "left":false
    }
};

//Rocket
for(var i in controls["rocket"])
    if(controls.hasOwnProperty(i))
    for(var j=0;j<controls["rocket"][i].length;j++){
        if(isKeyDown[controls["rocket"][i][j]])
            movements["rocket"][i] = true;
    }

//UFO
for(var i in controls["ufo"])
    if(controls.hasOwnProperty(i))
    for(var j=0;j<controls["ufo"][i].length;j++){
        if(isKeyDown[controls["ufo"][i][j]])
            movements["ufo"][i] = true;
    }

//Actual movements, also to go into your tick function or equivalent handler:

//Rocket
if (event.keyCode == movements["rocket"]["up"]) {
    rocket.y -= velocity;
}
if (event.keyCode == movements["rocket"]["left"]) {
    rocket.x -= velocity;
}
if (event.keyCode === movements["rocket"]["down"]) {
    rocket.y += velocity;
}
if (event.keyCode == movements["rocket"]["right"]) {
    rocket.x += velocity;
}

//UFO
if (event.keyCode == movements["ufo"]["up"]) {
    UFO.y -= velocity;
}
if (event.keyCode == movements["ufo"]["left"]) {
    UFO.x -= velocity;
}
if (event.keyCode === movements["ufo"]["down"]) {
    UFO.y += velocity;
}
if (event.keyCode == movements["ufo"]["right"]) {
    UFO.x += velocity;
}