Membuat Game Mengenal Pola

Game dalam Pembelajaran

Game adalah salah satu media belajar yang menyenangkan bagi peserta didik. Sebagaimana artikel sebelumnya tentang membuat tes interaktif dengan HTML, CSS dan Javascript,  dalam artikel ini akan ditunjukkan bagaimana membuat game dengan bahasa pemrograman sederhana HTML, CSS, dan Javascript.

Game ini sangat cocok sebagai media pembelajaran pengenalan pola yang merupakan bagian pilar dari berpikir komputasional. Bagaimana cara membuatnya ?.

Langkah-langkah membuat game pengenalan pola dalam berpikir komputasional

  1. Menentukan konsep game. Game ini akan menampilkan urutan angka secara acak dengan membentuk pola tertentu. Kemudian pemain diminta meneruskan mengisi dua urutan angka berikutnya sesuai pola pada kotak isian. Jika benar, maka muncul notifikasi benar, dan jika salah muncul notifikasi kesalahan. Jika jawaban benar maka pemain dapat menekan tombol ulangi. Begitu seterusnya sampai pemain benar-benar ,mengenal pola.
  2. Menyusun program, program disusun dengan bahasa HTML, Javascript, dan CSS sesuai dengan konsep game yang telah ditentukan dan menyimpannya dalam ekstensi HTML. 

Kode sumber (source Code)

Bagi yang tidak memiliki waktu untuk menyusun aplikasi, silahkan copy paste kode berikut pada notepad dan disimpan dengan ekstensi HTML, misalnya ,”Game pengenalan pola.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: Pengenalan 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: #054206;
  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. }
  27. button {
  28. padding: 10px 20px;
  29. font-size: 18px;
  30. background-color: #28a745;
  31. color: white;
  32. border: none;
  33. cursor: pointer;
  34. margin-right: 10px;
  35. }
  36. button:hover {
  37. background-color: #218838;
  38. }
  39. .refresh-button {
  40. background-color: #007bff;
  41. }
  42. .refresh-button:hover {
  43. background-color: #0056b3;
  44. }
  45. .result {
  46. font-size: 18px;
  47. margin-top: 20px;
  48. }
  49. </style>
  50. </head>
  51. <body>
  52. <center>
  53. <table border=1 cellspacing=0 cellpadding=10px><tr style="text-align:center;"><td>
  54. <h1><font color=blue>Pengenalan Pola Dinamis</font></h1>
  55. Perhatikan deretan angka berikut !
  56. <p class="pattern" id="pattern"></p>
  57. <p>Masukkan dua angka berikutnya dalam pola di bawah ini (pisahkan dengan koma):</p>
  58. <input type="text" id="answer" placeholder="Jawaban Anda">
  59. <button onclick="checkAnswer()">Kirim</button>
  60. <button class="refresh-button" onclick="refreshPage()">Ulangi</button>
  61. <p class="result" id="result"></p>
  62. <script>
  63. // Inisialisasi variabel untuk pola
  64. var startNumber, sequence, steps, correctAnswer1, correctAnswer2;
  66. // Fungsi untuk membuat pola baru
  67. function generatePattern() {
  68. // Pilih angka awal secara acak antara 1 dan 20
  69. startNumber = Math.floor(Math.random() * 20) + 1;
  71. // Inisialisasi langkah perubahan dinamis (misalnya, +2, +3, +4, +5)
  72. steps = [2, 3, 4, 5]; // Langkah bertambah secara dinamis
  74. // Buat deret angka dengan panjang 4 angka, menggunakan langkah yang berbeda-beda
  75. sequence = [startNumber];
  76. for (var i = 0; i < 3; i++) {
  77. var nextNumber = sequence[i] + steps[i];
  78. sequence.push(nextNumber);
  79. }
  81. // Tentukan dua jawaban yang benar (dua angka berikutnya dalam pola)
  82. correctAnswer1 = sequence[3] + steps[3]; // Angka ke-5
  83. correctAnswer2 = correctAnswer1 + (steps[steps.length - 1] + 1); // Angka ke-6, langkahnya bertambah satu lagi
  85. // Tampilkan pola kepada pemain

  86. document.getElementById('pattern').innerHTML = sequence.join(', ') + ', ?, ?';
  87. }
  89. // Fungsi untuk memeriksa jawaban pemain
  90. function checkAnswer() {
  91. var answer = document.getElementById('answer').value;
  92. var result = document.getElementById('result');
  94. // Pisahkan dua jawaban yang dimasukkan pemain
  95. var answers = answer.split(',').map(function(item) {
  96. return parseInt(item.trim());
  97. });
  99. // Cek apakah kedua jawaban benar
  100. if (answers.length === 2 && answers[0] === correctAnswer1 && answers[1] === correctAnswer2) {
  101. result.innerHTML = "Benar! Pola yang digunakan adalah bertambah dengan langkah dinamis.";
  102. result.style.color = "green";
  103. } else {
  104. result.innerHTML = "Salah, coba lagi! Jawaban yang benar adalah " + correctAnswer1 + " dan " + correctAnswer2 + ".";
  105. result.style.color = "red";
  106. }
  107. }
  109. // Fungsi untuk me-refresh halaman
  110. function refreshPage() {
  111. window.location.reload();
    // Memuat ulang halaman dan menghasilkan pola baru
  112. }
  114. // Panggil fungsi generatePattern saat halaman dimuat
  115. window.onload = generatePattern;
  116. </script>
  117. </td></tr></table>
  118. </center>
  119. </body>
  120. </html>
  • Silahkan disimpan dengen eksetnsi HTML, misalnya,” Game mengenal pola.HTML“.
  • Jika hasil copy benar maka akan ditampilkan halaman gam seperti berikut ini
Game: Pengenalan Pola Dinamis

Pengenalan Pola Dinamis

Perhatikan deretan angka berikut !

Masukkan dua angka berikutnya dalam pola di bawah ini (pisahkan dengan koma):

Kembali