Question

我将要创建一个点击游戏。它工作得很好（感谢几个人的帮助）。为了完成它，我想添加另一个功能。

我希望用户在单击“开始”时选择是否要播放5、10或15秒。应该省去其他几秒钟，否则高分会太复杂。

然后，高分功能应以这样的方式工作：根据玩家的选择，最后显示5、10或15秒的高分。

随信附上HTML，JavaScript和样式表的代码，具有5秒钟的高分功能。

HTML

<head>
<link href="style.css" rel="stylesheet">
</head>

<body>

<div><span id="time"></span> </div>
<div id="welcome">Willkommen zu unserem Reaktionsspiel! Wenn du bereit bist, klicke auf "Start"</div>
<button id="start" type=button >Start</button>
<button id="clicker" type=button>KLICK</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="index.js"></script>
</body>

CSS

body
{ 
width: 100%;
height:100%; 
margin: 0 auto; 
padding: 0;
background-color:black;
display:flex;
flex-direction:column;
} 

#welcome {

    font-size:20px;
    margin:auto;
    width:400px;
    height:50px;
    color:white;
    border-style:solid;
    border-color:white;
    text-align:center;
    margin-top:5%;
}

#start {
    color:white;
    background-color:black;
    margin:auto;
    margin-top:0%;
    border-style:solid;
    border-color:white;
    text-align:center;
    font-size:40px;
    width:100px;
    height:80px;
    transition: transform 0.7s;



}


#start:hover {

    background-color:white;
    color:black;
    cursor:pointer;
    transform: scale(1, -1);

}

#time{
    margin-top:5%;
    margin-left:5%;
    color:white;
    font-size:50px;
    display:none;
}

#clicker{
    color:white;
    background-color:black;
    margin:auto;
    margin-top:10%;
    border-style:solid;
    border-color:white;
    text-align:center;
    font-size:40px;
    width:200px;
    height:100px;
    display:none;
    position:absolute;
    margin-left:35%;

}

#clicker:hover {


    cursor:pointer;


}

JAVASCRIPT

let klick = 0;
display = document.querySelector('#time');

$("#start").click(function() { //clickfunktion beim starten.
  $("#start").fadeOut(); //Der Startbutton geht weg
  $("#welcome").fadeOut(); // Das Willkommensschild geht weg

  $("#time").fadeIn(900); //Timer kommt 
  $("#clicker").animate({
    height: 'toggle'
  }); //clicker wird gestartet 

  var dauer = 5;

  startTimer(dauer); //übergibt die variable dauer, und dass die Funktion gestartet wird.  
})

function startTimer(dauer) {
  let timer = 5;
  runTimer();
  zeit = setInterval(runTimer, 1000); //zahl gibt an, wie oft die Function pro zeit wiederholt wird. Hier eine Sekunde (1000Millisekunden)
  function runTimer(){
    display.textContent = parseInt(timer); // zeigt sekunden-variable

    --timer; //setzt den timer immer einen herab

    if (timer < 0.00) {

      timer = 5;
      console.log(timer);
      $("#start").fadeIn();
      $("#welcome").fadeIn();
      $("#time").fadeOut();
      $("#clicker").fadeOut();
      $("#clicker").css("margin-top", "10%");
      $("#clicker").css("margin-left", "50%");

      alert("Sauber du hast " + klick + " klicks in 5 Sekunden geschafft!");
      alert('High Score is ' + highScore(klick));

      klick = 0
      console.log(timer);

      clearInterval(zeit);

    } //wenn timer auf 0 ist, wird alles wieder angezeigt und die Interval-Function beendet

}


};

$("#clicker").click(function() {
  let zufall = Math.floor(Math.random() * 40) - 20 //setzt eine zufällige höhe für den clicker
  let zufal = Math.floor(Math.random() * 45) //Zufällige Variable für den Linkswert

  klick = klick + 1 //setzt den zähler beim klicken eins hoch
  if (klick % 2 == 0) {
    $("#clicker").animate({
      opacity: '0.3',
      left: zufall + "%",
      top: zufal + "%"
    }, "fast"); //bewegt den Klick-Block auf eine zufällige Stelle
  } else {
    $("#clicker").animate({
      opacity: '1.0',
      left: zufall + "%",
      top: zufal + "%"
    }, "fast")

  }


});

