用不同的图像计算矩形的面积答案

【问题标题】：Calculating the area of a rectangle with different images用不同的图像计算矩形的面积
【发布时间】：2020-03-23 01:07:09
【问题描述】：

我正在建立一个网站来计算不同乐高积木的面积，但我不确定如何做到这一点。我已经创建了 13 张具有指定高度和宽度的乐高积木图像。one has been copied below 我了解如何进行本网站的乘法和检查（用户响应与实际答案）方面，但不知道如何随机化这些图像然后存储它们的变量，例如长度和宽度（用于计算面积）。您能否为此建议有关 javascript 的任何想法？

var number1;
var number2;
var response;
var calcanswer;
var score = 0;
window.onload = areaquestion;

var areas = new Array("Images/1*1.png","Images/2*1.png","Images/2*2.png","Images/3*1.png","Images/3*2.png","Images/4*1.png","Images/4*2.png","Images/4*3.png","Images/5*1.png","Images/5*2.png","Images/6*1.png","Images/6*2.png","Images/6*4.png");

function areaquestion() {
     var randomNum = Math.floor(Math.random() * areas.length);
     document.getElementById("question").src = areas[randomNum];
    number1 = Math.floor( 1 + Math.random() * 9 );
    number2 = Math.floor( 1 + Math.random() * 9 );
    var question = document.getElementById("question");
    question.innerHTML = "What is the area of this shape?";
    calcanswer = (number1*number2);
}

function check()
{
    var statusDiv = document.getElementById("status");
    response=document.getElementById("answer").value;

    if(response != calcanswer)
    statusDiv.innerHTML="Incorrect";
    else
    if (response==calcanswer)
    {
        statusDiv.innerHTML="Very good!";
        score ++;
        document.getElementById("score").textContent = score
        document.getElementById("answer").value = "";
        problem();
    }
}

* {
    box-sizing: border-box;
  }
  
  /* Style the body */
  body {
    font-family: Arial;
    margin: 0;
  }
  
  /* Header/logo Title */
  .header {
    padding: 30px;
    text-align: center;
    background: yellow;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
  }
  .score {
    display:flex; 
    flex-wrap: wrap;
    float: right;
  }
  
  #answer {
    width: 30%;
    background-color: yellow;
    color:black;
    border-color: black;
    padding: 12px 20px;
    float: initial;
    text-size-adjust: 30;
  }

  #solve {
    width: 20%;
    background-color: blue;
    color:rgb(255, 255, 255);
    border-color: black;
    padding: 12px 20px;
    font-size: 100%;
  }
  
  /* Column container */
  .row {  
    display: flex;
    flex-wrap: wrap;
  }
  
  /* Create two unequal columns that sits next to each other */
  /* Sidebar/left column */
  .side {
    flex: 50%;
    background-color: #ffffff;
    padding: 20px;
    color:#000;
  }
  
  /* Main column */
  .main {
    flex: 50%;
    background-color: white;
    padding: 20px;
  }
  
  
  /* Footer */
  .footer {
    display: flex;
    flex-wrap: wrap;
    padding: 100px;
    text-align: right;
    background: #fff;
    flex-direction: column;
  }

  #practicebtn{
    padding:30px;
  }

  #playbtn{
    padding:30px;
  }
  /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 700px) {
    .row, .navbar, .footer {   
      flex-direction: column;
    }
  }

<!DOCTYPE html>
<html>
<title>Lego Area</title>
  <head>
    <link rel="stylesheet" href="CSS/Play.css">
    <script src="JavaScript/Play.js"></script>
  </head>
<body onload="problem();">
  
  <div class="header">
    <h1>LEGO AREA</h1>
    <p>Calculating <b>area</b> with Emmet.</p>
    <div id="score" class="score" value="SCORE:"></div>
  </div>
    
  <form>
    <div class="row">
      
      <div class="side">
        <div id="question"></div>
        <div id ="prompt"></div>
        <input type="text" id="answer"/>
        
      </div>

      <div class="main">
        <input id="solve" type="button" value="CHECK!" onclick="check()" />
      </div>

    </div>
  </form>
  <div id="status"></div>
  <!-- Footer -->
  <div class="footer">
    <div class="practice"> <a href="Practice.html"><img src="Images/legoBlue2.png" id="practicebtn"  width="20%"></a></div>
    <div class="play"> <a href="Play.html"><img src="Images/legored2.png" id="playbtn" width="20%"></a></div>
  </div>

  
</body>
</html>

【问题讨论】：

基于您的 PNG 文件名命名约定，例如2*2.png 从技术上讲，您可以从文件名本身中获取尺寸。这就是您定义number1 和number2 的方式。 ...如果您愿意，我可以在代码中给出一个示例。

标签： javascript area

【解决方案1】：

您能否创建一个对象数组，其中包含所有乐高积木，其中键/值对指示源图像、每个对象的长度、宽度和面积？如：

const legos = [
    {
        name: lego01
        image: "image01.png",
        len: 10,
        wid: 4,
        area: 40
    },
    {
        name: lego02
        image: "image02.png",
        len: 6,
        wid: 6,
        area: 36
    }
    {
        name: lego03
        image: "image03.png",
        len: 12,
        wid: 8,
        area: 96
    }
]

然后你可以让你的程序随机选择一个乐高。您可以使用语法 randomLego.width 访问它的面积或长度和宽度。

我希望我明白你想要做什么。

【讨论】：

谢谢！然后您将如何调用随机生成的图像来显示问题，然后检查答案。？