HTML5/Canvas实现的角色控制动画

RPG游戏的最基本操作，就是操控角色的移动。

html5, game, rpg

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 4375
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var canvas, ctx, img, cw, ch;
var LEFT = 0,
    RIGHT = 1,
    IDLE = 0,
    RUN = 1;

var posX = 0,
    posY = 10,
    speed = 20,
    scale = 0.25;
var FPS = 1000 / 12;
var cont = 0,
    tick = 0,
    topY = 0;

var player_dir = RIGHT,
    player_state = IDLE,
    isRight = false,
    isLeft = false;

var w1 = 113,
    h1 = 308,
    w2 = 261,
    h2 = 289;

var interval;

window.onload = function() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    cw = window.innerWidth * 0.8;
    ch = 100;
    canvas.width = cw;
    canvas.height = ch;
    img = new Image();
    img.src = "http://pedrocacique.com/game/img/spritesheet.png";

img.onload = function() {
        console.log("OK");
        init();
    }
}

function init() {
    interval = setInterval(gameloop, FPS);
    document.addEventListener('keydown', onKeyDown, false);
    document.addEventListener('keyup', onKeyUp, false);
}

function gameloop() {
    update();
    drawImage();
}

function drawImage() {
    ctx.clearRect(0, 0, cw, ch);
    switch (player_state) {

case IDLE:
            topY = (player_dir == RIGHT) ? 0 : h1;
            posY = ch - h1 * scale;
            ctx.drawImage(img,
                cont * w1, topY, w1, h1,
                posX, posY, w1 * scale, h1 * scale);
            tick++;
            if (tick == 10) {
                cont++;
                if (cont == 2) cont = 0;
                tick = 0;
            }
            break;
        case RUN:
            topY = (player_dir == RIGHT) ? (2 * h1) : (2 * h1 + h2);

ctx.drawImage(img,
                cont * w2, topY, w2, h2,
                posX, posY, w2 * scale, h2 * scale);
            cont++;
            if (cont == 8) cont = 0;
            if (isShift) {
                //troca o spritesheet   
            }
            break;
    }
}

function onKeyDown(event) {
    var codigo = event.keyCode;
    switch (codigo) {
        case 37:
            isLeft = true;
            player_dir = LEFT;
            switchState(RUN);
            break;
        case 39:
            player_dir = RIGHT;
            isRight = true;
            switchState(RUN);
            break;

}
}

function onKeyUp(event) {
    var codigo = event.keyCode;
    switch (codigo) {
        case 37:
            isLeft = false;
            switchState(IDLE);
            break;
        case 39:
            isRight = false;
            switchState(IDLE);
            break;
    }
}

编译

CSS

HTML

RPG游戏的最基本操作，就是操控角色的移动。

html5, game, rpg

编辑器支持Emmet

快捷键

RPG游戏的最基本操作，就是操控角色的移动。

html5, game, rpg

HTML5/Canvas使用单纯形噪音算法实现的粒子乱流动画

使用HTML5/Canvas实现的3D雪花飞旋动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：