function highScore(score) {
  var saved = 0;
  saved = parseFloat(localStorage.getItem('highScore')) || 0;
  score = parseFloat(score) || 0;

  if (score > saved) {
    saved = score;
    localStorage.setItem('highScore', score);
  }
  return saved;
}

Answer 1

该解决方案实际上可以在我的系统上尝试并正常工作。下面是我更改的html和js

<head>
<link href="style.css" rel="stylesheet">
</head>

<body>

<div><span id="time"></span> </div>
<div id="welcome">Willkommen zu unserem Reaktionsspiel! Wenn du bereit bist, klicke auf "Start"</div>
<select id="gt" style="position:fixed;right:300px;top:65px;height:40px;width:100px;">
    <option value="5">five second</option>
    <option value="10">Ten second</option>
    <option value="15">Finteen second</option>
</select>
<button id="start" type=button >Start</button>
<button id="clicker" type=button>KLICK</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="index.js"></script>
</body>

let klick = 0;
display = document.querySelector('#time');

$("#start").click(function() { //clickfunktion beim starten.
  $("#start").fadeOut(); //Der Startbutton geht weg
  $("#welcome").fadeOut(); // Das Willkommensschild geht weg

  $("#time").fadeIn(900); //Timer kommt 
  $("#clicker").animate({
    height: 'toggle'
  }); //clicker wird gestartet 
    var d = $("#gt option:selected").val();
    
  var dauer = parseInt(d);

  startTimer(dauer); //übergibt die variable dauer, und dass die Funktion gestartet wird.  
})

function startTimer(dauer) {
    let timer = parseInt(dauer);
  runTimer();
  zeit = setInterval(runTimer, 1000); //zahl gibt an, wie oft die Function pro zeit wiederholt wird. Hier eine Sekunde (1000Millisekunden)
  function runTimer(){
    display.textContent = parseInt(timer); // zeigt sekunden-variable

    --timer; //setzt den timer immer einen herab

    if (timer < 0.00) {

      timer = 5;
      console.log(timer);
      $("#start").fadeIn();
      $("#welcome").fadeIn();
      $("#time").fadeOut();
      $("#clicker").fadeOut();
      $("#clicker").css("margin-top", "10%");
      $("#clicker").css("margin-left", "50%");

      alert("Sauber du hast " + klick + " klicks in 5 Sekunden geschafft!");
      alert('High Score is ' + highScore(klick));

      klick = 0
      console.log(timer);

      clearInterval(zeit);

    } //wenn timer auf 0 ist, wird alles wieder angezeigt und die Interval-Function beendet

}


};

$("#clicker").click(function() {
  let zufall = Math.floor(Math.random() * 40) - 20 //setzt eine zufällige höhe für den clicker
  let zufal = Math.floor(Math.random() * 45) //Zufällige Variable für den Linkswert

  klick = klick + 1 //setzt den zähler beim klicken eins hoch
  if (klick % 2 == 0) {
    $("#clicker").animate({
      opacity: '0.3',
      left: zufall + "%",
      top: zufal + "%"
    }, "fast"); //bewegt den Klick-Block auf eine zufällige Stelle
  } else {
    $("#clicker").animate({
      opacity: '1.0',
      left: zufall + "%",
      top: zufal + "%"
    }, "fast")

  }


});

function highScore(score) {
  var saved = 0;
  saved = parseFloat(localStorage.getItem('highScore')) || 0;
  score = parseFloat(score) || 0;

  if (score > saved) {
    saved = score;
    localStorage.setItem('highScore', score);
  }
  return saved;
}

如何插入允许用户在开始时选择秒数的功能？

1 个答案: