[MOD] Whack-a-Mole Point Game

    This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

    • [MOD] Whack-a-Mole Point Game



      Hello, friends!
      This mode is a whack-a-mole game where you earn points to obtain dark matter.
      A mole appears every second, and clicking it earns you 100 points. The game lasts 30 seconds. If you don't reach 1,000 points, you won't receive any.
      You can play up to 10 times a day.
      You can adjust the dark matter and time by modifying the internal code.

      SQL

      SQL-Query

      1. CREATE TABLE `uni1_gamedu` (
      2. `id` INT UNSIGNED NOT NULL AUTO_INCREMENT,
      3. `username` VARCHAR(32) NOT NULL DEFAULT '',
      4. `user_id` INT UNSIGNED NOT NULL DEFAULT 0,
      5. `time` INT NOT NULL DEFAULT 0,
      6. `score` INT UNSIGNED NOT NULL DEFAULT 0,
      7. `type` TINYINT UNSIGNED NOT NULL DEFAULT 0,
      8. `universe` TINYINT UNSIGNED NOT NULL,
      9. PRIMARY KEY (`id`)
      10. ) ENGINE=MyISAM DEFAULT CHARSET=utf8;


      Add php source
      includes/pages/game/ShowGameduPage.class.php

      PHP Source Code

      1. <?php
      3. /**
      4. * 2Moons
      5. * @noonn
      6. */
      8. class ShowGameduPage extends AbstractGamePage
      9. {
      10. public static $requireModule = 0;
      12. function __construct()
      13. {
      14. parent::__construct();
      15. }
      16. function show()
      17. {
      18. global $LNG, $USER, $resource;
      20. $db = Database::get();
      24. //Delete data older than one day
      25. $sql = "DELETE FROM uni1_gamedu WHERE type = '0' AND time < :time;";
      26. $db->delete($sql, array(
      27. ':time' => (TIMESTAMP - (60 * 60 * 24))
      28. ));
      32. //Check remaining time
      33. $sql = "SELECT * FROM uni1_gamedu WHERE type = '0' AND universe = :uni AND user_id = :userid AND time > :time ORDER BY time ASC;";
      34. $search = $db->select($sql, array(
      35. ':uni' => Universe::current(),
      36. ':userid' => $USER['id'],
      37. ':time' => (TIMESTAMP - (60 * 60 * 24))
      39. ));
      40. $SearchResult = array();
      42. foreach($search as $s)
      43. {
      45. $ver = TIMESTAMP - $s['time']; //Save time
      46. $restart = pretty_time((60 * 60 * 24) - $ver);
      48. $SearchResult[] = array(
      49. 'username' => $s['username'],
      50. 'time' => $restart,
      51. 'universe' => $s['universe']
      52. );
      53. }
      58. //Check remaining times
      59. $sql = "SELECT COUNT(*) as count FROM uni1_gamedu WHERE type = '0' AND universe = :universe AND user_id = :user_id;";
      60. $Count = $db->selectSingle($sql, array(
      61. ':universe' => Universe::current(),
      62. ':user_id' => $USER['id']
      63. ), 'count');
      65. if(isset($_POST['feld']) && $_POST['feld']=="1")
      66. {
      67. $point = HTTP::_GP('gp', 0);
      70. if(!ctype_digit((string)$point)) {
      71. $this->printMessage("<span style=font-size:1.2em;color:#9BC800>An incorrect score was entered.</span>", array(array(
      72. 'label' => $LNG['sys_back'],
      73. 'url' => 'game.php?page=gamedu'
      74. )));
      75. }
      78. if($Count >= 10){
      79. $this->printMessage("<span style=font-size:1.2em;color:yellow>You cannot exceed the current possible number of times.</font>", array(array(
      80. 'label' => $LNG['sys_back'],
      81. 'url' => 'game.php?page=gamedu'
      82. )));
      83. }elseif($point >= 1000 && $point <= 30000 && $Count < 10){
      85. $USER[$resource[921]] += 50; // <-- 50 dark matter award
      86. $sql = "INSERT INTO uni1_gamedu SET username = :username, user_id = :user_id, time = :time, score = :score, type = '0', universe = :universe;";
      87. $db->insert($sql, array(
      88. ':username' => $USER['username'],
      89. ':user_id' => $USER['id'],
      90. ':time' => TIMESTAMP,
      91. ':score' => $point,
      92. ':universe' => Universe::current()
      93. ));
      95. $this->printMessage("<span style=font-size:1.2em;color:yellow>Obtain 50 dark matter, ".$point." points were registered.</font>", array(array(
      96. 'label' => $LNG['sys_back'],
      97. 'url' => 'game.php?page=gamedu'
      98. )));
      99. }elseif($point < 1000){
      101. $this->printMessage("<span style=font-size:1.2em;color:yellow>If your score is lower than 1,000, you cannot register and will not be counted towards your total.<br>You can try again.</font>", array(array(
      102. 'label' => $LNG['sys_back'],
      103. 'url' => 'game.php?page=gamedu'
      104. )));
      105. }else{
      106. $this->printMessage("<span style=font-size:1.2em;color:yellow>This is an unusual approach.</font>", array(array(
      107. 'label' => $LNG['sys_back'],
      108. 'url' => 'game.php?page=gamedu'
      109. )));
      110. }
      113. }
      115. $sql = "SELECT username, id, max(score) as score FROM uni1_gamedu WHERE type = '0' AND universe = :universe GROUP BY username ORDER BY score DESC LIMIT 10;";
      116. $rank = $db->select($sql, array(
      117. ':universe' => Universe::current()
      118. ));
      120. $rankplayer = array();
      121. foreach($rank as $rankplayerrow) {
      122. $rankplayer[$rankplayerrow['id']] = "{$rankplayerrow['username']} {$rankplayerrow['score']}";
      123. }
      125. $this->assign(array(
      126. 'rank' => $rankplayer,
      127. 'count' => $Count,
      128. 'SearchResult' => $SearchResult
      129. ));
      131. $this->display('page.gamedu.default.tpl');
      133. }
      135. }
      Display All

      The tpl source is in the reply below.
      You can change the image path in css: background: url('styles/theme/gow/dudgi.png') center/cover no-repeat; /* <--------- Mole Image Path */

      I've attached the mole image. You can change it to a different image.

      Have a good day.
      --------------------------------------------------------------------------------------

    • Add tpl source

      page.gamedu.default.tpl

      HTML Source Code

      1. {block name="title" prepend}{$LNG.lm_fleettrader}{/block}
      2. {block name="content"}
      4. <style>
      6. .tdst {
      7. background-color:#252F3B;
      8. height:30px;
      9. text-align:left;
      10. }
      13. #gameBoard {
      14. display: grid;
      15. grid-template-columns: repeat(6, 100px);
      16. gap: 10px;
      17. justify-content: center;
      18. margin: 20px auto;
      19. }
      21. .hole {
      22. width: 100px;
      23. height: 100px;
      24. background-color: #1a2a3a;
      25. border-radius: 50%;
      26. position: relative;
      27. overflow: hidden;
      28. box-shadow: inset 0 5px 10px #000;
      29. cursor: pointer;
      30. }
      32. .mole {
      33. position: absolute;
      34. bottom: -100%;
      35. left: 0;
      36. width: 100%;
      37. height: 100%;
      38. background: url('styles/theme/gow/dudgi.png') center/cover no-repeat; /* <--------- Mole Image Path */
      39. transition: bottom 0.2s;
      40. }
      42. .mole.up {
      43. bottom: 0;
      44. }
      45. </style>
      47. <div class="content_page" style="font-size:1.2em">
      48. <div class="title">Whack-a-Mole Game </div>
      50. <div>
      51. <table align="center" width="100%">
      52. <tr>
      53. <td align=center>
      54. <font color="lime">Click Start Game</font> and a mole will appear randomly for 30 seconds.<br>
      55. Catch a mole by clicking on it to earn points!<br>
      56. <font color="lime">Catch as many as you can!</font><br>
      57. <font color="lime">Currently available number of turns: {10 - $count}</font><br>
      59. <form name="f" action="" method="post">
      60. <input type="hidden" name="gpoint" value="">
      62. <!-- Game board -->
      63. <div id="gameBoard"></div>
      65. <br>
      66. <table>
      67. <tr>
      68. <td style="width:250px;text-align:left;">
      69. <font color="#01DF01">[Score ranking]</font><br>
      70. {foreach name=rank key=id item=score from=$rank}
      71. {if !$smarty.foreach.rank.first}<br>{/if}*{$score} Point
      72. {/foreach}
      73. </td>
      74. <td class="transparent center" width="20%">
      75. <input type="button" name="combo" value="0">Acquisition&nbsp;&nbsp;
      76. <input type="button" value="Timer" name="b">
      77. </td>
      78. <td align="center" style="width:400px">
      79. Current score : <input type="text" size=6 name="gp" value="0" readonly><br>
      80. <textarea style="background:#002B44;color:#fff;height:7.25em;" NAME="report" ROWS="5" COLS="60"></textarea>
      81. </td>
      82. <td>
      83. <input class="submit0" type="button" onclick="init();" value="Game start">
      84. <br><br>
      85. <input type="hidden" name="feld" value="1">
      86. <input class="submit0" type="button" onclick="save_rank()" value="Registration">
      87. </td>
      88. </tr>
      89. </table>
      90. </form>
      91. </td>
      92. </tr>
      93. </table>
      96. <table width="100%" border="0" cellpadding="0" cellspacing="1">
      97. <tr>
      98. <th colspan="4">
      99. <br>
      100. </th>
      101. </tr>
      102. <tr class="title" >
      103. <th style="height:20px" class="fontsize12 title">Number of games</th>
      104. <th class="fontsize12 title">User</th>
      105. <th class="fontsize12 title">waiting</th>
      106. <th class="fontsize12 title">Universe</th>
      107. </tr>
      108. {foreach item=SearchInfo from=$SearchResult}
      109. <tr id="tdcolor">
      110. <td style="height:27px;color:#9BC800" class="fontsize13 bline">{$SearchInfo@iteration}</td>
      111. <td style="height:27px;" class="fontsize12 bline">{$SearchInfo.username}</td>
      112. <td style="height:27px;color:#9BC800" class="fontsize12 bline">{$SearchInfo.time}</td>
      113. <td style="height:27px;" class="fontsize12 bline">{$SearchInfo.universe}</td>
      114. </tr>
      117. {/foreach}
      118. </table>
      120. <br><br>
      122. </div>
      123. </div>
      124. <br>
      126. {/block}
      128. {block name="script" append}
      129. <script>
      130. let score = 0;
      131. let combo = 0;
      132. let timeLeft = 30;
      133. let timerId = null;
      134. let moleTimer = null;
      135. let gameStarted = false;
      137. function createGameBoard() {
      138. const board = document.getElementById('gameBoard');
      139. board.innerHTML = '';
      140. for (let i = 0; i < 12; i++) {
      141. const hole = document.createElement('div');
      142. hole.className = 'hole';
      143. const mole = document.createElement('div');
      144. mole.className = 'mole';
      145. mole.addEventListener('click', function() { hitMole(mole); });
      146. hole.appendChild(mole);
      147. board.appendChild(hole);
      148. }
      149. }
      152. function init() {
      153. if (gameStarted) return;
      154. gameStarted = true;
      155. score = 0;
      156. combo = 0;
      157. timeLeft = 30;
      158. document.f.gp.value = 0;
      159. document.f.combo.value = 0;
      160. document.f.report.value = '';
      161. document.f.b.value = '30 seconds left';
      163. createGameBoard();
      164. runTimer();
      165. startMoles();
      166. }
      169. function runTimer() {
      170. timerId = setInterval(() => {
      171. timeLeft--;
      172. document.f.b.value = timeLeft + 's left';
      173. if (timeLeft <= 0) endGame();
      174. }, 1000);
      175. }
      178. function startMoles() {
      179. const moles = document.querySelectorAll('.mole');
      180. moleTimer = setInterval(() => {
      181. const randomIndex = Math.floor(Math.random() * moles.length);
      182. const mole = moles[randomIndex];
      183. mole.classList.add('up');
      185. setTimeout(() => {
      186. mole.classList.remove('up');
      187. }, 500); // ← Hold for 0.5 seconds
      188. }, 1000); // ← The next mole is about 1 second apart
      189. }
      192. function hitMole(mole) {
      193. if (!mole.classList.contains('up')) return;
      194. mole.classList.remove('up');
      195. score += 100;
      196. combo++;
      197. document.f.gp.value = score;
      198. document.f.combo.value = combo;
      199. document.f.report.value = "Mole hit! +100p\n" + document.f.report.value;
      200. }
      203. function endGame() {
      204. clearInterval(timerId);
      205. clearInterval(moleTimer);
      206. gameStarted = false;
      207. alert('Game end!\nTotal score: ' + score + 'points\nRanking registration is possible!');
      208. document.f.report.value = "Total score: " + score + "points\n" + document.f.report.value;
      209. }
      212. function save_rank() {
      213. if (Number(document.f.gp.value) > 0) {
      214. document.f.gpoint.value = document.f.gp.value;
      215. document.f.submit();
      216. }
      217. }
      219. window.onload = createGameBoard;
      220. </script>
      221. {/block}
      Display All
      --------------------------------------------------------------------------------------