Bu yazıda JavaScript kullanarak iki tane zarı rastgele atan örnek uygulamayı yapacağız.
Örnek uygulamanın çıktısı:
İlk olarak HTML tasarımı kodlayarak başlıyoruz.
1 2 3 4 5 6 7 8 9 10 11 | <div class="panel"> <div class="zarlar"> <img src="png/001-dice.png" alt="zar 1" class="zar"> <img src="png/001-dice.png" alt="zar 2" class="zar"> </div> <div class="btn-panel"> <button id="zarAt" class="button-19">Zar At</button> </div> </div> |
HTML kodlarını biçimlendiren CSS kodlarını yazıyoruz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | 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); } |
Son olarak da zar attığımızda rastgele gelmesi için gerekli olan javascript kodlarını yazıyoruz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 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; } |
Uygulamanın tamamı:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> 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); } </style> </head> <body> <div class="panel"> <div class="zarlar"> <img src="png/001-dice.png" alt="zar 1" class="zar"> <img src="png/001-dice.png" alt="zar 2" class="zar"> </div> <div class="btn-panel"> <button id="zarAt" class="button-19">Zar At</button> </div> </div> <script> 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; } </script> </body> </html> |
Yorum Yap