Benzer kodları bir function ile çalıştırma

William Crusader · 10 Mart 2022

Javascript ile basit bir clicker oyunu yaptım. Ve oyuna "ekstra tıklama" denen bir şey ekledim. Fakat 5 tane buton için ayrı ayrı kod yazmaktansa hepsini bir function() içine sığdırmayı istiyorum, daha optimize olması için. Bunu nasıl yapabilirim?

Gerekli kodlar:

JS:
[CODE lang="javascript" title="JavaScript"]let clickCount = 0;
// tıklama sayısını kontrol eder
let clickBoost = 0;
// ekstra tıklamaları kontrol eder

document.getElementById("clickButton").onclick = function(){
clickCount += 1;
document.getElementById("clickCounter").innerHTML = clickCount;
if (clickBoost >= 1){
clickCount = clickCount + clickBoost;
}
}
// "Click" tuşunun kodları

document.getElementById("boostButton1").onclick = function(){
if (clickCount > 100){
let yorn = prompt("Do you wanna buy 1 click boost?" + "\n" + "\n " + "(Y/N)")
if (yorn == "y" || yorn == "Y"){
clickBoost = clickBoost += 1;
alert("Bought Succesfully!")
clickCount = clickCount -= 100
}
else {
alert("You didn't bought extra clicks.")
}
}
else{
alert("You don't have enough clicks!")
}
}
// "Buy 1 Click Boost" tuşunun kodları

document.getElementById("boostButton10").onclick = function () {
if (clickCount > 1000) {
let yorn = prompt("Do you wanna buy 10 click boost?" + "\n" + "\n " + "(Y/N)")
if (yorn == "y" || yorn == "Y") {
clickBoost = clickBoost += 10;
alert("Bought Succesfully!")
clickCount = clickCount -= 1000
} else {
alert("You didn't bought extra clicks.")
}
}
else {
alert("You don't have enough clicks!")
}
}
// "Buy 10 Click Boost" tuşunun kodları

document.getElementById("boostButton100").onclick = function () {
if (clickCount > 10000) {
let yorn = prompt("Do you wanna buy 100 click boost?" + "\n" + "\n " + "(Y/N)")
if (yorn == "y" || yorn == "Y") {
clickBoost = clickBoost += 100;
alert("Bought Succesfully!")
clickCount = clickCount -= 10000
} else {
alert("You didn't bought extra clicks.")
}
}
else {
alert("You don't have enough clicks!")
}
}
// "Buy 100 Click Boost" tuşunun kodları

document.getElementById("boostButton1000").onclick = function () {
if (clickCount > 100000) {
let yorn = prompt("Do you wanna buy 1000 click boost?" + "\n" + "\n " + "(Y/N)")
if (yorn == "y" || yorn == "Y") {
clickBoost = clickBoost += 1000;
alert("Bought Succesfully!")
clickCount = clickCount -= 100000
} else {
alert("You didn't bought extra clicks.")
}
}
else {
alert("You don't have enough clicks!")
}
}
// "Buy 1000 Click Boost" tuşunun kodları

document.getElementById("boostButton10000").onclick = function () {
if (clickCount > 1000000) {
let yorn = prompt("Do you wanna buy 10000 click boost?" + "\n" + "\n " + "(Y/N)")
if (yorn == "y" || yorn == "Y") {
clickBoost = clickBoost += 10000;
alert("Bought Succesfully!")
clickCount = clickCount -= 1000000
} else {
alert("You didn't bought extra clicks.")
}
}
else {
alert("You don't have enough clicks!")
}
}
// "Buy 10000 Click Boost" tuşunun kodları[/CODE]
HTML:

HTML:

