Go to the profile of ari adiprana
ari adiprana

Game 24

This is a simple tutorial on how to make this game, in this tutorial you may learn deeper about javascript and how to pass any data from javascript into your HTML page with innerHTML .

Before I start , let’s play ! and don’t forget to comment this article with your score :)

ariadiprana
Game 24ariadiprana.github.io

You can download the source code in my repository :

ariadiprana/ariadiprana.github.io
ariadiprana.github.io - 20160801 - This repository is created for hacktiv8 learning purposes. Ganbatte!github.com

After download the files, you may focus on gameJavascript.html and gameJavascript.js

Everytime you open this game, system will automatically run my mulaiPermainan() function , you can control it with this code

<body onload="mulaiPermainan()">

Then system will run the function in javascript.

function mulaiPermainan(){
 startDate = new Date()
 angka = randomAngka();
 hasilAkhir = "0";
 angkaBaru = "0"
 operator = "+";
 document.getElementById("randomAngka1").innerHTML = angka[0];
 document.getElementById("randomAngka2").innerHTML = angka[1];
 document.getElementById("randomAngka3").innerHTML = angka[2];
 document.getElementById("randomAngka4").innerHTML = angka[3];
document.getElementById("bt_angka1").value = angka[0];
 document.getElementById("bt_angka2").value = angka[1];
 document.getElementById("bt_angka3").value = angka[2];
 document.getElementById("bt_angka4").value = angka[3];
document.getElementById("total").innerHTML = "";
 document.getElementById("pesan").innerHTML= "";
}

I create the 4 numbers inside the table and make each number inside a div tag with id “randomAngka1” until “randomAngka4”

<table>
  <tr> 
    <td>
      <div id="randomAngka1"></div>
    </td>
    <td>
      <div id="randomAngka2"></div>
    </td>
    <td>
      <div id="randomAngka3"></div>
    </td>
    <td>
      <div id="randomAngka4"></div>
    </td>
  </tr>
  <tr>
    <td colspan="4">
      <div id="total"></div>
    </td>
  </tr>
  <tr>
    <td colspan="4">
      <div id="pesan"></div>
    </td>
  </tr>
</table>

And to randomized the number, I create this function

function randomAngka(){
 var angka = new Array();
 for(var i=0 ; i<4 ; i++){
    var randomnumber = Math.floor(Math.random() * (10 - 1 + 1)) + 1;
    var found=false;
    for(var i=0;i<angka.length;i++){
   if(angka[i]==randomnumber){found=true;break}
    }
    if(!found)angka[angka.length]=randomnumber;
 }
 return angka;
}

Take closer into this below snippet, after I got the random number, I put the result into array angka[0] — angka[3]. To display the number to HTML I use below code.

 document.getElementById("randomAngka1").innerHTML = angka[0];
 document.getElementById("randomAngka2").innerHTML = angka[1];
 document.getElementById("randomAngka3").innerHTML = angka[2];
 document.getElementById("randomAngka4").innerHTML = angka[3];

With this method, you may see your number will be shown to html page.

Then as you see I implement this method to pass data to total, pesan and hasil div.