Geekly articles weekly

[Tutorial] Cara membuat game JavaScript IDLE tambahan pertama Anda

Hari ini saya akan memberi tahu Anda cara membuat ToDo paling sederhana daftar game IDLE inkremental paling sederhana di JavaScript, setelah menghabiskan kurang dari satu hari liburan tahunan. Untuk melakukan ini, saya sarankan memilih permainan burung hantu lebih mudah dan jangan melewati langkah antara oval dan burung hantu yang selesai, proyek kosong dan permainan yang selesai.


Orang yang tahu cara membuat game semacam itu akan bosan; orang yang tahu JS, saya sarankan melihat kode melalui jari Anda (untuk menghindari cedera) dan hanya membaca tentang mekanik. Di bawah potongan, panduan konsisten untuk pemula.

Game inkremental adalah game yang didasarkan pada siklus utama [tanpa akhir], yang terdiri dari akumulasi sumber daya, pengeluaran konstan, dan pendapatan yang dipercepat. Fitur utama mereka adalah pertumbuhan angka yang konstan. Instruksi akan memberi tahu Anda cara membuat game IDLE (malas) di mana sumber daya diisi ulang dengan timer, bukan klik aktif.

Untuk memulainya, buat file teks bernama index.html dan tulis yang berikut ini:
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"><!--    ,     --> <title>     </title> <style> </style> </head> <body>  : 0<br> </body> </html>

Saat ini, belum ada permainan, tetapi hanya ada tulisan statis.

Tautan ke game dalam kondisi saat ini: 0df7a27 .

Semua game dalam genre ini didasarkan pada dua siklus game tak terbatas bersyarat.
Siklus pertama adalah akumulasi sumber daya.
Siklus kedua adalah pemborosan sumber daya.

Mari kita terapkan siklus pertama.

   : <span id="spnCoppersValue">0</span><br> <script> let coppers = 0; let copperGrowth = 1; myTimer = setInterval(endOfTurnCalc, 2000); function endOfTurnCalc() { coppers = coppers+copperGrowth; document.getElementById("spnCoppersValue").innerHTML = coppers; } </script>

Baris pertama

 <span id="spnCoppersValue">0</span><br>

memberi kami kemampuan untuk mengaksesnya dengan id, dan mengubah konten di dalam tag, dalam kasus kami, nilai koin tunai.

Kedua, sebuah skrip muncul.

Kami membuat variabel tembaga, dan mengatur cakupannya dengan kata kunci let. Mirip dengan pengumuman copperGrowth, yang akan bertanggung jawab atas laju pertumbuhan koin tembaga.

Selanjutnya, buat objek di mana kita meletakkan timer kita, yang akan menarik fungsi endOfTurnCalc setiap 2000 ms (2 detik). Fungsi ini menyediakan peningkatan koin tembaga dan pembaruan antarmuka. Hore, setengah permainan selesai: kami memiliki siklus akumulasi sumber daya. Tugas selanjutnya adalah mempelajari cara membelanjakannya.

Tautan ke gim dalam kondisi saat ini: e5d96e1 .

Mari kita tambahkan tombol yang akan memungkinkan kita untuk menghabiskan koin tembaga untuk meningkatkan tambang tembaga, saya sarankan meletakkannya di depan baris kita dengan koin. Tombol, namanya, fungsi yang dipanggil tombol, nama tombol adalah konten di dalam tag.

 <button id="btnUpgCopperMine" onclick="upgCopperMine()">  , 10  </button><br>

Tambahkan kode yang memungkinkan tombol pemutakhiran bekerja:

  let coppersUpgCost = 10; let coppersUpgLevel = 1; function upgCopperMine() { if (coppers>coppersUpgCost){ coppers = coppers-coppersUpgCost; coppersUpgLevel = coppersUpgLevel + 1; coppersUpgCost = coppersUpgCost*2; document.getElementById("spnCoppersValue").innerHTML = coppers; document.getElementById("btnUpgCopperMine").innerHTML = "  , "; document.getElementById("btnUpgCopperMine").innerHTML += coppersUpgCost.toString(); document.getElementById("btnUpgCopperMine").innerHTML += "  "; } }