<!DOCTYPE html>
<html lang="en">
<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>oyun.. heralde</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <label id= "clickCounter">0</label><br>
    
    <center><button id= "clickButton">Click</button></center>

    <center><button id="boostButton1">Buy 1 Click Boost</button></center>

    <center><button id="boostButton10">Buy 10 Click Boost</button></center>

    <center><button id="boostButton100">Buy 100 Click Boost</button></center>

    <center><button id="boostButton1000">Buy 1000 Click Boost</button></center>

    <center><button id="boostButton10000">Buy 10000 Click Boost</button></center>

    <script src="index.js"></script>

    <
</body>
</html>

#clickCounter{
display: block;
text-align: center;
font-size: 150px;
}
#clickButton{
display: flex;
text-align: center;
font-size: 50px;
}
#boostButton1{
display: blox;
text-align: center;
font-size: 50px;
}
#boostButton10{
display: blox;
text-align: center;
font-size: 50px;
}
#boostButton100{
display: blox;
text-align: center;
font-size: 50px;
}
#boostButton1000{
display: blox;
text-align: center;
font-size: 50px;
}
#boostButton10000{
display: blox;
text-align: center;
font-size: 50px;
}
Not: Son kod CSS.

devdeveloper · 10 Mart 2022

En basit haliyle aşağıdaki kod işinizi görecektir:

JavaScript:

function boostClick(clickCountLimit, addedClickBoost, decreaseClickCOunt){
    if (clickCount > clickCountLimit){
        let yorn = prompt("Do you wanna buy "+addedClickBoost+" click boost?" + "\n" + "\n " + "(Y/N)")
        if (yorn == "y" || yorn == "Y"){
            clickBoost = clickBoost += addedClickBoost;
            alert("Bought Succesfully!")
            clickCount = clickCount -= decreaseClickCOunt;
        }
        else {
            alert("You didn't bought extra clicks.")
        }
    }
    else{
        alert("You don't have enough clicks!")
    }
}

Gerekli parametreleri de vererek ilgili button'ların click olayına bu fonksiyonu atamalısınız.

William Crusader · 10 Mart 2022

devdeveloper dedi:

En basit haliyle aşağıdaki kod işinizi görecektir:

JavaScript:

function boostClick(clickCountLimit, addedClickBoost, decreaseClickCOunt){
    if (clickCount > clickCountLimit){
        let yorn = prompt("Do you wanna buy "+addedClickBoost+" click boost?" + "\n" + "\n " + "(Y/N)")
        if (yorn == "y" || yorn == "Y"){
            clickBoost = clickBoost += addedClickBoost;
            alert("Bought Succesfully!")
            clickCount = clickCount -= decreaseClickCOunt;
        }
        else {
            alert("You didn't bought extra clicks.")
        }
    }
    else{
        alert("You don't have enough clicks!")
    }
}

Gerekli parametreleri de vererek ilgili button'ların click olayına bu fonksiyonu atamalısınız.

Kod için teşekkürler fakat atamayı nasıl yapacağım?

devdeveloper · 10 Mart 2022

Call Me Cook Me dedi:
Kod için teşekkürler fakat atamayı nasıl yapacağım?

Üzerine düşünülse daha iyi optimizasyon yapılabilir. Fakat şu şekilde yapabilirsiniz:

JavaScript:

document.getElementById("boostButton1").addEventListener("click", function() {
    boostClick(100, 1, 100); // Burada verdiğim parametreleri yazmış olduğunuz clickBoost'lara göre kendiniz değiştirebilirsiniz.
}, false);
document.getElementById("boostButton10").addEventListener("click", function() {
    boostClick(1000, 10, 1000); // Burada verdiğim parametreleri yazmış olduğunuz clickBoost'lara göre kendiniz değiştirebilirsiniz.
}, false);
document.getElementById("boostButton100").addEventListener("click", function() {
    boostClick(10000, 100, 10000); // Burada verdiğim parametreleri yazmış olduğunuz clickBoost'lara göre kendiniz değiştirebilirsiniz.
}, false);
document.getElementById("boostButton1000").addEventListener("click", function() {
    boostClick(10000, 1000, 10000); // Burada verdiğim parametreleri yazmış olduğunuz clickBoost'lara göre kendiniz değiştirebilirsiniz.
}, false);
document.getElementById("boostButton10000").addEventListener("click", function() {
    boostClick(100000, 10000, 100000); // Burada verdiğim parametreleri yazmış olduğunuz clickBoost'lara göre kendiniz değiştirebilirsiniz.
}, false);

