1024programmer Java Javascript implements stopwatch timing game

Javascript implements stopwatch timing game

The example in this article shares the specific code of Javascript to implement the stopwatch timing game for your reference. The specific content is as follows

1. Description

The game page design is divided into two columns: left and right. The upper left is the marquee, the lower left is the timer and the “START” button; the upper right is the ranking list, and the lower right is the game rules.

The marquee uses a timer and cycles through it. The timer starts from “00:00:000”. You need to click the “START” button to start the game. To stop the game, click the space bar. The game calculates the stop time and “00:10:000”, which is the time difference from 10 seconds. Note that if you press the space bar to stop before 10 seconds, there will be a penalty. The penalty will be doubled the previously calculated time difference. Finally, the results are ranked in ascending order of the final time difference.

2. Effect display

3. Code

3.1 HTML





 
 
 
 
 



 
  
  
   
   
     
00: 00: 000



Rankboard
Ranking Player ID Time Record Whether there is a time penalty Time difference
Timed game rules:

  Click "START" to start the game. When the stopwatch reaches 10 seconds, please press the space bar on the keyboard. The system will record the time difference between the time when you press the keyboard and the 10-second time, and calculate the final time difference based on the minimum time. Rank in order of magnitude. If you want to restart the game, just click "START" again.
   Note: If you press the space bar before 10 seconds of the stopwatch, it is a "jump start" violation and requires a time penalty. The final time difference will be doubled!

3.2 CSS

 body {
  background-image: url("../images/img02.png");
  background-size: cover;
 }

 body>div {
  display: flex;
  margin: 50px 50px 0px 50px;
 }

 /* Column-left */
 #left {
  height: 550px;
  flex: 1;
  text-align: center;
  background-color: rgba(10, 0, 6, 0.3);
 }

 /* Marquee */
 #marquee {
  width: 100%;
  height: 300px;
 }

 #marquee table {
  width: 95%;
  height: 280px;
  margin: 5px 20px 0px 20px;
  border-spacing: 20px;
 }

 #marquee table td {
  background-color: rgba(9, 28, 38, 0.8);
  border-radius: 5px;
 }

 /* Timer: minutes, seconds, milliseconds */
 #time {
  font-size: 4.5em;
  color: #02C4F2;
 }

 /* "START" button */
 #start {
  font-size: 3em;
  background-color: rgba(10, 0, 6, 0.5);
  border-style: solid;
  border-color: #344665;
  color: #02C4F2;
  border-radius: 10px;
  cursor: pointer;
 }

 /* Column-right */
 #right {
  flex: 1;
  margin-left: 50px;
 }

 /* Ranking scrolling interface */
 #right .board1 {
  height: 350px;
  width: 100%;
  border: 1px solid #344665;
  overflow-y: scroll;
  padding: 5px;
  background-color: rgba(10, 0, 6, 0.2);
 }

 /*Overall style of scroll bar*/
 #right>div::-webkit-scrollbar {
  background-color: rgba(219, 200, 212, 0.4);
 }

 /*Small square inside the scroll bar*/
 #right>div::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: rgba(155, 24, 24, 0.5);
 }

 /* Ranking list */
 #leaderboard {
  width: 100%;
  border-color: #344665;
  color: white;
  font-size: 1.3em;
  text-align: center;
 }

 #leaderboard th {
  width: 18%;
 }

 /* Game rules description */
 #right .board2 {
  height: 165px;
  width: 100%;
  border: 1px solid #344665;
  margin-top: 10px;
  padding: 5px;
  background-color: rgba(10, 0, 6, 0.2);
  color: white;
  line-height: 1.5em;
 }

 .board2>div {
  margin: 4px;
 }