dan kode yang akan memengaruhi laju pengambilan koin baru:

  function endOfTurnCalc() { coppers = coppers+copperGrowth*coppersUpgLevel;; document.getElementById("spnCoppersValue").innerHTML = coppers; }

Kami menetapkan harga untuk meningkatkan tambang, menentukan tingkat tambang default, dan menulis dalam fungsi cek kecukupan koin untuk peningkatan tambang.

Jika ada cukup uang, maka catat harga upgrade, naikkan level tambang saat ini, hitung harga untuk perbaikan selanjutnya; menampilkan nilai saat ini dari koin tembaga dan biaya peningkatan selanjutnya.

Tautan ke gim dalam kondisi saat ini: c731ec5 .

Nah, Anda sudah bisa bermain - Anda bisa menghemat, dan, lebih menyenangkan, menghabiskan akumulasi. Tetapi kita perlu memperkuat kesuksesan - pemain tidak hanya menghitung kenaikan dalam tingkat akumulasi koin, dengan mengurangi dari nilai baru yang lama, tetapi, dengan cara yang baik, segera melihat tingkat akumulasi koin saat ini. Akan lakukan?

Tambahkan satu baris lagi ke antarmuka:

    : <span id="spnCoppersRate">1</span>  2 <br>

Sekarang antarmuka kita dijelaskan oleh baris-baris berikut:

  <button id="btnUpgCopperMine" onclick="upgCopperMine()" style="width: 240px;">  , 10  </button><br>  : <span id="spnCoppersValue">0</span><br>    : <span id="spnCoppersRate">1</span>  2 <br>

Kami membuat perubahan pada skrip, ke fungsi upgCopperMine ():

  if (coppers>coppersUpgCost){ coppers = coppers-coppersUpgCost; coppersUpgLevel = coppersUpgLevel + 1; coppersUpgCost = coppersUpgCost*2; document.getElementById("spnCoppersValue").innerHTML = coppers; document.getElementById("btnUpgCopperMine").innerHTML = "  , "; document.getElementById("btnUpgCopperMine").innerHTML += coppersUpgCost.toString(); document.getElementById("btnUpgCopperMine").innerHTML += "  "; document.getElementById("spnCoppersRate").innerHTML = copperGrowth*coppersUpgLevel; }

Tautan ke gim dalam kondisi saat ini: 3ac06b6 .

Hebat! Kami memiliki permainan tanpa syarat bersyarat. Sekarang kita perlu berhenti sejenak, dan memikirkannya - beberapa orang menyukainya ketika tidak ada tujuan akhir, dan Anda dapat bermain sampai Anda lelah, bagian lain percaya bahwa kondisi keuletan, jangkauan permainan seharusnya. Kami telah membuat game untuk yang pertama, tetapi apa yang mencegah kami melakukan perubahan kecil sehingga permainan memiliki tujuan dan kondisi kemenangan? Ayo lakukan.

  let win_condition = 50; myTimer = setInterval(endOfTurnCalc, 2000); function endOfTurnCalc() { if (coppers < win_condition) { coppers = coppers+copperGrowth*coppersUpgLevel; document.getElementById("spnCoppersValue").innerHTML = coppers; } else { clearTimeout(myTimer); alert("  !   "+win_condition.toString()); } }

Kami menambahkan variabel di mana kami meletakkan nilai yang kami butuhkan untuk mencapai dan mengubah fungsi dari loop, menambahkan tanda centang untuk mencapai tujuan. Setelah mencapai tujuan, kami menghapus interval dari objek kami dengan timer dan menampilkan pesan pop-up di browser.

Ada poin kecil: beberapa antivirus tidak suka peringatan dan memblokir halaman untuk digunakan.