Eğer sorununuz çözüldüyse çözüldü olarak işaretleyebilirsiniz.

William Crusader · 10 Mart 2022

devdeveloper dedi:

Üzerine düşünülse daha iyi optimizasyon yapılabilir. Fakat şu şekilde yapabilirsiniz:

JavaScript:

document.getElementById("boostButton1").addEventListener("click", function() {
    boostClick(100, 1, 100); // Burada verdiğim parametreleri yazmış olduğunuz clickBoost'lara göre kendiniz değiştirebilirsiniz.
}, false);
document.getElementById("boostButton10").addEventListener("click", function() {
    boostClick(1000, 10, 1000); // Burada verdiğim parametreleri yazmış olduğunuz clickBoost'lara göre kendiniz değiştirebilirsiniz.
}, false);
document.getElementById("boostButton100").addEventListener("click", function() {
    boostClick(10000, 100, 10000); // Burada verdiğim parametreleri yazmış olduğunuz clickBoost'lara göre kendiniz değiştirebilirsiniz.
}, false);
document.getElementById("boostButton1000").addEventListener("click", function() {
    boostClick(10000, 1000, 10000); // Burada verdiğim parametreleri yazmış olduğunuz clickBoost'lara göre kendiniz değiştirebilirsiniz.
}, false);
document.getElementById("boostButton10000").addEventListener("click", function() {
    boostClick(100000, 10000, 100000); // Burada verdiğim parametreleri yazmış olduğunuz clickBoost'lara göre kendiniz değiştirebilirsiniz.
}, false);

Eğer sorununuz çözüldüyse çözüldü olarak işaretleyebilirsiniz.

Kod çalışıyor, teşekkür ederim.

Mesajınızı raporladım, birazdan çözüm olarak seçilir.

devdeveloper · 10 Mart 2022

Call Me Cook Me dedi:
Kod çalışıyor, teşekkür ederim.

Mesajınızı raporladım, birazdan çözüm olarak seçilir.

Rica ederim. İyi çalışmalar.

The User 0 · 10 Mart 2022

Call Me Cook Me dedi:
Javascript ile basit bir clicker oyunu yaptım. Ve oyuna "ekstra tıklama" denen bir şey ekledim. Fakat 5 tane buton için ayrı ayrı kod yazmaktansa hepsini bir function() içine sığdırmayı istiyorum, daha optimize olması için. Bunu nasıl yapabilirim?

Kod: Tıklama Oyunu
Bende Technopat web tabanlı dillerde kod paylaşırken hata veriyor. O yüzden secret gist olarak paylaştım. Kodunuzda birden fazla değişiklik yaptım. Yaptıklarım şunlar:

Butonlar için ortak CSS kullanma
Butonlar için tek Javascript kodu kullanma
Javascript kodunda prompt yerine confirm kullanma
<center> etiketi yerine body'e ortalama CSS'i ekleme
margin ile butonların arasına boşluk koyma
Elementlerin id'lerini kısatlma

boost() fonksiyonunun parantezine ilk yapmak istediğiniz takviye miktarı, sonra gerenek miktarı yazmanız lazım. Örnek boost(1,100); Bir tane boost için 100 tane tıklama lazım.

Umarım istediğiniz gibi olmuştur.

Benzer kodları bir function ile çalıştırma

William Crusader

Hectopat

devdeveloper

Picopat

William Crusader

Hectopat

devdeveloper

Picopat

William Crusader

Hectopat

devdeveloper

Picopat

The User 0

Kilopat