文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >构建一个增殖游戏。需要一些使用Javascript中的函数的建议

问构建一个增殖游戏。需要一些使用Javascript中的函数的建议
EN

Stack Overflow用户
提问于 2018-05-31 07:19:43
回答 2查看 0关注 0票数 0

“选项”下的“box”div是我在函数中使用“Math.random（）”生成的问题的答案。如果答案是正确的，则分数应该将计数器增加1，并且应该在应用程序之上显示div。它隐藏，但我正在尝试使用JavaScript显示它。我不知道我的代码有什么问题，其他的一切似乎都没有问题。

HTML代码

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Maths multiplication game</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
  </head>
  <body>
    <div class="container">
      <div id="score">Score: <span id="scorevalue"></span></div>
      <div id="correct">Correct</div>
      <div id="wrong">Try again</div>
      <div id="question"></div>
      <div id="instruction">Click on the correct answer</div>
      <div id="choices">
        <div id="box1" class="box"></div>
        <div id="box2" class="box"></div>
        <div id="box3" class="box"></div>
        <div id="box4" class="box"></div>
      </div>
      <div id="startreset">Start Game</div>
      <div id="timeremaining">Time remaining: <span id="timeremainingvalue"></span> sec</div>
      <div id="gameOver"></div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

CSS代码：

代码语言：javascript
复制
html{
  background: radial-gradient(circle, #1E232B,#29303A);
}

.container{
  height: 450px;
  width: 600px;
  background-color: skyblue;
  margin: 100px auto;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 4px 4px 0px 0px skyblue;
  -webkit-box-shadow: 4px 4px 0px 0px skyblue;
  -moz-box-shadow: 4px 4px 0px 0px skyblue;
  position: relative;
}

#score{
  background-color: #F1FF92;
  color: #888E5F;
  padding: 11px;
  position: absolute;
  left: 500px;
  box-shadow: 0px 4px 0px #9da853;
  -moz-box-shadow: 0px 4px 0px #9da853;
  -webkit-box-shadow: 0px 4px 0px #9da853;
}

#correct{
  position: absolute;
  left: 250px;
  background-color: #42e252;
  color: white;
  padding: 11px;
  display: none;
}

#wrong{
  position: absolute;
  left: 250px;
  background-color: #de401a;
  color: white;
  padding: 11px;
  display: none;
}

#question{
  width: 450px;
  height: 150px;
  margin: 50px auto 10px auto;
  background-color: #9DABEA;
  box-shadow: 0px 4px #535aa8;
  font-size: 100px;
  text-align: center;
  font-family: sans-serif;
  color: black;
}

#instruction{
  width: 450px;
  height: 50px;
  background-color: #B481D9;
  margin: 10px auto;
  text-align: center;
  line-height: 45px;
  box-shadow: 0px 4px #8153a8;
}

#choices{
  width: 450px;
  height: 100px;
  margin: 5px auto;
}

.box{
  width: 85px;
  height: 85px;
  background-color: #fff;
  float: left;
  margin-right: 36px;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 0px 4px rgba(0,0,0,0.2);
  text-align: center;
  line-height: 80px;
  position: relative;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
}

#box4{
  margin-right: 0;
}

.box:hover, #startreset:hover{
  background-color: #9c89f6;
  color: white;
  box-shadow: 0px 4px #6b54d3;
  -moz-box-shadow: 0px 4px #6b54d3;
  -webkit-box-shadow: 0px 4px #6b54d3;
}

.box:active, #startreset:active{
  background-color: #9C89F6;
  box-shadow: 0px 0px #6b54d3;
  -moz-box-shadow: 0px 0px #6b54d3;
  -webkit-box-shadow: 0px 0px #6b54d3;
  color: white;
  top: 4px;
}

#startreset{
    width: 78px;
    padding: 10px;
    background-color: rgba(255,255,255,0.5);
    margin: 0 auto;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: 0px 4px rgba(0,0,0,0.2);
    text-align: center;
    line-height: 30px;
    position: relative;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
}

#timeremaining{
  width: 160px;
  padding: 10px;
  position: absolute;
  top: 395px;
  left: 400px;
  background-color: rgba(181,235,36,0.8);
  border-radius: 3px;
  box-shadow: 0px 4px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0px 4px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 4px rgba(0,0,0,0.2);
  display: none;
}