Tautan ke gim dalam kondisi saat ini: 8fa4041 .

Fungsi berikutnya yang orang harapkan dari sebuah game yang lebih lama dari lima menit adalah kemampuan untuk menyimpan dan memuat game. Mari kita berikan mereka padanya!

Kami menambahkan dua baris ke antarmuka, tidak lupa menambahkan tag umpan baris ke baris sebelumnya:

  <button id="btnSaveGame" onclick="saveGame()" style="width: 240px;"> </button><br> <button id="btnLoadGame" onclick="loadGame()" style="width: 240px;"> </button><br>

dan sekarang kami akan memperluas skrip kami sehingga tombolnya berfungsi:

  function saveGame() { localStorage.setItem('coppers', coppers); localStorage.setItem('coppersUpgCost', coppersUpgCost); localStorage.setItem('coppersUpgLevel', coppersUpgLevel); } function loadGame() { coppers = parseInt(localStorage.getItem('coppers')); coppersUpgCost = parseInt(localStorage.getItem('coppersUpgCost')); coppersUpgLevel = parseInt(localStorage.getItem('coppersUpgLevel')); document.getElementById("spnCoppersValue").innerHTML = coppers; document.getElementById("btnUpgCopperMine").innerHTML = "  , "; document.getElementById("btnUpgCopperMine").innerHTML += coppersUpgCost.toString(); document.getElementById("btnUpgCopperMine").innerHTML += "  "; document.getElementById("spnCoppersRate").innerHTML = copperGrowth*coppersUpgLevel; }

Kami menempatkan semua sumber daya yang bisa berubah-ubah di penyimpanan lokal browser saat menyimpan dan saat membaca kami membacanya kembali dan memperbarui antarmuka.

Tautan ke game dalam kondisi saat ini: 54b1ea0 .

Semuanya, bagian utama gim sudah siap.

Sampai saat ini, kami telah meninjau:

- penciptaan sumber daya;
- ekstraksi sumber daya;
- pemborosan sumber daya pada peningkatan sistem produksinya;
- refleksi kecepatan ekstraksi sumber daya;
- kondisi kemenangan;
- tulis dan baca simpan permainan di penyimpanan lokal browser.

Lanjutkan? Sebelum melanjutkan ke topik berikutnya, yaitu, menambahkan sumber daya kedua ke sistem kami (perak), saya sarankan melakukan refactoring kecil dari kode saat ini.

Apa yang perlu dilakukan sebagai bagian dari refactoring?

Pertama, mari kita buat satu objek game, dan letakkan koin tembaga, tingkat tambang tembaga, dan sebagainya, di dalam sebagai properti dari objek ini. Ini akan sangat membantu di masa depan saat kami memperluas penyimpanan dan memuat ke entitas game baru.

Kedua, kami akan membuat perhitungan dinamika harga peningkatan.

Ketiga, kami menyingkirkan duplikasi kode, yang bertanggung jawab untuk memperbarui antarmuka.

