2

我尝试通过阅读本教程来制作角色动画：http: //mrbool.com/html5-canvas-moving-a-character-with-sprites/26239。让角色向左走很容易（“向右走”已经完成）。但是如何让角色跳跃（带动画）？我在想这样的事情：

    case 38:
        if (y + dy > HEIGHT){
            y += dy
        } 

    break;

...但它只是向上移动角色（没有动画）。有人能帮我吗？一些代码示例将很有用。

4

2 回答 2

2

你会得到这样的跳跃行为（在教程中使用相同的代码）

JSFiddle

var canvas;// the canvas element which will draw on
var ctx;// the "context" of the canvas that will be used (2D or 3D)
var dx = 50;// the rate of change (speed) horizontal object
var x = 30;// horizontal position of the object (with initial value)
var y = 150;// vertical position of the object (with initial value)
var limit = 10; //jump limit
var jump_y = y;
var WIDTH = 1000;// width of the rectangular area
var HEIGHT = 340;// height of the rectangular area
var tile1 = new Image ();// Image to be loaded and drawn on canvas
var posicao = 0;// display the current position of the character
var NUM_POSICOES = 6;// Number of images that make up the movement
var goingDown = false;
var jumping;

function KeyDown(evt){
    switch (evt.keyCode) {
        case 39:  /* Arrow to the right */
            if (x + dx < WIDTH){
                x += dx;
                posicao++;
                if(posicao == NUM_POSICOES)
                    posicao = 1;

                Update();
            }
            break;    
        case 38:
            jumping = setInterval(Jump, 100);
    }
}

function Draw() {      
    ctx.font="20px Georgia";
    ctx.beginPath();
    ctx.fillStyle = "red";   
    ctx.beginPath();
    ctx.rect(x, y, 10, 10);
    ctx.closePath();
    ctx.fill();   
    console.log(posicao);
}
function LimparTela() {
    ctx.fillStyle = "rgb(233,233,233)";   
    ctx.beginPath();
    ctx.rect(0, 0, WIDTH, HEIGHT);
    ctx.closePath();
    ctx.fill();   
}
function Update() {
    LimparTela();    
    Draw();
}

var Jump = function(){
    if(y > limit && !goingDown){
        y-=10;
        console.log('jumping: ' + y);
    } else{
    goingDown = true;
        y +=10;
        if(y > jump_y){
            clearInterval(jumping);
            goingDown = false;
        }

    }
}

function Start() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    return setInterval(Update, 100);
}

window.addEventListener('keydown', KeyDown);
Start();
于 2013-04-12T21:57:11.420 回答
1

There's no one right answer to this question, and unless you find a game-design library, there's no simple one, either. Your problem is that you're moving the character instantaneously in response to input, but a jump requires movement over time. You'll have to either find a moving sprites library - I don't have one in particular to recommend, but I'm sure Google has several - or set up something yourself that runs every so many milliseconds and updates the character's position and some sort of velocity variable.

Edit: Looking at that tutorial, the simplest solution that comes to mind is to put your animation code inside of Update(), like so:

function Update() {
    LimparTela();
    Animate();
    Draw();
}

Inside of Animate(), you should keep track of the character's height and vertical momentum. If the momentum is positive, increase the y position a little, otherwise decrease it a little. Either way, reduce momentum a bit. Add something to keep the character from going through the floor, and have the up key set the character's momentum to be positive if he's on the floor.

Note that this is an incredibly bare-bones solution, but for a basic tutorial it'll do the job.

于 2013-04-12T21:30:09.413 回答