Recently I have started to read a little more about JS, in order to make the reviews of some JS books. Thus, this December would be JS December (or at least the first part of it! 🙂 ).
So, lets see what I have built with JS and even dared to call it a game again. Pretty much, it is a small table of divs, which are listening for the events “mouseover” and “click”:
Once the event is “caught”, they increment by one or they are multiplied by -1. Some of the divs are somehow reversed, they do not go with the flow and their action is something like -10 or whatsoever.
The idea is to reach 1000, the result is written on top. If you reach it, you get a simple notice about it and you may continue. So far so good, here comes the code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>VitoshAcademy</title> <script> var total_result = 0; window.addEventListener("load", setup); function setup() { for (var i = 1; i <= 18; i++) { document.getElementById(String("increase"+i)).addEventListener("mouseover", counter); document.getElementById(String("increase"+i)).addEventListener("click", reverse); } } function reverse(event){ if (!event) event = window.event; var target; //console.log(event.target.id); if (event.target) { target = event.target; } else { target = event.srcElement; } var alterWert = parseInt(target.innerHTML); target.innerHTML = alterWert * -1; increment(alterWert * -1); } function counter(event) { if (!event) event = window.event; var target; //console.log(event.target.id); if (event.target) { target = event.target; } else { target = event.srcElement; } if (String(event.target.id).slice(-1) == 4){ target.innerHTML = parseInt(target.innerHTML) - 10; increment(-10); return; } var alterWert = parseInt(target.innerHTML); target.innerHTML = alterWert + 1; increment(); } function increment(myVariable){ if (typeof myVariable === 'undefined'){ myVariable = 1 } total_result+=myVariable; document.getElementById("result").innerHTML = "The result is " + total_result; if (total_result === 1000) { document.getElementById("GameOver").innerHTML = "Super, you have reached the goal!"; } } </script> <style> div{ bgcolor: "marine"; } .rTable { display: table; width: 30%; } .rTableRow { display: table-row; } .rTableCell { display: table-cell; border: 1px solid #999999; } </style> </head> <body> <h1>AnotherJSGame</h1> <h2 id="result">Start moving aroung the table</h2> <div class="rTable"> <div class="rTableRow"> <div class = "rTableCell" id="increase1">0</div> <div class = "rTableCell" id="increase2">0</div> <div class = "rTableCell" id="increase3">0</div> </div> <div class="rTableRow"> <div class = "rTableCell" id="increase4">0</div> <div class = "rTableCell" id="increase5">0</div> <div class = "rTableCell" id="increase6">0</div> </div> <div class="rTableRow"> <div class = "rTableCell" id="increase7">0</div> <div class = "rTableCell" id="increase8">0</div> <div class = "rTableCell" id="increase9">0</div> </div> <div class="rTableRow"> <div class = "rTableCell" id="increase10">0</div> <div class = "rTableCell" id="increase11">0</div> <div class = "rTableCell" id="increase12">0</div> </div> <div class="rTableRow"> <div class = "rTableCell" id="increase13">0</div> <div class = "rTableCell" id="increase14">0</div> <div class = "rTableCell" id="increase15">0</div> </div> <div class="rTableRow"> <div class = "rTableCell" id="increase16">0</div> <div class = "rTableCell" id="increase17">0</div> <div class = "rTableCell" id="increase18">0</div> </div> </div> <h2 id="GameOver">Try to reach 1000!</h2> <noscript>Activate JS!</noscript> </body> </html> |