HTML Canvas İle Küp Çizmek

Whistle

Ruhsuz Filozof
Kurucu
Kurumsal Üye
Geliştirici
Yardımsever Üye
Mesaj
11.494
Çözümler
546
Beğeni
12.045
Puan
5.864
Merhaba arkadaşlar,
Birkaç gün önce denemek için hazırladığım kodları sizle paylaşmak istiyorum.

tek küp.jpg


JavaScript:
<canvas id="game" width="1280" height="724"></canvas>

<script>
class Kup3D {
    constructor() {
        this.canvas = document.getElementById('game');
        this.context = this.canvas.getContext('2d');
        this.kupAdetX = 3;
        this.kupAdetY = 3;
        this.kupAdetZ = 3;
   
        this.kareBoyut = 150;
    }
 
    init () {
        this.timer = setInterval(this.loop.bind(this), 1000 / 15);
    }
 
    reset() {
        clearInterval(this.timer);
        this.init();
    }
 
    loop() {
        this.draw();
    }
 
    draw() {
        this.context.fillStyle = 'green';
        this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
   
        for(var x = 0; x < this.kupAdetX; x++)
        {
            for(var y = 0; y < this.kupAdetY; y++)
            {
                for(var z = 0; z < this.kupAdetZ; z++)
                {
                    //küp on yuzu ciz.
                    this.context.beginPath();
                    this.context.strokeStyle  = 'rgba(255, 225, 225, 1)';
                    this.context.rect(100+(x*this.kareBoyut)+(z*50), 200+(y*this.kareBoyut)-(z*30), this.kareBoyut, this.kareBoyut);
                    this.context.stroke();
               
                    //küp arka tarafini ciz.
                    this.context.beginPath();
                    this.context.strokeStyle  = 'rgba(255, 225, 225, 1)';
                    this.context.rect(150+(x*this.kareBoyut)+(z*50), 170+(y*this.kareBoyut)-(z*30), this.kareBoyut, this.kareBoyut);
                    this.context.stroke();
               
                    //sol üst yan çizgi
                    this.context.beginPath();
                    this.context.strokeStyle = 'rgba(255, 225, 225, 1)';
                    this.context.moveTo(150+(x*this.kareBoyut)+(z*50), 170+(y*this.kareBoyut)-(z*30));
                    this.context.lineTo(100+(x*this.kareBoyut)+(z*50), 200+(y*this.kareBoyut)-(z*30));
                    this.context.stroke();
               
                    //sağ üst yan çizgi
                    this.context.beginPath();
                    this.context.strokeStyle = 'rgba(255, 225, 225, 1)';
                    this.context.moveTo(300+(x*this.kareBoyut)+(z*50), 170+(y*this.kareBoyut)-(z*30));
                    this.context.lineTo(250+(x*this.kareBoyut)+(z*50), 200+(y*this.kareBoyut)-(z*30));
                    this.context.stroke();
               
                    //sol alt çizgi.
                    this.context.beginPath();
                    this.context.strokeStyle = 'rgba(255, 225, 225, 1)';
                    this.context.moveTo(150+(x*this.kareBoyut)+(z*50), 320+(y*this.kareBoyut)-(z*30));
                    this.context.lineTo(100+(x*this.kareBoyut)+(z*50), 350+(y*this.kareBoyut)-(z*30));
                    this.context.stroke();
               
                    //sağ alt çizgi.
                    this.context.beginPath();
                    this.context.strokeStyle = 'rgba(255, 225, 225, 1)';
                    this.context.moveTo(300+(x*this.kareBoyut)+(z*50), 320+(y*this.kareBoyut)-(z*30));
                    this.context.lineTo(250+(x*this.kareBoyut)+(z*50), 350+(y*this.kareBoyut)-(z*30));
                    this.context.stroke();
                }
            }
        }
    }
}

const game = new Kup3D();
window.onload = () => game.init();

</script>

3x3x3 küpler.jpg
 
gerçek hayatta ne işimize yarayacak hocam bu .d
 
Geri
Üst