Question

因此，对于这个项目，我需要一个Sprite能够在Canvas上使用左右箭头键事件移动。我看过一大堆教程视频和帖子都告诉我做不同的事情以及我教授给我们展示的东西。我真的很困惑如何做一个精灵移动。我使用sublime编写我的代码，但这里是一个jsfiddle所以你们都可以看到它：https://jsfiddle.net/n1v0w8kh/

//256 x 384

//global variables
var canvas;

var ctx;

var image;

var imageWidth;

var imageHeight;

var counterRight = 0;

var counterLeft = 0;

var imageSx;

var imageSy;

var frameWidth;

var frameHeight;

var frameIndex;

var numberOfFrames;

var image_X = 215;

var image_Y = 100;

var keydown;

var videoLeft;

var videoRight;

//displays the neutral start image
function animate() {

    frameIndex = 0;
    numberOfFrames = 4;
    imageSx = frameIndex * imageWidth;
    //imageSy = frameIndex * image.height;
    ctx.clearRect(image_X, image_Y, frameWidth, frameHeight);
    ctx.drawImage(image, imageSx, 0, frameWidth, frameHeight, image_X,      image_Y, frameWidth, frameHeight);

    frameIndex++;
    if (frameIndex >= numberOfFrames)
        frameIndex = 0;


}

//handles the keyboard events
/*function onKeyDown(event) {
    //console.log(event.keyCode);
    if (event.keyCode == 39) {
        image_X += 5;
        if (image_X > 440) {
            image_X = 440;
            rightVideo();
            //alert("border hit");
        }
        image = new Image();
        image.onload = function() {
            frameHeight = image.height / 4;
            frameIndex = 0;
            imageSx = frameIndex * image.width;
            imageSy = frameIndex * image.height;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(image, counterRight * imageSx, imageSy, frameWidth, frameHeight, image_X, image_Y, frameWidth, frameHeight);
        };
        counterRight += 1;
        if (counterRight >= 11) {
            counterRight = 8;
        }
        image.src = "../images/cat_man.png";
    }
    if (event.keyCode == 37) {
        image_X -= 5;
        if (image_X < 0) {
            image_X = 0;
            leftVideo();
        }
        counterLeft += 1;
        if (counterLeft >= 7) {
            counterLeft = 4;
        }
        imageSx = (imageWidth / 4) * counterLeft;
        imageSy = imageHeight / 4;
        ctx.clearRect(image_X, image_Y, frameWidth, frameHeight);
        ctx.drawImage(image, imageSx, imageSy, frameWidth, frameHeight, image_X, image_Y, frameWidth, frameHeight);

    }


}*/

//handles the left video
function leftVideo() {
    alert("leftVideo function");
}

//handles the right video
function rightVideo() {
    alert("rightVideo function");
}

//Updates the current time
function updateDateTime() {
    var date = new Date();
    //console.log(date);
    var today = document.getElementById("time");
    today.innerHTML = date.toString();
}

function main() {
    setInterval(updateDateTime, 500);


    //document.onkeydown = onKeyDown;
    //document.onkeyup = animate;
    //videoRight = document.getElementById("right").addEventListener("play", rightVideo);
    //videoLeft = document.getElementById("left").addEventListener("play", leftVideo);

}

window.onload = function() {
    main();
    canvas = document.getElementById("myCanvas");
    ctx = canvas.getContext("2d");
    image = new Image();
    image.onload = function() {
        imageWidth = this.width;
        imageHeight = this.height;
        frameWidth = image.width / 4;
        frameHeight = image.height / 4;
        //animate();
        setInterval(animate, 100);
    };
    image.src = "../images/cat_man.png";
};

这里是我使用的精灵表文件的来源http://orig13.deviantart.net/cbc5/f/2013/077/5/e/_animal_crossing__punchy_rpg_maker_xp_spritesheet_by_ineonfox-d5yieuw.png

我希望你们可以让文件工作，因为我不能无论如何，我评论了其中一个函数，因为我想首先弄清楚如何遍历具有多个行和列的精灵表。我发现的所有例子都是单行精灵表。我想一旦我能够做到这一点，它应该很容易使用箭头键。如果你很棒的人看到我可以优化代码请告诉我，我总是希望缩短和压缩我的代码，使其更简单。谢谢你的帮助!!

使用箭头键命令使用画布javascript进行精灵移动

0 个答案: