1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:

/** surrounding ****************************************************************/
  var canvas = document.getElementById("gameScreen");
  var context = canvas.getContext("2d");
  var imgBrick = document.getElementById('img_brick');
  
   canvas.width = 1020;
   canvas.height = 700;
  
   this.width = 200;
   this.height = 20;
   this.position = {
      x: canvas.width/2 - this.width/2,
      y: canvas.height - this.height - 10,
      };
   this.maxSpeed = 10;
   this.speed = 0;
   
/** paddleMOVE ********************************************************************/  

  function gameLoop() {
    
    animate();
    update();
    drawBALL();
    changeBALL();
    requestAnimationFrame(gameLoop);
    }
  
  function animate() {
      
    requestAnimationFrame(animate);
    context.clearRect(0, 650, canvas.width, canvas.height);
    context.fillStyle = "black";
    context.fillRect( this.position.x, this.position.y, this.width, this.height );
      
    }
  
  function update() {
    
    this.position.x += this.speed;
    if (this.position.x < 0) {this.position.x = 0}
    if (this.position.x > canvas.width - this.width) {this.position.x = canvas.width - this.width}
    
  }
  
    requestAnimationFrame(gameLoop); /* statt dem Funktionsaufruf **/

/** paddleSTEER **************************************************************************/
  
  function moveLeft() {
    this.speed = -this.maxSpeed;
    }
    
  function moveRight() {
    this.speed = this.maxSpeed;
  }
  
  function stopp() {
    this.speed = 0;
  }
  
  document.addEventListener("keydown", event => {
    
    if (event.isComposing || event.keyCode === 37) {
    
      moveLeft();
      
      }
      
    if (event.isComposing || event.keyCode === 39) {
      
      moveRight();
      
    }});

  document.addEventListener("keyup", event => {
    
    if (event.isComposing || event.keyCode === 37) {
      
      if(this.speed < 0) {stopp();}
      
      }
      
    if (event.isComposing || event.keyCode === 39) {
      
      if(this.speed > 0) {stopp();}
      
    }});


/** ball & rectangle cooperation ************************************************************************************************/
  
  var x = 200;
  var y = 200;
  var vx = 8;
  var vy = 8;

  var radius = 20;
  
  
  
  function drawBALL() {
    
    x += vx;
    y += vy;

    [b]context.clearRect(0, 0, canvas.width, 650);[/b]  /*durch dieses clearRect ist das Image, das ich in der  Funktion brick() lade, nicht sichtbar..was tun?**/
   context.fillStyle = "#FF0080";
    context.beginPath();
    context.arc(x, y, radius, 0, Math.PI*2, true);
    context.closePath();
    context.fill();
    
      } 

  
  function changeBALL() {
      
      var bottomofBALL = y + radius;
      var topofRECT = this.position.y;
      
      var leftRECT =  this.position.x;
      var rightRECT = this.position.x + this.width;
  
    
      if ((x + radius) >= canvas.width) {vx = -vx}
      if ((x - radius) <= 0) {vx = -vx}
      if ((y - radius) <= 0) {vy = -vy}
    
    
      
      if (( bottomofBALL >= topofRECT) && (x >= leftRECT) && (x  <= rightRECT)){vy = -vy}
      
      if ( y > canvas.height) {vy = 50}
    }


/** BRICK ************************************************************************************************/
  
function brick() {
  
  imgBrick.onload = function() {
    context.drawImage(imgBrick, 10, 10, 100, 100)
  }
}

brick();]