JAVASCRİPT RANDOM KOMUTU İLE TAŞ KAĞIT MAKAS

Bugün JS kullanarak Taş , Kağıt ve Makas uygulaması yapıcaz.Html,Javascript ve

Css ile nasıl yapıcağmızı anlatıcam.

1.Kısım HTML

• HTML ile iskeleti oluşturuyoruz.Sayfaya 3 adet radio button ve buton koymamız gerek
• İnput:type kısmına "radio" yazmamız gerek ayrıyeten koyucağımız 3 radio butonun 3'üde aynı name ve javascript için bir value ya sahip olmak zorunda.
• Button: butona javascriptte kullanmak üzere onclick fonksiyonunu tanımlıyoruz 

HTML Kodu:

<div class="div1">
	<input type="radio" name="oyun"id="tas"value="tas"><img src="taş.png" ><br><br>
	<input type="radio" name="oyun"id="kagıt"value="kagıt"><img src="kağıt.png" ><br><br>
	<input type="radio" name="oyun"id="makas"value="makas"><img src="makas.png" ><br><br>
	<button onclick="tikla()"style="color: #000;background: #30d5c8;width: 85px
	;">Başla</button>
</div>
<div class="div2">VS</div>
<div class="div1" style="box-shadow: 3px 3px #ff0000;" id="Asensio"><br><br>YZ NIN SEÇTİĞİ</div>

2.Kısım CSS

Css kullanarak sayfayı düzenleyeceğiz.

• Sayfayı ortaladık ve yazıları.
• Radio buton container ve butonları şıklaştırdık.
• Kutulara ve yazılara gölge efekti ekledik
• Resimlerin büyüklüğnü belirledik

CSS Kodu:

*
{
	color: #fff;
	font-family: calibri;
	font-size:1.3rem;
	box-sizing: border-box;
	margin: 0px;
	padding: 0px;
}
body
{
	background: #000;
}
.div1
{
	margin:50px auto;
	border: 1px #fda12a solid; 
	width:40%;
	height:400px;
	background: #fda12a;
	box-shadow: 3px 3px #00ff00;
	padding: 40px;
	text-align: center;  
}
.div2
{
	margin:50px auto;
	width:30%;
	height:100px;
	font-size: 6rem;
	color: #ffff00;
	text-shadow : 2px 2px 5px #f00;
	text-align: center;
}
img
{
	width: 65px;
	height: 60px;
}
.imgbuy
{
	width: 150px;
	height: 130px
}

JAVASCRİPT

• önce radio butondan seçilen value yu alıyoruz
• sonra 1-3 arası bir random bir sayı tutulur ve bu değer Taş Kağıt Makas oyunundaki elemanlardan biri olur 
• if else döngüleri ile kazanan belirlenip alertle gösterilir

Javascript Kodu:

function tikla() {
	const sec=document.querySelector('input[name="oyun"	]:checked').value;
	sayi=Math.random()*3;
	sayi=Math.floor(sayi);
	sayi=sayi+1;
	if (sayi==1) {
		document.getElementById('Asensio').innerHTML='<img src="makas.png" class="imgbuy">';
	}
	if (sayi==2) {
		document.getElementById('Asensio').innerHTML='<img src="kağıt.png" class="imgbuy">';
	}
	if (sayi==3) {
		document.getElementById('Asensio').innerHTML='<img src="taş.png" class="imgbuy">';
	}
	if (sec=="tas" && sayi==1) {
		alert("oyuncu kazandı");
	}
	if (sec=="tas" && sayi==2) {
		alert("oyuncu kaybetti");
	}
	if (sec=="tas" && sayi==3) {
		alert("berabere");
	}
	if (sec=="kagıt" && sayi==1) {
		alert("oyuncu kaybetti");
	}
	if (sec=="kagıt" && sayi==2) {
		alert("berabere");
	}
	if (sec=="kagıt" && sayi==3) {
		alert("oyuncu kazandı");
	}
	if (sec=="makas" && sayi==1) {
		alert("berabere");
	}
	if (sec=="makas" && sayi==2) {
		alert("oyuncu kazandı");
	}
	if (sec=="makas" && sayi==3) {
		alert("oyuncu kaybetti");
	}
}