#gameOver{
  height: 200px;
  width: 500px;
  background: linear-gradient(#F3ca68, #00B17C);
  color: #fff;
  font-size: 2.5em;
  text-align: center;
  text-transform: uppercase;
  position: absolute;
  top: 100px;
  left: 45px;
  z-index: 2;
  display: none;
}

Javascript代码：

代码语言：javascript
复制
var playing = false;
var score;
var action;
var timeremaining;
var correctAnswer;

//if we click on the start/reset
document.getElementById('startreset').onclick = function(){
    //if we are playing
    if (playing == true){
      //reload page
      location.reload();
    } else {
      //if not playing, set score to 0
      score = 0;
      document.getElementById("scorevalue").innerHTML = score;

      //show countdown box
      show("timeremaining");
      timeremaining = 60;
      document.getElementById("timeremainingvalue").innerHTML = timeremaining;

      //hide game over box
      hide("gameOver");
      document.getElementById("startreset").innerHTML = "Reset game";

      //start countdown
      startCountdown();

      //generate new Question and answers
      generateQA();
    }
}

//clicking on answer box
for(i=1; i<5; i++){
  document.getElementById('box' + i).onclick = function(){

    //check if we are playing
    if(playing == true){//yes
        if(this.innerHTML == correctAnswer){
          //correct answer
          score++;
          document.getElementById('scorevalue').innerHTML = score;

          //hide wrong box and show correct box
          hide("wrong");
          show("correct");
          setTimeout(function(){
            hide("correct");
          }, 1000);

          //generate a question if the answer is correct
          generateQA();

        } else {
          //wrong answer
          hide("correct");
          show("wrong");
          setTimeout(function(){
            hide("wrong");
          }, 1000);
      }
    }
  }
}



//functions

//start counter
function startCountdown(){
  action = setInterval(function(){
    timeremaining -= 1;
    document.getElementById("timeremainingvalue").innerHTML = timeremaining;
    if(timeremaining == 0){ //game over
      stopCountdown();
      show("gameOver");
      document.getElementById("gameOver").innerHTML = "<p>Game over!</p><p>Your score is "+ score +".</p>";
      hide("timeremaining");
      hide("correct");
      hide("wrong");
      playing = false;
      document.getElementById("startreset").innerHTML = "Start game";
    }
  },1000);
}

//stop counter
function stopCountdown(){
  clearInterval(action);
}

//hide an element
function hide(id) {
  document.getElementById(id).style.display = 'none';
}

//show an element
function show(id){
  document.getElementById(id).style.display = 'block';
}

//generate question and answers
function generateQA(){
  var x = 1 + Math.round(9 * Math.random());
  var y = 1 + Math.round(9 * Math.random());
  correctAnswer = x * y;
  document.getElementById('question').innerHTML = x + "x" + y;
  var correctPosition = 1 + Math.round(3 * Math.random());

  //fill one box with the correct answer
  document.getElementById('box' + correctPosition).innerHTML = correctAnswer;

  //fill other boxes with wrong answers
  var answers = [correctAnswer];

  for(i=1; i<5; i++){
    if(i != correctPosition){
      var wrongAnswer;
      do{ //a wrong answer
        wrongAnswer = (1 + Math.round(9 * Math.random())) * (1 + Math.round(9 * Math.random()));
      } while (answers.indexOf(wrongAnswer) > -1){
        document.getElementById('box' + i).innerHTML = wrongAnswer;
        answers.push(wrongAnswer);
      }
    }
  }
}
EN

回答 2

Stack Overflow用户

发布于 2018-05-31 16:12:02

代码语言：txt
复制
var rIndex,
  table = document.getElementById("table");

// check the empty input
function checkEmptyInput() {
  var isEmpty = false,
    name = document.getElementById("name").value,
    id = document.getElementById("id").value,
    qty = document.getElementById("quantity").value,
    category = document.getElementById("category"),
    supplier = document.getElementById("supplier").value;

  if (name === "") {
    alert("Product name field cannot be empty");
    isEmpty = true;
  } else if (id === "") {
    alert("ID field cannot be empty");
    isEmpty = true;
  } else if (qty === "") {
    alert("Quantity field cannot be empty");
    isEmpty = true;
  } else if (supplier === "") {
    alert("Supplier field cannot be empty");
    isEmpty = true;
  }
  return isEmpty;
}

