より多くのスクリプトタグを作成せずにキャンバスにもっと描く

私はエコロジーシミュレーションを作成しようとしてきましたが、今のところ良くなっています。以下のコードはうまくいきます。手動で行うのではなく、コードでキャンバス上にもっと多くのアイテムを描画する方が簡単なのかどうか疑問に思っています。私がそれをやっているところで、私はコードに多くのものを追加するので（例えば、移動、検出、再現、追跡、実行など）、遅れを考慮します。このより多くのスクリプトタグを作成せずにキャンバスにもっと描く

//This tag will regulate the spawning of new sheep/wolves 
 
var totalWolves = 0; 
 
var totalSheep = 0; 
 
var canavs = document.getElementById("canvas"); 
 
var body = document.getElementById("body"); 
 

 
//styler 
 
body.style.overflow = "hidden"; 
 
body.style.margin = "0px"; 
 
canvas.style.backgroundColor = "black"; 
 

 
function spawnWolves(){ 
 
\t totalWolves++; 
 
\t var name = "wolf" + totalWolves; 
 
\t var scrpt = document.createElement("SCRIPT"); 
 
\t document.body.appendChild(scrpt); 
 
\t scrpt.setAttribute("id", name); 
 
\t var script = document.getElementById(name); 
 
\t script.innerHTML = "var rand3 = Math.floor(Math.random() * 100) + 1; var rand4 = Math.floor(Math.random() * 100) + 1; var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.fillStyle = 'red'; context.fillRect(rand3, rand4, 10, 10); context.fill();"; 
 
\t 
 
} 
 
spawnWolves(); 
 
spawnWolves(); 
 
spawnWolves();

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>AI spawn test</title> 
 
</head> 
 
<body id="body"> 
 
<canvas id="canvas" width="1366px" height="768px"/> 
 
<script> 
 

 
</script> 
 
</body> 
 
</html>

出典

2017-05-27 Liam Sperry

...

は、次のコードを見てみてください。

<!DOCTYPE html> 
 
    <html> 
 
    <title>AI spawn test</title> 
 
    <canvas id="canvas" width="110" height="110"></canvas> 
 
    <script> 
 
    var ctx = canvas.getContext("2d"); 
 
    var drawRect=function(rects){ 
 
    for (var i=1; i<=rects; i++){ 
 
     var rand3=Math.floor(Math.random() * 100) + 1; 
 
     var rand4=Math.floor(Math.random() * 100) + 1; 
 
     ctx.fillStyle='red'; 
 
     ctx.fillRect(rand3, rand4, 10, 10) 
 
    } 
 
    } 
 
    drawRect(20); 
 
    </script>

出典

2017-05-27 11:46:37

'複製' のこのタイプをご覧いただきありがとうございますloopを使用して行われます。いくつかのループタイプがありますが、その説明は広すぎます。ネットを閲覧することができます。

私は以下の2つの例を挙げました：forループとwhileループです。

//This tag will regulate the spawning of new sheep/wolves 
 
var totalWolves = 0; 
 
var totalSheep = 0; 
 
var canavs = document.getElementById("canvas"); 
 
var body = document.getElementById("body"); 
 

 
//styler 
 
body.style.overflow = "hidden"; 
 
body.style.margin = "0px"; 
 
canvas.style.backgroundColor = "black"; 
 

 
function spawnWolves(){ 
 
\t totalWolves++; 
 
\t var name = "wolf" + totalWolves; 
 
\t var scrpt = document.createElement("SCRIPT"); 
 
\t document.body.appendChild(scrpt); 
 
\t scrpt.setAttribute("id", name); 
 
\t var script = document.getElementById(name); 
 
\t script.innerHTML = "var rand3 = Math.floor(Math.random() * 100) + 1; var rand4 = Math.floor(Math.random() * 100) + 1; var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.fillStyle = 'red'; context.fillRect(rand3, rand4, 10, 10); context.fill();"; 
 
\t 
 
} 
 

 
for(var i=0; i<12; i++) 
 
{ 
 
    spawnWolves(); 
 
} 
 

 
var maxWolves=9; 
 
while(totalWolves < maxWolves) 
 
{ 
 
    spawnWolves(); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>AI spawn test</title> 
 
</head> 
 
<body id="body"> 
 
<canvas id="canvas" width="1366px" height="768px"/> 
 
<script> 
 

 
</script> 
 
</body> 
 
</html>

その内部カウンタiは、0から12になり、正確に12回の関数を呼び出しますまで、最初のループが実行されます。

条件totalWolves < maxWolvesが真である限り、2番目のループが実行されます。 totalWolvesは、機能を増やすカウンターで、ループを停止させるときの制限はmaxWolvesです。

これらの2つの例が次々に追加されているため、次の2つの例が次々と追加されるためです。最初の実行後、12 < 9が偽であるため、すでに12のオオカミがあり、2番目のループは入力されません。あなたのソリューションは非常に複雑に思える

出典

2017-05-27 11:22:48

はすでに12オオカミ –

おかげで、私が知っているよう習慣は何かを、あなたの第二のループに注意してください、私はOPのために説明を追加します。 –

キャンバスに描くためのスクリプトを作成することは冒険的な方法です.... –

より多くのスクリプトタグを作成せずにキャンバスにもっと描く

答えて

関連する問題