Kode akan mengambil bentuk berikut:

  let game = { coppers: 1, copperGrowth: 1, coppersUpgCost: 10, coppersUpgLevel: 1, } let win_condition = 50; myTimer = setInterval(endOfTurnCalc, 2000); function endOfTurnCalc() { if (game.coppers < win_condition) { game.coppers = game.coppers+game.copperGrowth*game.coppersUpgLevel; document.getElementById("spnCoppersValue").innerHTML = game.coppers; } else { clearTimeout(myTimer); alert("  !   "+win_condition.toString()); } } function upgCopperMine() { if (game.coppers>game.coppersUpgCost){ game.coppers = game.coppers-game.coppersUpgCost; game.coppersUpgLevel = game.coppersUpgLevel + 1; game.coppersUpgCost = game.coppersUpgCost*2; document.getElementById("spnCoppersValue").innerHTML = game.coppers; document.getElementById("btnUpgCopperMine").innerHTML = "  , "; document.getElementById("btnUpgCopperMine").innerHTML += game.coppersUpgCost.toString(); document.getElementById("btnUpgCopperMine").innerHTML += "  "; document.getElementById("spnCoppersRate").innerHTML = game.copperGrowth*game.coppersUpgLevel; } } function saveGame() { localStorage.setItem('coppers', game.coppers); localStorage.setItem('coppersUpgCost', game.coppersUpgCost); localStorage.setItem('coppersUpgLevel', game.coppersUpgLevel); } function loadGame() { game.coppers = parseInt(localStorage.getItem('coppers')); game.coppersUpgCost = parseInt(localStorage.getItem('coppersUpgCost')); game.coppersUpgLevel = parseInt(localStorage.getItem('coppersUpgLevel')); document.getElementById("spnCoppersValue").innerHTML = game.coppers; document.getElementById("btnUpgCopperMine").innerHTML = "  , "; document.getElementById("btnUpgCopperMine").innerHTML += game.coppersUpgCost.toString(); document.getElementById("btnUpgCopperMine").innerHTML += "  "; document.getElementById("spnCoppersRate").innerHTML = game.copperGrowth*game.coppersUpgLevel; } </script>

Cukup jelas bahwa kami menciptakan objek game, dan di dalam objek tersebut kami mendaftarkan properti dan nilai propertinya. Lebih lanjut, di mana pun kami dulu mengakses variabel secara langsung, kami sekarang merujuk ke properti yang sama dari objek game.

Tautan ke gim dalam kondisi saat ini: 8a07f4d .

Sekarang mari kita perbarui sistem simpan dan muat.

  function saveGame() { localStorage.setItem('gameTutorial', JSON.stringify(game)); } function loadGame() { game = JSON.parse(localStorage.getItem('gameTutorial')); document.getElementById("spnCoppersValue").innerHTML = game.coppers; document.getElementById("btnUpgCopperMine").innerHTML = "  , "; document.getElementById("btnUpgCopperMine").innerHTML += game.coppersUpgCost.toString(); document.getElementById("btnUpgCopperMine").innerHTML += "  "; document.getElementById("spnCoppersRate").innerHTML = game.copperGrowth*game.coppersUpgLevel; }

Sekarang, alih-alih menyimpan properti individual, kami menyimpan seluruh objek secara keseluruhan. Tapi hati-hati: jika Anda menambahkan metode ke objek, mereka tidak akan disimpan dengan cara ini, dan penulisan ulang objek dari save akan menghapus semua metode ...

Tautan ke game dalam kondisi saat ini: 8eba059 .

Mari kita hapus properti yang tidak perlu - harga upgrade tambang dan buat fungsi untuk menghitung upgrade dan kami akan menyebutnya di tempat yang diperlukan.

  function coppersUpgCost() { return game.coppersUpgLevel*10; } function upgCopperMine() { if (game.coppers>=coppersUpgCost()){ game.coppers = game.coppers-coppersUpgCost(); game.coppersUpgLevel = game.coppersUpgLevel + 1; document.getElementById("spnCoppersValue").innerHTML = game.coppers; document.getElementById("btnUpgCopperMine").innerHTML = "  , "; document.getElementById("btnUpgCopperMine").innerHTML += coppersUpgCost().toString(); document.getElementById("btnUpgCopperMine").innerHTML += "  "; document.getElementById("spnCoppersRate").innerHTML = game.copperGrowth*game.coppersUpgLevel; } } function saveGame() { localStorage.setItem('gameTutorial', JSON.stringify(game)); } function loadGame() { game = JSON.parse(localStorage.getItem('gameTutorial')); document.getElementById("spnCoppersValue").innerHTML = game.coppers; document.getElementById("btnUpgCopperMine").innerHTML = "  , "; document.getElementById("btnUpgCopperMine").innerHTML += coppersUpgCost().toString(); document.getElementById("btnUpgCopperMine").innerHTML += "  "; document.getElementById("spnCoppersRate").innerHTML = game.copperGrowth*game.coppersUpgLevel; }

