HTML Canvas javascript перемещение объекта по оси Z

Question

Я пытаюсь создать 3D-эффект на HTML Canvas. Я хочу получить эффект 2D-объекта, приближающегося к виду от первого лица. Есть ли способ сделать так, как будто прямоугольник движется по оси Z?

Это мой код. У меня вроде есть то, что я хочу, но это выглядит не совсем естественно.

Используйте клавишу со стрелкой вверх для перемещения объекта. Вы также можете использовать клавиши со стрелками влево и вправо, чтобы перемещать его влево и вправо.

Я пытаюсь сделать игру похожей на эту: http://game.notch.net/christmaschopping/

var canvas = document.getElementById('canv');
var c = canvas.getContext('2d');

window.onload = function() {
    start();
    setInterval(update, 10);
}

class Obstacle {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.w = 30;
        this.h = 60;
        this.xSpeed = 0;
        this.ySpeed = 0;
        this.passedView = false;
        this.zSpeed = 0;
    }
    show() {
        if (!this.passedView) {
            c.fillStyle = 'green';
            c.fillRect(this.x, this.y, this.w, this.h);
        }
    }
    update() {
        this.x += this.xSpeed;
        this.y += this.ySpeed;

        this.w+=this.zSpeed;
        this.h+=this.zSpeed;
        this.x-=this.zSpeed/2;
        this.y-=this.zSpeed/2;
    }
}

var ob;

function start() {
    ob = new Obstacle(385, 370);
}

function update() {
    //background
    c.fillStyle = 'lightblue';
    c.fillRect(0, 0, 800, 800);
    //obstacle
    ob.show();
    ob.update();
}

function keyDown(e) {
    switch(e.keyCode) {
        case 39:
            ob.xSpeed = 5;
            break;
        case 37:
            ob.xSpeed = -5;
            break;
        case 38:
            ob.zSpeed = 5;
            break;
    }
}

function keyUp(e) {
    switch(e.keyCode) {
        case 39:
            ob.xSpeed = 0;
            break;
        case 37:
            ob.xSpeed = 0;
            break;
        case 38:
            ob.zSpeed = 0;
            break;
    }
}

document.onkeydown = keyDown;
document.onkeyup = keyUp;

<canvas id='canv' width=800 height=800></canvas>
<script src="main.js"></script>

Answer 1

трудно воспринимать трехмерный вид одного объекта, поэтому представьте себе несколько объектов, движущихся независимо ... позвольте объектам двигаться самостоятельно

Я предлагаю вам ввести понятие перспективной проекции ... вот почему объекты отодвигаясь, становитесь меньше

, чтобы было проще назначить объектам размер, а затем масштабировать этот размер, используя их местоположение измерения Z

в дополнение к назначению каждому объекту местоположения в 3D (x, y, z) поместите их все в мир, скажем, внутри куба или сферы

запускайте каждый новый объект в каком-то случайном направлении со случайной скоростью, случайным размером

поместите все объекты в некоторую структуру данных, чтобы у вас есть массив, по которому вы можете выполнять итерацию, чтобы делать что-то с каждым объектом

ввести понятие времени в этот мир ... перебирать структуру данных ваших объектов и выполнять действия, как в

• аккуратно переместите координаты x, y, z текущего объекта на крошечный бит в каждом затемненном месте ... сохраните тракт знака (pos / n например) каждого приращения в каждом измерении

• , если текущий x, y или z выходит за пределы внутренней части куба или сферы, переключите знак приращения для этого измерения, как упомянуто выше

• когда вы рисуете данный объект, масштабируйте его размер на основе его размера Z ... это перспективная проекция

  object_rendered_size = object_constant_size * Z dimension for this object
  

• часы в следующую эпоху ... поместите над l oop внутри внешнего l oop, чтобы все продолжало двигаться все время

И да, это даст вам 3D ... нет необходимости сразу переходить в WebGL, пока такие проекты не закончатся, просто закодируйте сами себя ... с сегодняшним оборудованием вы можете go очень далеко, используя свой текущий подход к использованию холста ... научитесь линейной алгебре управлять местоположением объекта или камеры с помощью матрицы механика

Удачи !!!