Autor Beitrag
UndercoverKEKS
Hält's aus hier
Beiträge: 1



BeitragVerfasst: Do 30.04.20 17:20 
Serwus liebe Community!
Mit dem folgenden Code plane ich ein Game (nichts Besonderes). I werde die JS-Datei unten einfügen. Wär cool, wenn da mal jemand drüberschauen könnte. Durch das clearRect() in der Funktion drawBall() kann ich logischerweise das Image, welche ich in der Funktion brick() lade, nicht sehen. Ich bitte um Hilfe! Gibt es vielleicht sogar Alternativen zu clearRect() ?? Hoffe,dass meine Fragestellung verständlich genug ist, zumal die Übersicht im Code durch die Kommentare gewärleistet sein soll.
Danke, mfg UndercoverKEKS
ausblenden volle Höhe JavaScript-Quelltext
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(0650, 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(00, 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();]


Moderiert von user profile iconNarses: JS-Tags hinzugefügt