0
私は現在、「反応ゲーム」の一種であることを意図したプロジェクトをJavascriptで作成しています。 「開始」ボタンを押すと、色、サイズ、位置（マージン）、形状（ボックスやサークル）ごとにヘルパーメソッドで決められたシェイプが画面に表示されます。目標は、形状を急にクリックすることで、ページは時間を印刷します。新しい図形が表示され、サイクルが繰り返されます。表示する形にすることができません
ただし、「開始」ボタンを押すと、画面に何も表示されません。形はどこにも見えません。
誰でも形状を表示させることができますか？私はそれがスタイルシートや何かと関係があると思うが、私はあまりよく分からない。
<html>
<head>
<title>Reaction Tester</title>
</head>
<body>
<h1>Test Your Reactions!</h1>
<p>Click on the boxes and circles as quickly as you can!</p>
<h2 id="recorded-time"></h2>
<button id="start-button">Begin!</button>
<div id="current-shape"></div>
<script type="text/javascript">
var beginTime = 0.0; //default value
document.getElementById("start-button").onclick = function() {
document.getElementById("start-button").style.display = "none";
newShape();
}
function decideShape() { //chooses between a circle or box(square)
var x = Math.random();
if(x < 0.5) {
return("circle");
} else {
return("box");
}
}
function decideColor() { //chooses between a list of 8 colors
var x = Math.random();
if(x < 0.125) {
return("red");
} else if(x < 0.25) {
return("blue");
} else if(x < 0.375) {
return("yellow");
} else if(x < 0.5) {
return("green");
} else if(x < 0.625) {
return("purple");
} else if(x < 0.75) {
return("black");
} else if(x < 0.875) {
return("gray");
} else {
return("#00FFFF"); //cyan
}
}
function decideSize() { //self explanatory
var value; //circle - radius, box - half of side length
value = Math.floor(Math.random() * 75) + 25; //diameter/side length set to be between 50 and 199
return value;
}
function decideMargin(size) { //depends on size of shape
var value;
value = Math.floor(Math.random()*(400 - size)) + size;
return value;
}
document.getElementById("current-shape").onclick = function() {
newShape();
}
function beginTimer() {
var bT = new Date();
beginTime = bT;
}
function stopTimer() {
var endTime = new Date();
var elapsedTime = endTime - beginTime;
document.getElementById("recorded-time").innerHTML = "Your time: " + (elapsedTime/1000.0) + " seconds";
}
function newShape() {
if(beginTime != 0.0) {
stopTimer();
}
var nextShape = decideShape();
var nextColor = decideColor();
var nextSize = decideSize();
var nextLeftMargin = decideMargin(nextSize);
var nextTopMargin = decideMargin(nextSize);
document.getElementById("current-shape").style.backgroundColor = nextColor;
document.getElementById("current-shape").style.marginLeft = nextLeftMargin;
document.getElementById("current-shape").style.marginTop = nextTopMargin;
if(nextShape = "circle") {
document.getElementById("current-shape").style.borderRadius = 50;
} else { //nextShape = "box"
document.getElementById("current-shape").style.borderRadius = 0;
}
beginTimer();
}
</script>
</body>
</html>
私たちはあなたのプログラムをテストできるようにするために必要なすべてのコードを記載してください。 （あなたが削除したヘルパーメソッドを含めてください） – leroydev
ありがとうございます。 –
ブラウザの開発コンソールにJSエラーがありますか？ – nnnnnn