Tautan ke game dalam kondisi saat ini: 4007924 .

Akhirnya, kami mengeluarkan bagian berulang dari kode pembaruan antarmuka dalam fungsi terpisah.

  function updateUI() { document.getElementById("spnCoppersValue").innerHTML = game.coppers; document.getElementById("btnUpgCopperMine").innerHTML = "  , "; document.getElementById("btnUpgCopperMine").innerHTML += coppersUpgCost().toString(); document.getElementById("btnUpgCopperMine").innerHTML += "  "; document.getElementById("spnCoppersRate").innerHTML = game.copperGrowth*game.coppersUpgLevel; }

Pada gilirannya, di semua tempat lain di mana kami mengakses objek DOM tertentu, kami sekarang akan memanggil fungsi updateUI ():

  function endOfTurnCalc() { if (game.coppers < win_condition) { game.coppers = game.coppers+game.copperGrowth*game.coppersUpgLevel; updateUI(); } else { clearTimeout(myTimer); alert("  !   "+win_condition.toString()); } } function upgCopperMine() { if (game.coppers>=coppersUpgCost()){ game.coppers = game.coppers-coppersUpgCost(); game.coppersUpgLevel = game.coppersUpgLevel + 1; updateUI(); } } function loadGame() { game = JSON.parse(localStorage.getItem('gameTutorial')); updateUI(); }

Tautan ke game dalam kondisi saat ini: 2245f97 .

Sekarang saya mengusulkan memperkenalkan sumber daya kedua: perak, konstruksi dan peningkatan tambang perak.

  <button id="btnUpgCopperMine" onclick="upgCopperMine()" style="width: 240px;">  , 10  </button><br>  : <span id="spnCoppersValue">0</span><br>    : <span id="spnCoppersRate">1</span>  2 <br> <button id="btnUpgSilverMine" onclick="upgSilverMine()" style="width: 240px;">  , 50  </button><br>  : <span id="spnSilversValue">0</span><br>    : <span id="spnSilversRate">1</span>  2 <br> <button id="btnSaveGame" onclick="saveGame()" style="width: 240px;"> </button><br> <button id="btnLoadGame" onclick="loadGame()" style="width: 240px;"> </button><br> <script> let game = { coppers: 1, copperGrowth: 1, coppersUpgLevel: 1, silvers: 0, silverGrowth: 1, silversUpgLevel: 0, } let win_condition = 50; let silverMineBasePriceCoppers = 100; myTimer = setInterval(endOfTurnCalc, 2000); function endOfTurnCalc() { if (game.silvers < win_condition) { game.coppers = game.coppers+game.copperGrowth*game.coppersUpgLevel; game.silvers = game.silvers+game.silverGrowth*game.silversUpgLevel; updateUI(); } else { clearTimeout(myTimer); alert("  !   "+win_condition.toString()); } } function coppersUpgCost() { return game.coppersUpgLevel*10+5; } function silversUpgCost() { return game.silversUpgLevel*10+5; } function upgCopperMine() { if (game.coppers>=coppersUpgCost()){ game.coppers = game.coppers-coppersUpgCost(); game.coppersUpgLevel = game.coppersUpgLevel + 1; updateUI(); } } function upgSilverMine() { if (game.silversUpgLevel===0){ if (game.coppers>=silverMineBasePriceCoppers){ game.coppers = game.coppers-silverMineBasePriceCoppers; game.silversUpgLevel = 1; updateUI(); } } else { if (game.silvers>=silversUpgCost()){ game.silvers = game.silvers-silversUpgCost(); game.silversUpgLevel = game.silversUpgLevel + 1; updateUI(); } } } function updateUI() { document.getElementById("spnCoppersValue").innerHTML = game.coppers; document.getElementById("btnUpgCopperMine").innerHTML = "  , "; document.getElementById("btnUpgCopperMine").innerHTML += coppersUpgCost().toString(); document.getElementById("btnUpgCopperMine").innerHTML += "  "; document.getElementById("spnCoppersRate").innerHTML = game.copperGrowth*game.coppersUpgLevel; document.getElementById("spnSilversValue").innerHTML = game.silvers; if (game.silversUpgLevel===0) { document.getElementById("btnUpgSilverMine").innerHTML = "  , "; document.getElementById("btnUpgSilverMine").innerHTML += silverMineBasePriceCoppers.toString(); document.getElementById("btnUpgSilverMine").innerHTML += "  "; } else { document.getElementById("btnUpgSilverMine").innerHTML = "  , "; document.getElementById("btnUpgSilverMine").innerHTML += silversUpgCost().toString(); document.getElementById("btnUpgSilverMine").innerHTML += "  "; } document.getElementById("spnSilversRate").innerHTML = game.silverGrowth*game.silversUpgLevel; } function saveGame() { localStorage.setItem('gameTutorial', JSON.stringify(game)); } function loadGame() { game = JSON.parse(localStorage.getItem('gameTutorial')); updateUI(); } </script>