3.3 Javascript

 window.Onload= function () {

  var count = 0; // Current number of milliseconds since recording started
  var timer; // timer return value, used to stop the timer
  var timer_color; // Timer return value, used to stop the ticker
  var flag = false; // Add judgment to prevent repeated clicks from causing multiple timers to count at the same time
  /* Timing */
  var id_M = document.getElementById("id_M");
  var id_S = document.getElementById("id_S");
  var id_MS = document.getElementById("id_MS");
  /* Marquee */
  var td1 = this.document.getElementById("tr1").getElementsByTagName("td");
  var td2 = this.document.getElementById("tr2").getElementsByTagName("td");
  var td3 = this.document.getElementById("tr3").getElementsByTagName("td");
  vartd4 = this.document.getElementById("tr4").getElementsByTagName("td");
  var color = td1[1].style.backgroundColor; //Storage the original color of the marquee for restoration

  /* Start button */
  var start = this.document.getElementById("start");
  start.Onclick= function () {
   start.blur(); // Remove focus
   if (flag) {
    clearInterval(timer); // Handle the situation where "START" is clicked again without pressing the space bar to stop.
   }
   flag = true;
   /* timer */
   var ms = new Date().getTime();
   timer = setInterval(function () {
    count = new Date().getTime() - ms;
    id_M.innerText = handleTime1(parseInt(count / 1000 / 60));
    id_S.innerText = handleTime1(parseInt(count / 1000 % 60));
    id_MS.innerText = handleTime2(count % 1000);
   }, 103);
   /* Marquee */
   clear(0); // Clear all first
   row = 4; // initialize row
   col = 4; // initialize column
   timer_color = setInterval(paomadeng, 200);
  }
  /* Processing time (minutes, seconds) */
  function handleTime1(num) {
   if (num <10) {
    return '0' + num;
   }
   return num;
  }
  /* Processing time (milliseconds) */
  function handleTime2(num) {
   if (num <10) {
    return "00" + num;
   } else if (num <100) {
    return '0' + num;
   }
   return num;
  }
  /* Marquee */
  var row = 4,
   col = 4;
  function paomadeng() {
   if (col == -1) {
    clear(col + 1);
    col = 4;
   }
   if (row == 4) {
    clear(col + 1);
    td4[col].style.backgroundColor = "green";
    row--;
   } else if (row == 3) {
    td3[col].style.backgroundColor = "red";
    row--;
   } else if (row == 2) {
    td2[col].style.backgroundColor = "blue";
    row--;
   } else if (row == 1) {
    td1[col].style.backgroundColor = "#47DE00";
    row = 4;
    col--;
   }
  }
  /* Clear ticker */
  function clear(n) {
   for (; n <= 4; n++) {
    td1[n].style.backgroundColor = color;
    td2[n].style.backgroundColor = color;
    td3[n].style.backgroundColor = color;
    td4[n].style.backgroundColor = color;
   }
  }



  /* Click the space bar to stop */
  this.document.Onkeypress= function (ev) {
   // 32 corresponds to spaces
   if (ev.keyCode == 32 && flag) {
    clearInterval(timer);
    clearInterval(timer_color);
    flag = false;
    //Add rows to table
    addRow();
   }
  }

  // Ranking list
  var table = this.document.getElementById("leaderboard");
  // Player’s final time difference record
  var players = [];
  /* Add rows to table */
  function addRow() {
   var rows = table.rows.length;
   var insertTr;

   var before_time_diff = count - 10 * 1000; //Basic time difference
   var after_time_diff; // final time difference
   if (before_time_diff <0) {
    after_time_diff = Math.abs(before_time_diff) * 2;
   } else {
    after_time_diff = before_time_diff;
   }
   // rows==1, indicating that it is the first player; otherwise, traverse all players
   if (rows != 1) {
    for (var i = 0; i <players.length; i++) {
     if (after_time_diff <players[i]) {
      console.log(after_time_diff, players[i])
      insertTr = table.insertRow(i + 1);
      break;
     }
    }
    if (insertTr == null) {
     insertTr = table.insertRow(rows);
    }
   } else {
    insertTr = table.insertRow(rows);
   }

   //ranking
   var insertTd = insertTr.insertCell(0);
   insertTd.innerText = rows
   // player name
   var insertTd = insertTr.insertCell(1);
   insertTd.innerText = "Player" + rows
   // time record
   var insertTd = insertTr.insertCell(2);
   inserTd.innerText = id_M.innerText + ":" + id_S.innerText + ":" + id_MS.innerText
   //Whether there is a time penalty
   var insertTd = insertTr.insertCell(3);
   if (before_time_diff <0) {
    insertTd.innerText = "Yes"
   } else {
    insertTd.innerText = "No"
   }
   // final time difference
   var insertTd = insertTr.insertCell(4);
   var M = handleTime1(parseInt(after_time_diff / 1000 / 60));
   var S = handleTime1(parseInt(parseInt(after_time_diff / 1000 % 60)));
   var MS = handleTime2(parseInt(parseInt(after_time_diff % 1000)));
   inserTd.innerText = M + ":" + S + ":" + MS

   //Add the player's final time difference information to the players array and sort it
   players.push(after_time_diff);
   players.sort(sortNum); // Note that sort is to sort the strings in the array. If it is a number, it needs to be customized.
   //Reset ranking
   resetRank();
  }
  /* Sorting of numbers in the array (from small to large) */
  function sortNum(a, b) {
   return a - b;
  }
  /* Reset ranking */
  function resetRank() {
   var tr = document.getElementById("leaderboard").getElementsByTagName("tr");
   for (var i = 1; i <tr.length; i++) {
    tr[i].getElementsByTagName("td")[0].innerText = String(i);
   }
  }
 }

More interesting classic mini-game implementation topics to share with everyone:

Summary of C++ classic games

Summary of python classic games

python Tetris game collection

Javascript classic game, endless play

Summary of Javascript classic games

The above is the entire content of this article. I hope it will be helpful to everyone’s study and I hope you will support me a lot.

This article is from the internet and does not represent1024programmerPosition, please indicate the source when reprinting:https://www.1024programmer.com/697312

author: admin

Previous article
Next article

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact Us

Contact us

181-3619-1160

Online consultation: QQ交谈

E-mail: [email protected]

Working hours: Monday to Friday, 9:00-17:30, holidays off

Follow wechat
Scan wechat and follow us

Scan wechat and follow us

Follow Weibo
Back to top
首页
微信
电话
搜索