- Mesaj
- 11.929
- Çözümler
- 564
- Beğeni
- 13.492
- Puan
- 5.915
- Ticaret Puanı
- 2
Merhaba arkadaşlar,
Birkaç gün önce denemek için hazırladığım kodları sizle paylaşmak istiyorum.
Birkaç gün önce denemek için hazırladığım kodları sizle paylaşmak istiyorum.
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>