CANVAS 方向操控的动画演示

Steering Demo 用鼠标点击并拖拉来改变场景的相对运动方向。

CANVAS

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

(function(w) {

var background, bgctx, players, pctx;
    var camera_scale = 1;

var offsetx = 0;
    var offsety = 0;

var snakes = [];
    var food = [];
    var position = {
        x: 0,
        y: 0
    };

var width, height;

var bgimg;

var play = true;

var input = {
        ox: 0,
        oy: 0,
        x: 0,
        y: 0,
        mx: 0.5,
        my: 0.5,
        lastdown: 0,
        down: false,
        boost: false
    };

function init() {

background = document.getElementById("background");
        players = document.getElementById("players");
        bgctx = background.getContext("2d");
        pctx = players.getContext("2d");

background.width = window.innerWidth;
        background.height = window.innerHeight;

resize_handler();
        attach_listeners();

load_assets(function() {
            requestAnimationFrame(loop);
        });

}

function attach_listeners() {

w.addEventListener("mousedown", down_handler);
        w.addEventListener("touchstart", down_handler);

w.addEventListener("mouseup", up_handler);
        w.addEventListener("touchend", up_handler);

w.addEventListener("mousemove", move_handler);
        w.addEventListener("touchmove", move_handler);

w.addEventListener("resize", resize_handler);
        //w.addEventListener("click", function() {play = !play; play && loop();});

}

function load_assets(callback) {
        //var img = new Image();
        var img = document.getElementById("bgimg");
        img.onload = function() {
            bgimg = img;
            callback();
        };
        //img.src = "img/ground.png";
    }

function resize_handler() {
        width = background.width = w.innerWidth;
        height = background.height = w.innerHeight;
    }

function up_handler(e) {
        if (!e.touches) {
            input.down = false;
            input.boost = false;
        }
    }

function down_handler(e) {

e.preventDefault();

input.down = true;

var now = w.performance.now();
        if (now - input.lastdown < 250) input.boost = true;

input.lastdown = now;
        input.y = e.touches ? e.touches[0].pageY : e.pageY;
        input.x = e.touches ? e.touches[0].pageX : e.pageX;

input.ox = input.x
        input.oy = input.y

}

function move_handler(e) {

e.preventDefault();

if (input.down) {

input.y = e.touches ? e.touches[0].pageY : e.pageY;
            input.x = e.touches ? e.touches[0].pageX : e.pageX;

var xspan = (input.x - input.ox);
            var yspan = (input.y - input.oy);

if (xspan && yspan) {

var xper = xspan / (Math.abs(xspan) + Math.abs(yspan));
                var yper = yspan / (Math.abs(xspan) + Math.abs(yspan));

input.mx = xper;
                input.my = yper;

}

function draw_background() {

var w = (bgimg.width * camera_scale);
        var h = (bgimg.height * camera_scale);

offsetx = (offsetx - (input.mx * (input.boost ? 7 : 5)));
        offsety = (offsety - (input.my * (input.boost ? 7 : 5)));

offsetx = offsetx > w ? (offsetx - w) - w : offsetx;
        offsety = offsety > h ? (offsety - h) - h : offsety;

offsetx = -offsetx > w ? (offsetx + w) + w : offsetx;
        offsety = -offsety > h ? (offsety + h) + h : offsety;

for (var y = -1; y < Math.ceil(height / h) + 1; y++) {
            for (var x = -1; x < Math.ceil(width / w) + 1; x++) {
                bgctx.drawImage(bgimg, 0, 0, bgimg.width, bgimg.height, (x * w) + offsetx, (y * h) + offsety, w, h);
            }
        }

}

function draw_players() {

}

function loop() {

bgctx.clearRect(0, 0, background.width, background.height);

draw_background();

play && requestAnimationFrame(loop);
    }

init();

})(window);

编译

CSS

HTML

Steering Demo 用鼠标点击并拖拉来改变场景的相对运动方向。

CANVAS

编辑器支持Emmet

快捷键

Steering Demo 用鼠标点击并拖拉来改变场景的相对运动方向。

CANVAS

CANVAS 演示躲避障碍物能力进化的动画

HTML5 CANVAS沿固定曲线轨迹运动的演示动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：