CODEWITHSUNDEEP
javascripthtmlanimationcanvas
Amay
Amay

Reputation: 1521

HTML5 canvas character jump

I try to make an animation of character by reading this tutorial: http://mrbool.com/html5-canvas-moving-a-character-with-sprites/26239 . It's quite ease to make the character go left ('go right' is already done). But how to make the character jump (with animation)? I was thinking about something like this:

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

    break;

...but it just move character up (without animation). Can someone help me? Some code example will be useful.

Upvotes: 2

Views: 7694

Answers (2)

pollirrata
pollirrata

Reputation: 5286

You get the jumping behavior like this (using the same code on the tutorial)

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();

Upvotes: 2

user1618143
user1618143

Reputation: 1748

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.

Upvotes: 1

Related Questions