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



BeitragVerfasst: Do 30.04.20 17:20 
Servus liebe Community!
Mit dem folgenden Code plane ich ein Game (nichts Besonderes). Ich werde die JS-Datei unten einfügen. Wäre 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ährleistet 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
Moderiert von user profile iconTh69: JS-Tags (im obigen Text) hinzugefügt
GuaAck
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starofftopic star
Beiträge: 335
Erhaltene Danke: 31

Windows 8.1
Delphi 10.3 Comm. Edition
BeitragVerfasst: So 20.12.20 18:43 
Kannst Du nicht einfach das Image nach dem clearRect() neu zeichnen wie in der Function brick()?

Gruß
GuaAck

Moderiert von user profile iconTh69: Code-Tags hinzugefügt