HTML5画布字符跳转答案

【问题标题】：HTML5 canvas character jumpHTML5画布字符跳转
【发布时间】：2013-04-05 13:17:04
【问题描述】：

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

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

    break;

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

【问题讨论】：

左右怎么做？
对不起，我没有阅读教程。我假设我的问题的答案就在那里。没关系
是的。它与'y'几乎相同，但你放了'x'变量。向左移动就是 x -= dx。

标签： javascript html animation canvas

【解决方案1】：

这个问题没有一个正确答案，除非您找到游戏设计库，否则也没有简单的答案。您的问题是您正在即时移动角色以响应输入，但跳跃需要随着时间的推移而移动。你必须要么找到一个移动精灵库——我没有特别推荐的，但我相信谷歌有几个——或者你自己设置一些东西，每隔几毫秒运行一次，更新角色的位置和一些一种速度变量。

编辑：查看该教程，想到的最简单的解决方案是将您的动画代码放在Update() 中，如下所示：

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

在Animate() 内部，您应该跟踪角色的高度和垂直动量。如果动量为正，则稍微增加 y 位置，否则减少一点。不管怎样，稍微减少动量。添加一些东西以防止角色穿过地板，如果角色在地板上，则使用向上键将角色的动量设置为正。

请注意，这是一个非常简单的解决方案，但对于基本教程来说，它就可以完成这项工作。

【讨论】：

Sprite 目前对我来说并不重要。我总是可以从“行走”动画中添加一个。关于动画 - 那么为跳跃做另一个 setInterval 怎么样？这是个好主意吗？
查看我的编辑 - 因为你已经有一个 setInterval 在那里，你可以使用相同的。对于成熟的游戏来说，这并不是真正的最佳解决方案，但对于学习绳索来说，它会做得很好。

【解决方案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();

【讨论】：