İçindekiler:

Basit Rastgele Sanal Zar Nasıl Kodlanır: 6 Adım
Basit Rastgele Sanal Zar Nasıl Kodlanır: 6 Adım

Video: Basit Rastgele Sanal Zar Nasıl Kodlanır: 6 Adım

Video: Basit Rastgele Sanal Zar Nasıl Kodlanır: 6 Adım
Video: Yedi hamlede zeka küpünü çözmeyi deniyorum! Rubik cube solve #shorts #fypp #kesfet 2024, Kasım
Anonim
Basit Rastgele Sanal Zar Nasıl Kodlanır
Basit Rastgele Sanal Zar Nasıl Kodlanır

Herkese selam!!!!! Bu benim ilk dersim ve size PC'nizde veya akıllı telefonunuzda sanal bir zarın nasıl kodlanacağını öğreteceğim. HTML, JavaScript ve CSS kullanıyorum, umarım hepiniz beğenirsiniz ve aşağıdaki bağlamda bana oy vermeyi unutmayın.

Gereçler

1. Akıllı telefonunuzda veya PC'nizde iyi bir metin düzenleyici

1. Adım: Metin Düzenleyicinizi Alın

Burada akıllı telefonumu burada metin düzenleyici olarak kullanıyorum (AnWriter). Bilgisayarınızın not defterini de kullanabilir veya çevrimiçi olarak iyi bir metin düzenleyici edinebilirsiniz.

2. Adım: Die Faces'i İndirin

Die Faces'i indirin
Die Faces'i indirin
Die Faces'i indirin
Die Faces'i indirin
Die Faces'i indirin
Die Faces'i indirin

Bu adıma eklediğim 1'den 6'ya kadar bazı kalıp yüzleri indirdim. Yani, tercih ettiğinizi indirebilir veya benimkini kullanabilirsiniz (ücretsizsiniz).

Benimkine kalıp yüzlerine göre isim verdim. Yani:

Die_face_1.png, Die_face_2-p.webp

Adım 3: Kodlamaya Başlayın

Kodu.html dosyası olarak kaydedin

img src'yi kullanarak istediğiniz varsayılan kalıp yüzünü tanıtarak başlayın.

4. Adım:

Daha sonra zar atmak için bir düğmeye ihtiyacımız olacak, bunu bir düğme işlevi ekleyerek yapıyoruz.

RULO ZAR

Adım 5: Var ve Matematik İşlevini Kullanın

Var ve Matematik İşlevini Kullanın
Var ve Matematik İşlevini Kullanın

zarları salla

function getRand(){

var vu=Math.floor(Math.random()*6)+1;

var vu2=Math.floor(Math.random()*6)+1;

var di =["die_face_1.png", "die_face_2.png", "die_face_3.png", "die_face_4.png", "die_face_5.png", "die_face_6.png"];

document.getElementById("zar").src= di[vu-1];

document.getElementById("dicl").src= di[vu2-1];

}

Bu tam kod, inceleyin ve test edin ve efekti elde etmek için fotoğrafı aldığınızdan emin olun.

Ve bu kodla ilgili yardımıma ihtiyacınız olursa, yorum bölümünde belirtin.

Beğenmezsen tasarımı değiştirebilirsin ama ben kullanmak istediğim amaç için tercih ederim

6. Adım: Çalıştırın

Çalıştırmak için kodu tarayıcınızda çalıştırın

Önerilen: