Javascript İle Adam Asmaca Oyunu
javascript ile adam asmaca oyunu yapamya çalışacağız sizler ekleme yaparak geliştirebilirsiniz sadece teoriyi anlamanız için ufacık bir örnek
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Adam Asmaca </title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
/* css lerimizi oluşturuyoruz.*/
* {box-sizing: border-box;}
body {font-family: sans-serif;}
.harfbul {display: inline-block;list-style: none;width: 20px;margin: 0 5px;border-bottom: 1px solid black;text-align: center;color: white;}
.gecerli-kelime {list-style: none;}
.cikti {opacity: 0;transition: opacity 1s ease;}
.correct {background-color: green; transition: all 1s ease;}
.error {color: red;opacity: 1;}
.warning {color: orange;opacity: 1;}
.basari {color: green;opacity: 1;}
</style>
</head>
<body>
<h1 >Adam Asmaca </h1>
<ul id="harfbuls"></ul>
<form id="adamasmaca">
<input type="text" maxlength="1" minlength="1" name="harfbul" id="harfbul" placeholder="Bir Harf Tahmin et" />
<input id="tahmn" name="tahmn" type="submit" value="Gönder" />
<button id="yenidenbasla" name="yenidenbasla" type="button">Yeniden Başla</button>
</form>
<p id="cikti" class="cikti"></p>
<p id="adam"></p>
<p id="hataliharfler"></p>
<script>
// sıra geldi nasıl çalışacağımıza
(function () {
"use strict";
var hataliharfler, harfler, kelimeler, inputtahmin, tahmn, inputbuton, tahminler, eslesenler, cikti, adam, harfbuls, yasam, KelimeSimdi, numeslesenler, mesajlar;
function yukle() {
harfler = "abcdefghijklmnopqrstuvwxyz";
yasam = 5;
kelimeler = [
"dunya",
"gezegen", "jupiter",
"uzay","mars","insan"
];
mesajlar = {
basari: 'Başardınız.',
basarisiz: 'Kaybettiniz',
tahmin: ' Zaten Tahmin Etiniz Tekrar Deneyiniz.',
uyari: 'Lütfen sadece harf olarak giriniz.'
};
tahminler = eslesenler = '';
numeslesenler = 0;
KelimeSimdi = kelimeler[Math.floor(Math.random() * kelimeler.length)];
cikti = document.getElementById("cikti");
adam = document.getElementById("adam");
hataliharfler = document.getElementById("hataliharfler");
inputtahmin = document.getElementById("harfbul");
adam.innerHTML = yasam + ' Harf hakkınız kaldı';
cikti.innerHTML = '';
document.getElementById("harfbul").value = '';
inputbuton = document.getElementById("tahmn");
inputtahmin.style.display = 'inline';
inputbuton.style.display = 'inline';
harfbuls = document.getElementById("harfbuls");
harfbuls.innerHTML = '<li class="gecerli-kelime">Kelime:</li>';
var harfbul, i;
for (i = 0; i < KelimeSimdi.length; i++) {
harfbul = '<li class="harfbul harfbul' + KelimeSimdi.charAt(i).toUpperCase() + '">' + KelimeSimdi.charAt(i).toUpperCase() + '</li>';
harfbuls.insertAdjacentHTML('beforeend', harfbul);
}
}
if (basari) {
cikti.innerHTML = messages.basari;
cikti.classList.add('basari');
} else {
cikti.innerHTML = messages.basarisiz;
cikti.classList.add('error');
}
inputtahmin.style.display = inputbuton.style.display = 'none';
inputtahmin.value = '';
}
window.onload = yukle();
document.getElementById("yenidenbasla").onclick = yukle;
inputtahmin.onclick = function () {
this.value = '';
};
document.getElementById('adamasmaca').onsubmit = function (e) {
if (e.preventDefault) e.preventDefault();
cikti.innerHTML = '';
cikti.classList.remove('error', 'warning');
tahmn = inputtahmin.value;
if (tahmn) {
if (harfler.indexOf(tahmn) > -1) {
if ((eslesenler && eslesenler.indexOf(tahmn) > -1) || (tahminler && tahminler.indexOf(tahmn) > -1)) {
cikti.innerHTML = '"' + tahmn.toUpperCase() + '"' + mesajlar.tahmin;
cikti.classList.add("warning");
}
else if (KelimeSimdi.indexOf(tahmn) > -1) {
var harfbulsToShow;
harfbulsToShow = document.querySelectorAll(".harfbul" + tahmn.toUpperCase());
for (var i = 0; i < harfbulsToShow.length; i++) {
harfbulsToShow[i].classList.add("correct");
}
for (var j = 0; j < KelimeSimdi.length; j++) {
if (KelimeSimdi.charAt(j) === tahmn) {
numeslesenler += 1;
}
}
eslesenler += tahmn;
if (numeslesenler === KelimeSimdi.length) {
finito(true);
}
}
else {
var captureharfbul;
captureharfbul=eslesenler<=tahmn;
if(captureharfbul){
hataliharfler.innerHTML=tahmn;
hataliharfler.classList.add("hataliharfler");
}
tahminler += tahmn;
yasam--;
adam.innerHTML = yasam + ' Harf hakkınız kaldı.';
if (yasam === 0) finito();
}
}
else {
cikti.classList.add('error');
cikti.innerHTML = mesajlar.uyari;
}
}
else {
cikti.classList.add('error');
cikti.innerHTML = mesajlar.uyari;
}
return false;
};
}());
</script>
</body>
</html>
yasam içerisinde kaç rakamı girerseniz o kadar harf deneme fırsatınız olacaktır.
kelimeler havuzunu sizde istediğiniz giibi arttırabilirisniz.
iyi eğlenceler.