Apa yang dilakukan Bidang untuk menampilkan koin perak, kecepatan ekstraksi mereka, tombol untuk membangun atau meningkatkan tambang perak telah ditambahkan ke antarmuka.

Silvers properti, silverGrowth, silversUpgLevel digandakan di dalam objek game, tetapi yang terakhir diatur ke 0, karena kita tidak memiliki tambang perak secara default.
Menambahkan variabel silverMineBasePriceCoppers, yang akan mencerminkan harga membangun tambang perak dalam koin tembaga (karena kita tidak dapat membayar untuk tambang perak dengan perak, yang belum kita miliki).

Fungsi coppersUpgCost telah dimodifikasi dan diduplikasi sebagai silversUpgCost sehingga harga upgrade tidak nol jika level tambang saat ini adalah 0.
Kami mengubah fungsi penghitungan akhir belokan, menambahkan perhitungan pendapatan dari tambang perak di sana, dan juga mengubah kondisi kemenangan - sekarang kita perlu membandingkan bukan jumlah koin tembaga, tetapi jumlah koin perak.

Kami menciptakan fungsi upgSilverMine, di mana kami mencerminkan logika mendebit dana (jika belum ada tambang, kami menghapus koin tembaga, jika tambang sudah dibangun, maka kami menghapus perak untuk meningkatkan tambang).
Baris yang diperlukan untuk perak ditambahkan ke fungsi updateUI, serta logika output teks dibagi menjadi tombol untuk meningkatkan tambang perak, jadi satu tombol berfungsi baik untuk membangun dan meningkatkan tambang.

Fungsi simpan dan muat tetap tidak berubah.

Tautan ke gim dalam kondisi saat ini: 03eb0eb .

Mungkin terjadi bahwa ada lebih banyak koin tembaga yang terakumulasi dari yang diperlukan, sementara perak masih perlu diperoleh. Untuk ini, dalam permainan seperti itu, sebagai suatu peraturan, ada kemungkinan pertukaran sumber daya yang berbeda satu sama lain.

Mari tambahkan beberapa tombol ke antarmuka:

 <button id="btnUpgCopperMine" onclick="upgCopperMine()" style="width: 240px;">  , 15  </button><br>  : <span id="spnCoppersValue">0</span><br>    : <span id="spnCoppersRate">1</span>  2 <br> <button id="btnBuySilver" onclick="buySilver()" style="width: 240px;"> 1   100 </button><br> <hr> <button id="btnUpgSilverMine" onclick="upgSilverMine()" style="width: 240px;">  , 50  </button><br>  : <span id="spnSilversValue">0</span><br>    : <span id="spnSilversRate">0</span>  2 <br> <button id="btnBuySilver" onclick="buyCoppers()" style="width: 240px;"> 100   1  </button><br> <hr> <button id="btnSaveGame" onclick="saveGame()" style="width: 240px;"> </button><br> <button id="btnLoadGame" onclick="loadGame()" style="width: 240px;"> </button><br>

