Depot43-Unterlagen - ZIM Coding 3

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>Zim-CreateJS-Animation - ZIM Coding 3</title>
      <script src="https://d309knd7es5f10.cloudfront.net/createjs.min.js"></script>
      <script>
        var zon = true; 
        var zns = false; 
      </script>
    <script src="https://d309knd7es5f10.cloudfront.net/zim_6.7.3.js"></script>

    <script>
	var scaling = "fit"; 
	var width = 600; 
	var height = 300;
	var color = "#ccc";
	var frame = new zim.Frame(scaling, width, height, color); 

	frame.on("ready", function() {
	zog("ready from ZIM Frame");

		var stage = frame.stage;
		var stageW = frame.width;
		var stageH = frame.height;
		var klick = 0;

		var starterButton = new zim.Button(200,60,"Start","darkgrey","red")
			starterButton.center(stage); 
			starterButton.y = 20;
			starterButton.on("click", function() {
				if(klick == 0) {
				circle = new zim.Circle(30, "red", "white", 3); 
				circle.center(stage);
				circle.x = zim.rand(circle.width/2, stageW-circle.width/2); 
				circle.y = zim.rand(circle.width/1, stageH-circle.width/1); 
                                   circle.animate({x:stage.mouseX, y:stage.mouseY}, 2500);
				klick = 1;
				}
			stage.update();
		});
		var removerButton = new zim.Button(200,60,"Stop","darkgrey","red")
			removerButton.center(stage); 
			removerButton.y = 220;
			removerButton.on("click", function() {
			klick = 0;
			stage.removeChild(circle);
			stage.update();
		});
		stage.update();
	});
    </script>
    <style>

    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
    <body>

    </body>
</html>


 

            

Hinweis

Innerhalb einer for-Schlaufe die 5x durchlaufen wird ein "circle" erstellt. Es werden also 5 Kreise gebildet.

for (var i=0; i<5; i++) { ... }

circle = new zim.Circle(50, "red", "white", 3);

Sie werden im Zentrum platziert.

circle.center(stage);

Nun wird jeder Kreis mit einem Zufallszahl "rand()" auf eine andere Position innerhalb der Bühne gesetzt.

circle.x = zim.rand(circle.width/2, stageW-circle.width/2);