Membuat Game Pengenalan Pola dengan Skor

Jika pada artikel sebelumnya di sajikan cara membuat game pengenalan pola dalam berpikir komputasional, maka dalam artikel ini dikembangkan fitur tambahan yaitu penambahan skor permainan.

Bagaimana alur pengembangannya ?

Untuk menampilkan skor game setelah berakhir, maka aplikasi game berpikir komputasional sebelumnya  dimodifikasi, dan ditambahkan algoritma sebagai berikut :

  • Pengulangan 10 kali, setiap kali pemain menjawab, pola baru akan otomatis diacak hingga pemain menjawab 10 kali.

  • Perhitungan Skor, setiap jawaban yang benar atau salah akan dicatat. Setelah 10 putaran, total skor benar dan salah ditampilkan.

  • Penghitung Waktu, waktu yang dihabiskan oleh pemain untuk menyelesaikan 10 pertanyaan akan ditampilkan di akhir permainan.

Menyusun kode sumber (source code)

Berdasarkan slgoritma yang telah disusun sebelumnya maka disusun kode HTML, Javascript dan CSS seperti berikut ini. Silahkan di salin ke notepad / notepad++ dan disimpan dalam format HTML.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Game Mengenal Pola Dinamis</title>
  7. <style>
  8. body {
  9. font-family: Arial, sans-serif;
  10. text-align: center;
  11. background-color: #f0f0f0;
  12. margin: 0;
  13. padding: 0;
  14. }
  15. h4 {
  16. color: blue;
  17. }
  18. .pattern {
  19. font-size: 24px;
  20. margin-bottom: 20px;
  21. }
  22. input[type="text"] {
  23. padding: 10px;
  24. font-size: 18px;
  25. margin: 10px;
  26. width:300px;
  27. }
  28. button {
  29. padding: 10px 20px;
  30. font-size: 18px;
  31. background-color: #28a745;
  32. color: white;
  33. border: none;
  34. cursor: pointer;
  35. }
  36. button:hover {
  37. background-color: #218838;
  38. }
  39. .result, .score, .progress {
  40. font-size: 18px;
  41. margin-top: 20px;
  42. }
  43. footer{
  44. align:center;
  45. text-align:center;
  46. font-size:11px;
  47. color:grey;
  48. }
  49. </style>
  50. </head>
  51. <body>
  52. <center>
  53. <h5><font color=blue>Game Mengenal Pola Dinamis</font></h5>
  54. <p class="pattern" id="pattern"></p>
  56. <p>Petunjuk :<br/></p>
  58. Masukkan dua angka berikutnya dalam pola di bawah ini (pisahkan dengan koma)<br>
  59. Anda perlu bermain hingga 10 kali untuk melihat skor akhir
  61. <input type="text" id="answer" placeholder="Jawaban Anda">
  62. <button onclick="checkAnswer()">Submit</button>
  64. <p class="result" id="result"></p>
  65. <p class="progress" id="progress"></p>
  66. <p class="score" id="score"></p>
  68. <script>
  69. // Inisialisasi variabel untuk pola
  70. var startNumber, sequence, steps, correctAnswer1, correctAnswer2;
  71. var correctCount = 0; // Hitung jawaban benar
  72. var wrongCount = 0; // Hitung jawaban salah
  73. var totalQuestions = 10; // Total pertanyaan yang akan dijawab
  74. var currentQuestion = 0; // Pertanyaan saat ini
  75. var startTime, endTime; // Variabel untuk menghitung waktu
  77. // Fungsi untuk membuat pola baru
  78. function generatePattern() {
  79. // Jika sudah 10 kali menjawab, tampilkan skor akhir
  80. if (currentQuestion >= totalQuestions) {
  81. endTime = new Date(); // Waktu selesai
  82. var timeSpent = Math.floor((endTime - startTime) / 1000); // Hitung waktu dalam detik
  83. document.getElementById('score').innerHTML =
  84. "Game selesai!<br>" +
  85. "Jawaban benar: " + correctCount + "<br>" +
  86. "Jawaban salah: " + wrongCount + "<br>" +
  87. "Waktu yang dibutuhkan: " + timeSpent + " detik.";
  88. document.getElementById('result').innerHTML = ""; // Kosongkan hasil saat ini
  89. document.getElementById('pattern').innerHTML = ""; // Kosongkan pola saat ini
  90. document.getElementById('progress').innerHTML = ""; // Kosongkan progres
  91. return;
  92. }
  94. // Pilih angka awal secara acak antara 1 dan 20
  95. startNumber = Math.floor(Math.random() * 20) + 1;
  97. // Inisialisasi langkah perubahan dinamis (misalnya, +2, +3, +4, +5)
  98. steps = [2, 3, 4, 5]; // Langkah bertambah secara dinamis
  100. // Buat deret angka dengan panjang 4 angka, menggunakan langkah yang berbeda-beda
  101. sequence = [startNumber];
  102. for (var i = 0; i < 3; i++) {
  103. var nextNumber = sequence[i] + steps[i];
  104. sequence.push(nextNumber);
  105. }
  107. // Tentukan dua jawaban yang benar (dua angka berikutnya dalam pola)
  108. correctAnswer1 = sequence[3] + steps[3]; // Angka ke-5
  109. correctAnswer2 = correctAnswer1 + (steps[steps.length - 1] + 1); // Angka ke-6, langkahnya bertambah satu lagi
  111. // Tampilkan pola kepada pemain
  112. document.getElementById('pattern').innerHTML = sequence.join(', ') + ', ?, ?';
  113. currentQuestion++; // Naikkan jumlah pertanyaan
  115. // Tampilkan progres berapa kali sudah dijawab dan berapa kali lagi tersisa
  116. document.getElementById('progress').innerHTML =
  117. "Anda telah menjawab " + currentQuestion + " kali, tersisa " + (totalQuestions - currentQuestion) + " kali lagi.";
  118. }
  120. // Fungsi untuk memeriksa jawaban pemain
  121. function checkAnswer() {
  122. var answer = document.getElementById('answer').value;
  123. var result = document.getElementById('result');
  125. // Pisahkan dua jawaban yang dimasukkan pemain
  126. var answers = answer.split(',').map(function(item) {
  127. return parseInt(item.trim());
  128. });
  130. // Cek apakah kedua jawaban benar
  131. if (answers.length === 2 && answers[0] === correctAnswer1 && answers[1] === correctAnswer2) {
  132. result.innerHTML = "Benar!";
  133. result.style.color = "green";
  134. correctCount++; // Tambah hitungan benar
  135. } else {
  136. result.innerHTML = "Salah! Jawaban yang benar adalah " + correctAnswer1 + " dan " + correctAnswer2 + ".";
  137. result.style.color = "red";
  138. wrongCount++; // Tambah hitungan salah
  139. }
  141. document.getElementById('answer').value = ""; // Kosongkan input jawaban
  142. generatePattern(); // Panggil untuk pertanyaan berikutnya
  143. }
  145. // Fungsi untuk memulai permainan dan mengatur ulang semua variabel
  146. function startGame() {
  147. correctCount = 0; // Reset hitungan benar
  148. wrongCount = 0; // Reset hitungan salah
  149. currentQuestion = 0; // Reset pertanyaan
  150. startTime = new Date(); // Waktu mulai
  151. document.getElementById('score').innerHTML = ""; // Reset tampilan skor
  152. document.getElementById('result').innerHTML = ""; // Kosongkan hasil saat ini
  153. document.getElementById('progress').innerHTML = ""; // Kosongkan progres
  154. generatePattern(); // Buat pola pertama
  155. }
  157. // Panggil fungsi startGame saat halaman dimuat
  158. window.onload = startGame;
  159. </script>
  160. <!--mohon tidak menghapus footer tanpa seizin pembuatnya-->
  161. <footer><a href="https://youtube.com/@tutorial-Ku">Copyright @ Pakkar 2024</a></footer>
  162. </center>
  163. </body>
  164. </html>

Tampilan Game Berpikir Komputasional dengan Fitur Skor

Jika kode tersebut telah disalin dengan benar, maka akan mendapatkan tampilan seperti berikut ini.

Game Mengenal Pola Dinamis
Game Mengenal Pola Dinamis

Petunjuk :

Masukkan dua angka berikutnya dalam pola di bawah ini (pisahkan dengan koma)
Anda perlu bermain hingga 10 kali untuk melihat skor akhir

Selamat mencoba, semoga berhasil dan pada akhirnya dapat membantu peserta didik memahami konsep berfikir komputasional.

Kembali

satu Respon

  1. Terima kasih untuk game yang menyenangkan dan sangat menginspirasi untuk pembelajaran berpikir komputasional