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

この質問に対する唯一の正解はありません。また、ゲーム デザイン ライブラリが見つからない限り、単純なライブラリもありません。あなたの問題は、入力に応じてキャラクターを瞬時に動かしていることですが、ジャンプには時間の経過に伴う動きが必要です。動くスプライト ライブラリを見つける必要があります (特に推奨するものはありませんが、Google にはいくつかあると思います)。または、数ミリ秒ごとに実行され、キャラクターの位置といくつかの一種の速度変数。

編集: そのチュートリアルを見て、頭に浮かぶ最も簡単な解決策はUpdate()、次のようにアニメーション コードを の中に入れることです。

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

の内部でAnimate()は、キャラクタの高さと垂直方向の運動量を追跡する必要があります。運動量が正の場合は、y 位置を少し増やし、そうでない場合は少し減らします。いずれにせよ、運動量を少し減らします。キャラクターが床を突き抜けないようにする何かを追加し、キャラクターが床にいる場合はアップ キーでキャラクターの運動量が正になるように設定します。

これは信じられないほど必要最小限のソリューションですが、基本的なチュートリアルではこれで十分です。

于 2013-04-12T21:30:09.413 に答える