Dan tambahkan beberapa fungsi ke tombol-tombol ini:

  function buySilver() { if (game.coppers>=100) { game.coppers = game.coppers - 100; game.silvers = game.silvers + 1; updateUI(); } } function buyCoppers() { if (game.silvers>=1) { game.coppers = game.coppers + 100; game.silvers = game.silvers - 1; updateUI(); } }

Tautan ke gim dalam kondisi saat ini: 92219b2 .

Jadi apa lagi yang bisa ditambahkan ke game incremental? Gear Prestige! Tentu saja, sekarang ini lebih dari sekadar kelebihan, tetapi jika permainan berkembang lebih lanjut, itu akan berguna bagi Anda. Pemain menyukainya!

Dalam permainan yang berbeda, itu dilakukan secara berbeda, tetapi secara umum - mekanisme memberikan poin Prestige baik setelah berhasil menyelesaikan (melewati) permainan, atau membuka kunci selama pertandingan setelah mencapai ambang target tertentu.

Dengan bantuan poin Prestige, pemain mendapat kesempatan untuk dengan cepat memulai atau bonus permanen dalam permainan yang sama (ada kemungkinan bahwa dalam misi berikutnya, jika permainan dibagi menjadi beberapa), sehingga ia dapat mencoba beberapa taktik lain, tetapi menghabiskan lebih sedikit waktu untuk melintas kembali . Dengan demikian, dimungkinkan untuk mempelajari beberapa percabangan, setelah menguji solusi yang berbeda, dan menghabiskan lebih sedikit waktu untuk ini daripada jika tidak ada mekanisme seperti itu.

Apa yang kita butuhkan untuk ini? Perlu mekanisme restart game dengan nilai default. Sebagai bonus permanen, kami akan menambahkan poin Prestige ke properti CopperGrowth dan silverGrowth yang sebelumnya tidak berubah.

Tambahkan fungsi-fungsi berikut winGame, restartGameDialog, restartGame, dan juga ubah endOfTurnCalc untuk memanggil fungsi baru dan perbarui pembaruanUI:

  function endOfTurnCalc() { if (game.silvers < win_condition) { game.coppers = game.coppers+game.copperGrowth*game.coppersUpgLevel; game.silvers = game.silvers+game.silverGrowth*game.silversUpgLevel; updateUI(); } else { winGame(); } } function winGame() { clearTimeout(myTimer); alert("  !   "+win_condition.toString()); myRestartTimer = setInterval(restartGameDialog, 2000); } function restartGameDialog() { if (confirm('      ?')) { restartGame(); } else { clearTimeout(myRestartTimer); } } function restartGame() { game.coppers = 1; game.copperGrowth = game.copperGrowth+1; game.coppersUpgLevel = 1; game.silvers = 0; game.silverGrowth = game.silverGrowth+1; game.silversUpgLevel = 0; clearTimeout(myRestartTimer); myTimer = setInterval(endOfTurnCalc, 2000); updateUI(); } function updateUI() { ... if (game.copperGrowth!==1) { document.getElementById("divLblPrestige").innerHTML = "     "+game.copperGrowth.toString(); document.getElementById("divLblPrestige").style.display = "block"; } else { document.getElementById("divLblPrestige").style.display = "none"; } }

Fungsi winGame memulai timer, setelah itu dialog konfirmasi dipanggil. Dalam kasus konfirmasi, fungsi restart disebut, yang me-reset semua nilai ke default, tetapi meningkatkan properti dari pertumbuhan dasar koin.

Secara umum, game sudah siap:

