2
キャンバス上でプレーヤーの画像を移動させようとしています。プレーヤーの画像が負荷で表示されません。私はオンロードをチェックするためにアラートを使用しましたが、実行されているように見えますが、イメージは表示されません。画像がキャンバス上に表示されない
私は左右に動かすだけでプレイヤーイメージが表示されず、上下に動かすだけでプレイヤーイメージが表示されません。 XとYの両方の方向に移動した後に画像が表示されるため、アニメーション機能で設定されるまでXとYが正しく設定されていないと思われます。自分のコンピュータ上で自分のイメージを使っていますが、最初のXとYのオンロードが間違っているのを見ることはできませんが、
私はここに全体のコードを載せていますが、それはあまりにも多くの場合私は間違っていたか分からない私は知らない。私はこれで非常に新しいです、そして、これはここに質問を投稿した初めてのことです。私が間違っていることを誰かが教えてくれたら、私は感謝しています。
編集：私はちょうど実際の数字
var destX = 260;
var destY = 220;
に
var destX = xToCenter;
var destY = yToCenter;
を変更し、それが動作しますが、私は本当に理由を理解していません。誰かがxToCenterとyToCenterをonloadに使用できない理由を説明することはできますが、それは移動関数の間に機能しますか？
//create canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
canvas.width = 600;
canvas.height = 600;
//create background canvas
var worldCanvas = document.getElementById("worldCanvas");
var wctx = worldCanvas.getContext('2d');
worldCanvas.width = 600;
worldCanvas.height = 600;
//player image
var avatar = new Image();
var sourceX = 32;
var sourceY = 32;
var sourceWidth = 16;
var sourceHeight = 32;
var destWidth = sourceWidth * 5;
var destHeight = sourceHeight * 5;
var destX = xToCenter;
var destY = yToCenter;
var speed = 4;
var faceRight = 0;
var faceLeft = 1;
var faceDown = 2;
var faceUp = 3;
var animation = [0, 32, 64];
var i = 0;
//background image
var worldMap = new Image();
var sMapX = 0;
var sMapY = 0;
var sMapWidth = canvas.width;
var sMapHeight = canvas.height;
var dMapX = 0;
var dMapY = 0;
var dMapWidth = canvas.width;
var dMapHeight = canvas.height;
var worldWidth = 1280;
var worldHeight = 873;
//center player
var xToCenter = (0.5 * dMapWidth - 0.5 * destWidth);
var yToCenter = (0.5 * dMapHeight - 0.5 * destHeight);
//load and draw background
worldMap.src = "http://img06.deviantart.net/75db/i/2013/332/5/2/random_background_by_electriczerox-d6vyp1u.png";
worldMap.onload = function() {
wctx.drawImage(worldMap, sMapX, sMapY, sMapWidth, sMapHeight, dMapX, dMapY, dMapWidth, dMapHeight);
alert("worldMap loaded");
}
//load and draw avatar
avatar.src = "http://www.somerandomfacts.com/wp-content/uploads/2013/11/jpg1";
avatar.onload = function() {
ctx.drawImage(avatar, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
alert("avatar loaded");
}
//clear and redraw
;
(function() {
function main() {
window.requestAnimationFrame(main);
wctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.clearRect(0, 0, canvas.width, canvas.height);
wctx.drawImage(worldMap, sMapX, sMapY, sMapWidth, sMapHeight, dMapX, dMapY, dMapWidth, dMapHeight);
ctx.drawImage(avatar, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
}
main();
})();
//move avatar
window.addEventListener('keydown', function(event) {
var keyPressed = event.keyCode;
switch (keyPressed) {
//a moves left
case 65:
if (sMapX > 0) sMapX -= speed;
destX = xToCenter;
sourceX = faceLeft * sourceWidth;
animationLoop();
sourceY = animation[i];
break;
//w moves up
case 87:
if (sMapY > 0) sMapY -= speed;
destY = yToCenter;
sourceX = faceUp * sourceWidth;
animationLoop();
sourceY = animation[i];
break;
//d moves right
case 68:
if (sMapX < worldWidth - dMapWidth) sMapX += speed;
destX = xToCenter;
sourceX = faceRight * sourceWidth;
animationLoop();
sourceY = animation[i];
break;
//s moves down
case 83:
if (sMapY < worldHeight - dMapHeight) sMapY += speed;
destY = yToCenter;
sourceX = faceDown * sourceWidth;
animationLoop();
sourceY = animation[i];
break;
}
});
//animate while moving
function animationLoop() {
window.requestAnimationFrame(changeI);
}
function changeI() {
if (i <= animation.length) i += 1;
animation[i];
if (i == animation.length) i = 0;
}.canvas {
border: 1px solid;
position: fixed;
top: 0;
left: 0;
}
.worldCanvas {
border: 1px solid;
z-index: -1;
position: fixed;
top: 0;
left: 0;
}<canvas class="canvas" id="canvas"></canvas>
<canvas class="worldCanvas" id="worldCanvas"></canvas>