//add a row
function addHtmlTableRow() {
  // get the table by id
  // create a new row and cells
  // get value from input text
  // set the values into row cell's
  var table = document.getElementById("table");
  if (!checkEmptyInput()) {
    var newRow = table.insertRow(table.length),
      cell1 = newRow.insertCell(0),
      cell2 = newRow.insertCell(1),
      cell3 = newRow.insertCell(2),
      cell4 = newRow.insertCell(3),
      cell5 = newRow.insertCell(4),

      name = document.getElementById("name").value,
      id = document.getElementById("id").value,
      qty = document.getElementById("quantity").value,
      category = document.getElementById("category").value,
      supplier = document.getElementById("supplier").value;

    cell1.innerHTML = name;
    cell2.innerHTML = id;
    cell3.innerHTML = qty;
    cell4.innerHTML = category;
    cell5.innerHTML = supplier;
    // call the function to set the event to the new row
    selectedRowToInput();
  }
}

// display selected row data into input text
function selectedRowToInput() {

  for (var i = 1; i < table.rows.length; i++) {
    table.rows[i].onclick = function() {
      // get the seected row index
      rIndex = this.rowIndex;
      document.getElementById("name").value = this.cells[0].innerHTML;
      document.getElementById("id").value = this.cells[1].innerHTML;
      document.getElementById("quantity").value = this.cells[2].innerHTML;
      document.getElementById("category").value = this.cells[3].innerHTML;
      document.getElementById("supplier").value = this.cells[4].innerHTML;
    };
  }
}
selectedRowToInput();
代码语言：txt
复制
<div class="main">
  <h1>Manage Purchasing</h1>
  <form>
    <ul class="form-style-1">
      <li>
        <label>Product Name </label>
        <input type="text" name="name" id="name" class="field-long" placeholder="Enter product name.." /></li>
      <li>
        <label>Product ID <span class="required">*</span></label>
        <input type="text" name="id" id="id" class="field-long" />
      </li>
      <li>
        <label>Quantity <span class="required">*</span></label>
        <input type="number" name="quantity" id="quantity" class="field-short" />
      </li>
      <li>
        <label>Supplier <span class="required">*</span></label>
        <input type="text" name="supplier" id="supplier" class="long" />
      </li>
      <li>
        <label>Price </label>
        <input type="number" name="price" id="price" class="field-short" />
      </li>
      <li>
        <label>Choose Category</label>
        <select name="field4" class="field-select" name="category" id="category">
          <option value="metal">Metal</option>
          <option value="aluminium">Aluminium</option>
          <option value="Iron">Iron</option>
          <option value="scrap">Scrap Metal</option>
        </select>
      </li>
      <li>
        <label>Product Description </label>
        <textarea name="field5" id="field5" class="field-long field-textarea"></textarea>
      </li>
      <li>
        <p>* Required to add, remove and update the product information on summary.</p>
        <button type="button" onclick="addHtmlTableRow();">Add</button>
        <button type="button" onclick="editHtmlTbleSelectedRow();">Edit</button>
        <button type="button" onclick="removeSelectedRow();">Remove</button>
      </li>
      <li>
      </li>
    </ul>
  </form>
  <div class="summary">
    <h1>Purchasing Summary</h1>
    <table id="table">
      <tr>
        <th>ID</th>
        <th>Quantity</th>
        <th>Supplier</th>
        <th>Price</th>
        <th>Category</th>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
      </tr>
    </table>
  </div>
</div>

​

票数 0
EN

Stack Overflow用户

发布于 2018-05-31 17:10:54

只需添加type="button"属性设置为文本按钮，以便重写它们的默认设置。

代码语言：txt
复制
<button onclick="addHtmlTableRow();" type="button">Add</button>
<button onclick="editHtmlTbleSelectedRow();" type="button">Edit</button>
<button onclick="removeSelectedRow();" type="button">Remove</button>
-
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/-100001645

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档