我正在建立一个网站来计算不同的乐高积木的面积，并且不确定如何做到这一点。我已经创建了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>您能否创建一个包含所有乐高玩具的对象阵列，并用键/值对来指示每个图像的源图像，长度，宽度和面积？如：
const legos = [{名称：lego01图片：“ image01.png”，len：10，威德：4面积：40}，{名称：lego02图片：“ image02.png”，伦：6威德：6面积：36}{名称：lego03图片：“ image03.png”，len：12宽度：8面积：96}]
然后您可以让您的程序选择一个随机的乐高玩具。您可以使用randomLego.width语法访问其面积或长度和宽度。
我希望我了解您想要做什么。