Arşiv Aralık 1, 2021

2 adet rasgele zarın seçilerek ekranda gösterilmesini sağlayan JavaScript örneği:Örneğe ait ekran çıktısı ve HTML+JavaScript Kodları aşağıdadır.Not: html dosyasının bulunduğu klasörde images isimli bir klasör oluşturularak zar resimleri (1.jpg, 2.jpg….) bu klasör içine kopyalanmıştır.HTML+CSS+JavaScript Kodları: Document html{ font-size:62.5%; } body{ background-color: #25373D; } .panel{ margin:5rem auto; width: 50rem; background-color: #1DABB8; } .zarlar{ height: 30rem; display: flex; justify-content: space-around; align-items: center; } .zarlar img{ width: 40%; } .btn-panel{ text-align: center; padding:5rem; } #zarAt{ } /* CSS */ .button-19 { appearance: button; background-color: #1899D6; border: solid transparent; border-radius: 16px; color: #FFFFFF; cursor: pointer; display: inline-block; font-size: 15px; font-weight: 700; letter-spacing: .8px; line-height: 20px; padding: 13px 16px; text-align: center; text-transform: uppercase; transition: filter .2s; vertical-align: middle; white-space: nowrap; width: 100%; } .button-19:hover:not(:disabled) { filter: brightness(1.2); } Zar At const liste =[ "png/001-dice.png", "png/002-dice.png", "png/003-dice.png", "png/004-dice.png", "png/005-dice.png", "png/006-dice.png" ] document.querySelector("#zarAt").onclick=function(){ let uzunluk = liste.length; let zar1 = liste[Math.floor(Math.random()*uzunluk)]; let zar2 = liste[Math.floor(Math.random()*uzunluk)]; document.querySelectorAll(".zar")[0].src=zar1; document.querySelectorAll(".zar")[1].src=zar2; }

Arşiv Aralık 1, 2021

JavaScript Zar Atma Oyunu Örneği (Çift Zar)

Windows 11 Ekran Alıntısı Aracı Kısayol Tuşunu Değiştirme