<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.createjs.com/createjs-2015.05.21.min.js"></script>
<script src="script.js"></script>
</head>
<body >
<canvas id="demoCanvas" width="500" height="300" style="border:1px solid black"></canvas>
</body>
</html>
// Code goes here
window.onload = function() {
// code here.
var stage = new createjs.Stage("demoCanvas");
var radius = 10;
var shapes = [];
var reibing =0.1;
stage.enableMouseOver(10);
stage.enableDOMEvents(true);
createjs.Touch.enable(stage);
var circle = new createjs.Shape();
circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, radius);
circle.x = 100;
circle.y = 120;
circle.vx=100;
circle.vy=0;
circle.lastX=100;
circle.lasty=120;
circle.right = true;
circle.up = true;
shapes.push(circle);
var tween = createjs.Tween.get(circle).to({
x: 450,
y: 200
}, (0.5 + i * 0.04) * 1500, createjs.Ease.bounceOut);
stage.addChild(circle);
var square = new createjs.Shape();
square.graphics.beginFill("Red").drawCircle(0, 0, radius);
square.x = 250;
square.y = 160;
square.vx=100;
square.vy=50;
square.right = true;
square.up = true;
stage.addChild(square);
shapes.push(square);
stage.update();
square = new createjs.Shape();
square.graphics.beginFill("Red").drawCircle(0, 0, radius);
square.x = 180;
square.y = 230;
square.vx=100;
square.vy=100;
square.right = true;
square.up = true;
stage.addChild(square);
shapes.push(square);
stage.update();
square = new createjs.Shape();
square.graphics.beginFill("Black").drawCircle(0, 0, radius);
square.x = 290;
square.y = 160;
square.vx=30;
square.vy=0;
square.right = false;
square.up = false;
stage.addChild(square);
shapes.push(square)
stage.update();
square = new createjs.Shape();
square.graphics.beginFill("Pink").drawCircle(0, 0, radius);
square.x = 160;
square.y = 145;
square.vx=100;
square.vy=0;
square.right = true;
square.up = false;
stage.addChild(square);
shapes.push(square)
stage.update();
var square2 = new createjs.Shape();
square2.graphics.beginFill("Green").drawCircle(0, 0, radius);
square2.x = 400;
square2.y = 45;
square2.vx=-10;
square2.vy=0;
square2.right = true;
square2.up = false;
stage.addChild(square2);
shapes.push(square2);
stage.update();
square2 = new createjs.Shape();
square2.graphics.beginFill("Green").drawCircle(0, 0, radius);
square2.x = 400+radius*2+1;
square2.y = 45;
square2.vx=-10;
square2.vy=0;
square2.right = true;
square2.up = false;
stage.addChild(square2);
shapes.push(square2);
stage.update();
square2 = new createjs.Shape();
square2.graphics.beginFill("Green").drawCircle(0, 0, radius);
square2.x = 400+2*(radius*2)+2;
square2.y = 45;
square2.vx=-10;
square2.vy=0;
square2.right = true;
square2.up = false;
stage.addChild(square2);
shapes.push(square2);
stage.update();
square2 = new createjs.Shape();
square2.graphics.beginFill("Green").drawCircle(0, 0, radius);
square2.x = 400-radius*2-1;
square2.y = 45;
square2.vx=-100;
square2.vy=0;
square2.right = true;
square2.up = false;
stage.addChild(square2);
shapes.push(square2);
stage.update();
createjs.Ticker.addEventListener("tick", tick);
createjs.Ticker.setFPS(60);
stage.addEventListener("stagemousedown", handleMouseMove);
for (var i = 0; i < shapes.length; i++) {
//Do something
shapes[i]
}
function handleMouseMove(event) {
console.log("Mausklick")
/*
createjs.Tween.get(circle, {
override: true
}).to({
x: stage.mouseX,
y: stage.mouseY
}, (0.5 + i * 0.04) * 1500, createjs.Ease.circOut);
FUCK TWEEN */
circle.vx=(circle.x-stage.mouseX)*-1
circle.vy=(circle.y-stage.mouseY)*-1
stage.update();
}
function tick(event) {
for (var i = 0; i < shapes.length; i++) {
if (shapes[i].x > stage.canvas.width - radius) {
console.log("Rechts angedotzt")
shapes[i].right = false;
shapes[i].vx*=-1;
shapes[i].x+= event.delta / 1000 * shapes[i].vx;
reiberino(shapes[i])
} else if (shapes[i].x < radius) {
console.log("Links angedotzt")
shapes[i].right = true;
shapes[i].vx*=-1;
shapes[i].x+= event.delta / 1000 * shapes[i].vx;
reiberino(shapes[i])
}
if (shapes[i].y > stage.canvas.height - radius) {
console.log("Unten angedotzt")
shapes[i].up = true;
shapes[i].vy*=-1;
shapes[i].y+= event.delta / 1000 * shapes[i].vy;
reiberino(shapes[i])
} else if (shapes[i].y < radius) {
console.log("Oben angedotzt")
shapes[i].up = false;
shapes[i].vy*=-1;
shapes[i].y+= event.delta / 1000 * shapes[i].vy;
reiberino(shapes[i])
}
for (var x = 0; x < shapes.length; x++) {
var xDist = shapes[i].x - shapes[x].x;
var yDist = shapes[i].y - shapes[x].y;
var distance = Math.sqrt(xDist * xDist + yDist * yDist);
if (distance < radius + radius) {
// Collision
console.log("Kollision!")
checkCollision(shapes[i],shapes[x]);
/*if (shapes[i].x < shapes[x].x) {
shapes[x].vx*=-1;
shapes[i].vx*=-1;
shapes[x].x-=xDist/4;
/*
if(shapes[i].vx>shapes[x].vx){
shapes[i].vx=shapes[x].vx;
}else if(shapes[i].vx<shapes[x].vx){
}
shapes[i].right = !shapes[i].right;
shapes[x].right = !shapes[x].right;
shapes[x].x+=xDist/2;
if(shapes[i]==circle){
//shapes[x].x+=5;
}
}else if (shapes[i].x > shapes[x].x) {
/*
shapes[i].right = !shapes[i].right;
shapes[x].right = !shapes[x].right;
shapes[x].x-=xDist/2;
shapes[x].vx*=-1;
shapes[i].vx*=-1;
shapes[x].x-=xDist/4;
}
if (shapes[i].y < shapes[x].y) {
shapes[i].up = !shapes[i].up;
shapes[x].up = !shapes[x].up;
shapes[x].y+=yDist/2;
}else if (shapes[i].x > shapes[x].x) {
shapes[i].up = !shapes[i].up;
shapes[x].up = !shapes[x].up;
shapes[x].y-=yDist/2;
}*/
}
}
reiberino(shapes[i])
shapes[i].x += event.delta / 1000 * shapes[i].vx;
shapes[i].y += event.delta / 1000 * shapes[i].vy;
/*
if (shapes[i].right) {
shapes[i].x += event.delta / 1000 * shapes[i].vx;
} else {
shapes[i].x -= event.delta / 1000 * shapes[i].vx;
}
if (!shapes[i].up) {
shapes[i].y += event.delta / 1000 * shapes[i].vx;
} else {
shapes[i].y -= event.delta / 1000 * shapes[i].vx;
}*/
/*
if (square.x > stage.canvas.width-radius) {
square.right=false;
} else if (square.x < radius) {
square.right=true;
}
if (square.right) {
square.x += event.delta / 1000 * 100;
} else {
square.x -= event.delta / 1000 * 100;
}
*/
stage.update();
}
function checkCollision(s1,s2){
var uvx=s1.vx;
s1.vx=s2.vx;
s2.vx=uvx;
var uvy=s1.vy;
s1.vy=s2.vy;
s2.vy=uvy;
}
function checkCollision2(s1,s2){
if (s1.vx > 0) {
var uvx = s1.vx;
s1.vx = s2.vx + reibing;
if (s2.vx > 0)
s2.vx = uvx + reibing;
else if (s2.vx < 0)
s2.vx = uvx - reibing;
} else if (s1.vx < 0) {
uvx = s1.vx;
s1.vx = s2.vx - reibing;
if (s2.vx > 0)
s2.vx = uvx + reibing;
else if (s2.vx < 0)
s2.vx = uvx - reibing;
s2.vx = uvx;
}
if (s1.vy > 0) {
var uvy = s1.vy;
s1.vy = s2.vy + reibing;
if (s2.vy > 0)
s2.vy = uvy + reibing;
else if (s2.vy < 0)
s2.vy = uvy - reibing;
} else if (s1.vy < 0) {
uvy = s1.vy;
s1.vy = s2.vy - reibing;
if (s2.vy > 0)
s2.vy = uvy + reibing;
else if (s2.vy < 0)
s2.vy = uvy - reibing;
s2.vy = uvy;
}
}
function reiberino(s1){
if(s1.vx<0){
s1.vx+=reibing;
}else if(s1.vx>0){
s1.vx-=reibing;
}
if(s1.vy<0){
s1.vy+=reibing;
}else if(shapes[i].vy>0){
s1.vy-=reibing;
}
}
}
};
/* Styles go here */