製作方塊移動？

Question

我試圖讓div「ySpeed（1）」和「ySpeed（-1）」使myGamePiece上下移動，並最終從左到右。我做了兩個叫做movePieceUp和movePieceDown的函數。我不知道爲什麼這些功能無法正常工作。知道我能讓myGamePiece正常工作的方法嗎？

function component(width, height, color, x, y, type) { 
 
    this.type = type; 
 
    if (type == "image") { 
 
    this.image = new Image(); 
 
    this.image.src = color; 
 
    } 
 
    this.score = 0; 
 
    this.width = width; 
 
    this.height = height; 
 
    this.speedX = 2; 
 
    this.speedY = 2; 
 
    this.x = x; 
 
    this.y = y; 
 
    this.gravity = 0; 
 
    this.gravitySpeed = 0; 
 
    this.color = color; 
 
    this.update = function() { 
 
    random = Math.floor((Math.random() * 200) + 1); 
 
    random2 = Math.floor((Math.random() * 200) + 1); 
 

 
    function getRandomColor() { 
 
     var letters = 'ABCDEF'; 
 
     var color = '#'; 
 
     for (var i = 0; i < 6; i++) { 
 
     color += letters[Math.floor(Math.random() * 16)]; 
 
     } 
 
     return color; 
 
    } 
 
    randcolor = getRandomColor(); 
 
    ctx = myGameArea.context; 
 
    if (this.type == "image") { 
 
     ctx.drawImage(this.image, this.x, this.y, this.width, this.height); 
 
    } else { 
 
     ctx.fillStyle = randcolor; 
 
     ctx.fillRect(random, random2, 50, 50); 
 
    } 
 
    this.x = random; 
 
    this.y = random2; 
 
    this.width = 50; 
 
    this.height = 50; 
 
    this.color = randcolor; 
 
    } 
 

 
} 
 

 

 
function component2(width, height, color, x, y, type) { 
 
    this.type = type; 
 
    if (type == "image") { 
 
    this.image = new Image(); 
 
    this.image.src = color; 
 
    } 
 
    this.score = 0; 
 
    this.width = width; 
 
    this.height = height; 
 
    this.speedX = 2; 
 
    this.speedY = 2; 
 
    this.x = x; 
 
    this.y = y; 
 
    this.gravity = 2; 
 
    this.gravitySpeed = 0; 
 
    this.update = function() { 
 
    ctx = myGameArea.context; 
 
    if (this.type == "image") { 
 
     ctx.drawImage(this.image, this.x, this.y, this.width, this.height); 
 
    } else { 
 
     ctx.fillStyle = color; 
 
     ctx.fillRect(this.x, this.y, this.width, this.height); 
 
    } 
 
    } 
 
    this.newPos = function() { 
 
    this.x = this.x + this.speedX; 
 
    this.y = this.y + this.speedY; 
 
    //removed hitting rock bottom because the background and other pieces will be off screen. 
 

 
    } 
 
    this.hitBottom = function() { 
 
    var rockbottom = myGameArea.canvas.height - this.height; 
 
    if (this.y > rockbottom) { 
 
     this.y = rockbottom; 
 
     this.gravitySpeed = 0; 
 
     board = 1; 
 
    } 
 
    } 
 
    this.crashWith = function(otherobj) { 
 
    var myleft = this.x; 
 
    var myright = this.x + (this.width); 
 
    var mytop = this.y; 
 
    var mybottom = this.y + (this.height); 
 
    var otherleft = otherobj.x; 
 
    var otherright = otherobj.x + (otherobj.width); 
 
    var othertop = otherobj.y; 
 
    var otherbottom = otherobj.y + (otherobj.height); 
 
    var crash = true; 
 
    if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) { 
 
     crash = false; 
 
    } 
 
    return crash; 
 
    } 
 
} 
 

 
function startGame() { 
 
    random = Math.floor((Math.random() * 100) + 1); 
 

 

 
    random2 = Math.floor((Math.random() * 100) + 1); 
 

 

 
    square = new component(50, 50, "green", random, random2); 
 
    myGamePiece = new component2(30, 40, "greenhorn.gif", 220, 120); 
 
    enemyPiece2 = new component(50, 50, "Trump1.jpg", random, random2,); 
 
    myGameArea.start(); 
 
    return square 
 
} 
 

 
var myGameArea = { 
 
    canvas: document.createElement("canvas"), 
 
    start: function() { 
 

 
    this.canvas.width = 450; 
 
    this.canvas.height = 270; 
 
    this.context = this.canvas.getContext("2d"); 
 
    document.body.insertBefore(this.canvas, document.body.childNodes[0]); 
 

 
    this.interval = setInterval(updateGameArea, 1000); 
 
    }, 
 
    clear: function() { 
 
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); 
 
    } 
 
} 
 

 

 

 
function updateGameArea() { 
 

 
    myGameArea.clear(); 
 
    square.update(); 
 
    myGamePiece.update(); 
 
    enemyPiece2.update(); 
 

 
} 
 

 
function movePieceUp() { 
 
    myGamePiece.ySpeed(1); 
 
    myGamePiece.speedY = 2; 
 
} 
 

 
function movePieceDown() { 
 
    myGamePiece.ySpeed(-1); 
 
    myGamePiece.speedX = 2; 
 
} 
 

 

 
document.getElementById("start").addEventListener('click', startGame); 
 
document.getElementById("ySpeed(1)").addEventListener('click', movePieceUp); 
 
document.getElementById("ySpeed(-1)").addEventListener('click', movePieceDown);

<p> Click Start Game to play </p> 
 
<div id="start">Start Game</div> 
 
<div id="hi">Hi</div> 
 

 

 
<div id="ySpeed(1)">UP</div> 
 
</p> 
 
<div id="ySpeed(-1)">DOWN</div>

Answer 1

你需要在使用它的功能使得它通俗易懂的地方聲明你myGamePiece變量。可以通過在函數調用之外聲明它，或者將該變量作爲參數傳遞給適當的函數來使其成爲「全局」。