像素精灵图构建的风中行走（奔跑）女孩动画

很好的一个案例，学习如何制作精灵图动画

h5, canvas, girl, run, walk, pixel

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var cartridge = {
    settings: {
        sourcewidth: 500,
        sourceheight: 294,
        camwidth: 160,
        camheight: 100,
        zoom: 1.3
    },
    scenes: {},
    currentscene: 'first',
    sprites: {}
};
cartridge.sprites = {
    ruffles: {
        state: 'walking',
        visible: false,
        camoffsetx: 0,
        x: 0,
        y: 0,
        direction: 'right',
        destination: {
            x: -1,
            y: -1
        },
        follow: true,
        states: {
            standing: {
                image: '/uploads/1906/walk.png',
                reverse: '/uploads/1906/walk_left.png',
                width: 80,
                height: 60,
                visiblewidth: 50,
                frames: 24,
                rate: 0.41,
                speed: .65,
                currentframe: 0,
            },
            walking: {
                image: '/uploads/1906/walk.png',
                reverse: '/uploads/1906/walk_left.png',
                width: 80,
                height: 60,
                visiblewidth: 50,
                frames: 24,
                rate: 0.41,
                speed: .65,
                currentframe: 0,
            },
            running: {
                image: '/uploads/1906/run.png',
                reverse: '/uploads/1906/run_left.png',
                width: 48,
                visiblewidth: 48,
                height: 57,
                frames: 12,
                rate: 0.35,
                speed: 2,
                currentframe: 0,
            }
        },

}
};
cartridge.scenes = {
    first: {
        image: '/uploads/1906/bg.png',
        width: 0,
        height: 0,
        init: function() {
            var ruffles = cartridge.sprites.ruffles;
            ruffles.state = 'walking';
            ruffles.visible = 'true';
            ruffles.x = -120;
            ruffles.y = 150;
        },
        logic: function() {

}
    }
};
var paca = {
    time: 0,
    canvas: {},
    cursor: {
        x: -1,
        y: -1,
        active: false,
        lastclick: -1
    },
    height: 0,
    width: 0,
    camera: {
        x: 0,
        y: 0,
        shakex: 0,
        shakey: 0,
        width: 0,
        height: 0
    },
    refreshviewport: function() {
        setTimeout(function() {
            // Hide the address bar!
            window.scrollTo(0, 1);
        }, 0);

paca.height = $(window).height();
        paca.width = $(window).width();

$('#resized').attr('height', paca.height);
        $('#resized').attr('width', paca.width);

var ratio = paca.width / paca.height;
        paca.camera.height = cartridge.settings.camheight;
        paca.camera.width = cartridge.settings.camheight * ratio;
        paca.camera.width *= cartridge.settings.zoom;
        paca.camera.height *= cartridge.settings.zoom;
    },
    init: function() {

//first things first, let's preload all the images
        var preload = {
            scenes: [],
            sprites: []
        }
        for (var i in cartridge.scenes) {
            preload['scenes'][i] = new Image();
            preload['scenes'][i].src = cartridge.scenes[i].image;
        }
        for (var i in cartridge.sprites) {
            for (var j in cartridge.sprites[i].states) {
                preload['sprites'][i + ' ' + j] = [];
                preload['sprites'][i + ' ' + j]['image'] = new Image();
                preload['sprites'][i + ' ' + j]['image'].src = cartridge.sprites[i].states[j].image;
                preload['sprites'][i + ' ' + j]['reverse'] = new Image();
                preload['sprites'][i + ' ' + j]['reverse'].src = cartridge.sprites[i].states[j].reverse;
            }
        }

//disable scrolling
        if (window.addEventListener) {
            window.addEventListener('DOMMouseScroll', function(e) {
                e.preventDefault();
                return false;
            }, false);
        }

//fastclick
        FastClick.attach(document.body);

//disable bouncy scrolling in safari on ios
        $(document).bind(
            'touchmove',
            function(e) {
                e.preventDefault();
            }
        );

window.onmousewheel = document.onmousewheel = function(e) {
            e.preventDefault();
            return false;
        };
        window.onscroll = function(e) {
            e.preventDefault();
            return false;
        };

paca.canvas = document.getElementById("game").getContext('2d');
        paca.canvas.mozImageSmoothingEnabled = false;
        paca.canvas.msImageSmoothingEnabled = false;
        paca.canvas.imageSmoothingEnabled = false;

$('#game').attr('height', cartridge.settings.sourceheight);
        $('#game').attr('width', cartridge.settings.sourcewidth);

paca.refreshviewport();
        $(window).on("orientationchange resize", function() {
            paca.refreshviewport();
        });

paca.loop();
        cartridge.scenes[cartridge.currentscene].init();

$('#resized').mouseup(function(e) {
            paca.cursor.active = false;
        });

$('#resized').click(function(e) {
            paca.cursor.active = true;

var doubleclick = false;
            if (parseInt(paca.cursor.lastclick) > parseInt(paca.time - 20)) {
                console.log(paca.cursor.lastclick + ' ' + (paca.time + 20));
                doubleclick = true;
            }
            paca.cursor.lastclick = paca.time;
            //convert e.clientX
            var heightratio = $('#resized').height() / paca.camera.height;
            //convert e.clientY
            var widthratio = $('#resized').width() / paca.camera.width;

//find the sprite with 'follow'
            for (var i in cartridge.sprites) {
                if (cartridge.sprites[i].follow) {
                    var sprite = cartridge.sprites[i];
                    if (doubleclick) {
                        doubleclick = false;
                        console.log('dblclick');
                        sprite.state = 'running';
                    } else {
                        sprite.state = 'walking';
                    }
                    sprite.destination = {
                        x: Math.floor(e.clientX / widthratio + paca.camera.x),
                        y: Math.floor(e.clientY / heightratio + paca.camera.y)
                    };
                }
            }
        });
        $('#resized').on('touchmove mousemove', function(e) {
            paca.cursor.x = e.clientX;
            paca.cursor.y = e.clientY;
        });
    },
    loop: function() {
        requestAnimationFrame(paca.loop);
        paca.time++;
        paca.canvas.clearRect(0, 0, paca.width, paca.height);
        //move sprites, etc.
        cartridge.scenes[cartridge.currentscene].logic();
        //draw scene
        var bg = new Image();
        bg.src = cartridge.scenes[cartridge.currentscene].image;
        paca.canvas.drawImage(bg, 0, 0);
        //draw sprites
        for (var i in cartridge.sprites) {
            var sprite = cartridge.sprites[i];
            var state = sprite.states[sprite.state];
            if (sprite.visible) {
                state.currentframe += state.rate;
                if (state.currentframe >= state.frames) {
                    state.currentframe = 0;
                }
                var spriteimg = new Image();
                if (sprite.direction == 'right') {
                    spriteimg.src = state.image;
                } else {
                    spriteimg.src = state.reverse;
                }
                if (sprite.follow) {
                    //moving?
                    if (sprite.destination.x != -1) {
                        if (sprite.destination.x > (Math.floor(sprite.x) + Math.floor(state.visiblewidth))) {
                            sprite.x += state.speed;
                            sprite.direction = 'right';
                        } else if (sprite.destination.x < (Math.floor(sprite.x) + Math.floor(state.visiblewidth / 2.5))) {
                            sprite.x -= state.speed;
                            sprite.direction = 'left';
                        } else {
                            //standing
                            sprite.state = 'standing';
                            sprite.destination.x = -1;
                            sprite.destination.y = -1;
                            paca.cursor.active = false;
                        }
                    }
                    //camera
                    //sprite.camoffsetx should be either heading towards state.visiblewidth or 0
                    if (sprite.camoffsetx < state.visiblewidth && sprite.direction == 'left') {
                        sprite.camoffsetx++;
                    }
                    if (sprite.camoffsetx > 0 && sprite.direction == 'right') {
                        sprite.camoffsetx--;
                    }
                    paca.camera.x = (sprite.x - sprite.camoffsetx) - paca.camera.width / 4;
                    paca.camera.y = (sprite.y) - paca.camera.height / 4;
                    if (paca.camera.x < 0) {
                        paca.camera.x = 0;
                    }
                    if (paca.camera.x > cartridge.settings.sourcewidth - paca.camera.width) {
                        paca.camera.x = cartridge.settings.sourcewidth - paca.camera.width;
                    }
                    if (paca.camera.y < 0) {
                        paca.camera.y = 0;
                    }
                    if (paca.camera.y > cartridge.settings.sourceheight - paca.camera.height) {
                        paca.camera.y = cartridge.settings.sourceheight - paca.camera.height;
                    }
                }
                paca.canvas.drawImage(
                    spriteimg,
                    Math.floor(state.currentframe) * state.width,
                    0,
                    state.width,
                    state.height,
                    Math.floor(sprite.x),
                    Math.floor(sprite.y),
                    state.width,
                    state.height
                );
                if (sprite.destination.x != -1) {
                    var size = 6
                    paca.canvas.fillStyle = "white";
                    paca.canvas.fillRect(Math.floor(sprite.destination.x - size / 2), Math.floor(sprite.destination.y - size / 2), size, size);
                }
            }
        }
        //draw the big version
        paca.resize();
    },
    resize: function() {
        var upscaledCanvas = document.getElementById('resized').getContext('2d');
        upscaledCanvas.mozImageSmoothingEnabled = false;
        upscaledCanvas.webkitImageSmoothingEnabled = false;
        upscaledCanvas.msImageSmoothingEnabled = false;
        upscaledCanvas.imageSmoothingEnabled = false;
        paca.camera.shakex = 5 * Math.sin(2 * Math.PI * (paca.time / 1000));
        paca.camera.shakey = 2 * Math.sin(2 * Math.PI * (paca.time / 700));
        var camx = paca.camera.x + paca.camera.shakex;
        var camy = paca.camera.y + paca.camera.shakey;
        if (camx < 0) {
            camx = 0;
        }
        if (camy < 0) {
            camy = 0;
        }
        upscaledCanvas.drawImage(paca.canvas.canvas, camx, camy, paca.camera.width, paca.camera.height, 0, 0, paca.width, paca.height);
        //draw the cursor
        if (paca.cursor.x != -1) {
            var size = 6 * 6;
            if (paca.cursor.active) {
                size = 4 * 6;
            }
            upscaledCanvas.fillStyle = "black";
            upscaledCanvas.fillRect(Math.floor(paca.cursor.x - size / 2), Math.floor(paca.cursor.y - size / 2), size, size);
        }
    }
};
paca.init();

编译

CSS

body:after {
    content: "双击奔跑，单击步行";
    position: absolute;
    display: block;
    top: 10px;
    left: 15px;
    color: #fff;
    z-index: 999;
    width: 100%;
}
* {
    overflow-y: hidden;
    -webkit-overflow-scrolling: none;
    cursor: none;
}
body {
    /*
				*/
    
    cursor: none;
    overflow: hidden;
    color: #fff;
    padding: 0;
    margin: 0;
    background: #000;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
canvas {
    background-color: #000;
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}
#game {
    /*
				*/
    
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    opacity: .9;
    border: 2px solid black;
    z-index: 2;
}
#resized {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

HTML

很好的一个案例，学习如何制作精灵图动画

h5, canvas, girl, run, walk, pixel

编辑器支持Emmet

快捷键

很好的一个案例，学习如何制作精灵图动画

h5, canvas, girl, run, walk, pixel

HTML5 Canvas梅雨季节动画（在雨中撑伞行走的路人）

变化各种漂亮图案（万花筒）的CANVAS动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：