- penciptaan sumber daya;
- ekstraksi sumber daya;
- pemborosan sumber daya pada peningkatan sistem produksinya;
- refleksi kecepatan ekstraksi sumber daya;
- kondisi kemenangan;
- menulis dan membaca save game di penyimpanan lokal browser;
- menambah satu sumber daya lagi dengan produksi dan peningkatan produksinya;
- pertukaran sumber daya;
- Mekanisme restart game dan mekanisme Prestige.

Tautan ke gim dalam kondisi saat ini: 92219b2 .

Akhirnya, hal terakhir dalam artikel ini yang ingin saya tunjukkan adalah mekanisme penyimpanan yang berbeda, karena mekanisme saat ini memiliki satu, tetapi masalah yang signifikan.

Bayangkan Anda sedang mengembangkan game, menerbitkannya di server web (mungkin di halaman github), dan orang-orang memainkannya. Seiring waktu, Anda membuat perubahan pada game yang menambahkan properti baru ke objek game game.

Sekarang perhatikan tanganmu.

Pemain masuk dengan save lama, yang memiliki semua properti tembaga dan perak, tetapi tidak, katakanlah, properti emas. Objek game kami dimuat dan menimpa yang dibuat saat halaman web dimuat, dan sekarang di dalam objek hanya ada properti yang disimpan. Dan kami telah memperbarui kodenya! Dan kode ini mengacu pada properti yang diperbarui yang tidak ada di sana. Dengan demikian, kode mulai menerima beberapa kesalahan, hingga ketidakmampuan permainan yang lengkap. Anehnya, untuk memperbaiki masalah ini, Anda hanya perlu menulis ulang dua baris dalam fungsi unduhan game:

  function loadGame() { gameTemp = JSON.parse(localStorage.getItem('gameTutorial')); for (var propertyName in gameTemp) { game[propertyName] = gameTemp[propertyName]; } updateUI(); }

Sekarang, jika Anda menambahkan dalam game = {gold: 1,} dan boot dari save lama Anda di mana belum ada emas, maka emas akan tetap berada di objek dan logika permainan tidak akan pecah di mana pun.
Tautan ke game dalam kondisi saat ini: 83c258d .

Satu hal lagi. Mentransfer menyimpan di antara browser, mari kita simpan juga.

  <hr> <button id="btnSaveGame" onclick="saveGame()" style="width: 240px;"> </button><br> <br> <button id="btnExportGame" onclick="exportGame()" style="width: 240px;"> </button><br> <div id="divLblExport" style="display: none"></div> <br> <hr> <button id="btnLoadGame" onclick="loadGame()" style="width: 240px;"> </button><br> <br> <button id="btnImportGame" onclick="importGame()" style="width: 240px;"> </button><br>

Perbarui antarmuka.

  let countdown = 30; let showExport = 0; function updateUI() { ... if (showExport===1){ document.getElementById("divLblExport").style.display = "block"; } else { document.getElementById("divLblExport").style.display = "none"; } } function exportGame() { exportTimer = setInterval(exportCountdown, 1000); document.getElementById("divLblExport").innerHTML = btoa(JSON.stringify(game)); showExport = 1; updateUI(); } function exportCountdown() { if (countdown > 0) { countdown = countdown - 1; } else { clearTimeout(exportTimer); countdown = 30; showExport = 0; updateUI(); } } function importGame() { let importString = prompt('   '); gameTemp = JSON.parse(atob(importString)); for (var propertyName in gameTemp) { game[propertyName] = gameTemp[propertyName]; } updateUI(); }

Kami menambahkan dua variabel utilitas, pembaruanUI (), menulis tiga fungsi - ekspor, impor, dan fungsi yang mengubah bendera tampilan ekspor, sehingga ekspor "lama" akan disembunyikan 30 detik setelah pembentukannya.

Itu saja untuk hari ini.

Source: https://habr.com/ru/post/id465829/

More articles:


All Articles