Hallo Leute,
Ich versuche folgende JavaScript Datei zu analysieren:
Es wir in der folgenden HTML Datei aufgerufen:
Was ich nicht verstehe ist, dass dem array nur ein einziges mal (!) in der Zeile 16 ein "Wert" zugewiesen wird. Die Konsolenausgabe in der Zeile jedoch werte bis zu (wenn ich mich recht entsinne) 8 oder 9 ausgegeben hat. Ich weiß jedoch wie dieser hohen Wert zustande kommt.
Ich hoffe ihr könnt mir helfen.
Lg Tron36
Ich versuche folgende JavaScript Datei zu analysieren:
Code:
var rockets = [];
var sparkles = [];
var moving = true;
var gravity = 0.4;
function setup() {
// put setup code here
createCanvas(windowWidth, windowHeight);
background(0);
strokeWeight(1);
colorMode(HSB);
var thisRocket = new rocket();
rockets.push(thisRocket);
console.log("call setup");
}
//-----------------------------------------------------------------------------
function draw() {
//-----------------------------------------------------------------------------
// put drawing code here
translate(width / 2, height);
background('rgba(0,0,0, 0.1)');
for (var i = rockets.length - 1; i >= 0; i--)
{
console.log(rockets.length);
if(rockets[i].type == "Exploded")
rockets.splice(i,1);
else
rockets[i].draw();
}
for (var i = sparkles.length - 1; i >= 0; i--)
{
if(sparkles[i].position.y > 0 || sparkles[i].brt <= 0)
sparkles.splice(i,1);
else
sparkles[i].draw();
}
if (int(random(0, 12)) == 0)
{
var thisRocket = new rocket();
rockets.push(thisRocket);
}
}
//-----------------------------------------------------------------------------
function rocket(position, speed, type, sparkler, afterblow)
//-----------------------------------------------------------------------------
{
// stroke(255);
this.position = createVector(int(random(-width / 2, width / 2)), 0);
this.speed = createVector(random(-1,1), -random(10,22));
this.sparkler = round(random(0,1)) == 0;
this.afterblow = -1;
this.fuse = random(-1,1);
this.hue = round(random(0,360));
this.type = "simple";
//-----------------------------------------------------------------------------
this.draw = function()
//-----------------------------------------------------------------------------
{
stroke(255);
if(this.fuse < this.speed.y || this.afterblow >= 0)
this.explode();
if (this.sparkler)
{
sparkleDir = random(0, TWO_PI);
sparkleVel = random(0,1);
sparkleSpd = createVector(sparkleVel * cos(sparkleDir), sparkleVel * sin(sparkleDir))
thisSparkle = new sparkle(createVector(this.position.x+sparkleSpd.x, this.position.y+sparkleSpd.y), sparkleSpd.copy(),random(50,75), round(random(20,40)), round(random(0,30)));
sparkles.push(thisSparkle);
}
stroke(this.hue+round(random(-10,+10)), random(0,20), 90);
point(this.position.x,this.position.y);
this.position.add(this.speed);
this.speed.y = this.speed.y + gravity;
}
//-----------------------------------------------------------------------------
this.explode = function()
//-----------------------------------------------------------------------------
{
for (var i = 0; i < 100; i++)
{
sparkleDir = random(0, TWO_PI);
sparkleVel = random(0,5);
sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
thisSparkle = new sparkle(this.position.copy(), sparkleSpd.copy(), random(1,3), this.hue+round(random(-10,+10)), 0);
sparkles.push(thisSparkle);
}
this.type = "Exploded";
}
}
//--------------------------------------------------------------------------
function sparkle(position, speed, fade, hue, sat, type)
{
this.position = position.copy();
this.speed = speed.copy();
this.fade = (fade == undefined ? 5 : fade);
this.hue = (hue == undefined ? 360 : hue);
this.sat = (sat == undefined ? 0 : sat);
this.type = (type == undefined ? "default" : type);
this.brt = 255;
this.burntime=0;
//----------------------------------------------------------------
this.draw = function()
//----------------------------------------------------------------
{
stroke(this.hue, this.sat, this.brt);
newPositionX = this.position.x + log(this.burntime) * 8 * this.speed.x;
newPositionY = this.position.y + log(this.burntime) * 8 * this.speed.y + this.burntime * gravity;
point(newPositionX, newPositionY);
this.brt = this.brt - fade;
this.burntime++;
}
}
//--------------------------------------------------------------------------
function touchStarted()
{
if(moving)
{
moving = false;
strokeWeight(1);
fill(255);
rect(width/2-30, -height+20, 10, 30);
rect(width/2-50, -height+20, 10, 30);
noLoop();
}
else
{
moving = true;
loop();
}
// prevent default
return false;
}
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
<style> body {padding: 0; margin: 0;} </style>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.sound.min.js"></script>
<script src="rocket.js"></script>
</head>
<body>
</body>
</html>
Was ich nicht verstehe ist, dass dem array nur ein einziges mal (!) in der Zeile 16 ein "Wert" zugewiesen wird. Die Konsolenausgabe in der Zeile jedoch werte bis zu (wenn ich mich recht entsinne) 8 oder 9 ausgegeben hat. Ich weiß jedoch wie dieser hohen Wert zustande kommt.
Ich hoffe ihr könnt mir helfen.
Lg Tron36