Canvas-Spiel, Wie man es erfrischend hält

So machte ich dieses Spiel von Pong für Canvas für ein Projekt von mir, aber ich kann nicht scheinen, es nach dem ersten Rahmen fortzusetzen. Kann mir jemand helfen, dass dieses Spiel nach dem ersten Frame weiter funktioniert? HTML zuerst dann JS.Canvas-Spiel, Wie man es erfrischend hält

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Connor's COMP-106 Pong</title> 

    <script src="js/CCAdventure-Example.js"></script> 
</head> 
<canvas id="gc" width="640" Height="480"></canvas>

p1y=p2y=40; 
     pt=10; 
     ph=100; 
     bx=by=50; 
     bd=6; 
     xv=yv=4; 
     score1=score2=0; 
     ais=2; 
     window.onload=function(){ 
      c=document.getElementById('gc'); 
      cc=c.getContext('2d'); 
      setInterval(update,1000/30); 

     } 
    function reset(){ 
     bx=c.width/2; 
     by=c.height/2; 
     xv=-xv; 
     yv=3; 
    } 
    function update(){ 
     bx+=xv; 
     by+=yv; 
     if(by<0 && yv<0){ 
      yv=-yv; 
     } 
     if(by>c.height && yv>0){ 
      yv=-yv; 
     } 
     if(bx<0){ 
      if(by>p1y && by<p1y+ph){ 
       xv=-xv; 
       dy=by-(p1y+ph/2); 
       yv = dy*0.3; 
      } else{ 
       score2++; 
       reset(); 
      } 
     } 
     if(bx>c.width){ 
      if(by>p2y && by<p2y+ph){ 
       xv=-xv; 
       dy=by-(p2y+ph/2); 
       yv = dy*0.3; 
      } else{ 
       score1++; 
       reset(); 
      } 
     } 
     if(p2y+ph/2<by){ 
      p2y+=ais; 
     } else{ 
      p2y-=ais; 
     } 


     cc.fillstyle='black'; 
     cc.fillRect(0,0,c.width,c.height); 
     cc.fillStyle='white'; 
     cc.fillRect(0,p1y,pt,ph); 
     cc.fillRect(c.width-pt,p2y,pt,ph); 
     cc.fillRect(bx-bd/2,by-bd/2,bd,bd); 
     cc.fillText(score1,100,100); 
     cc.fillText(score2,c.width-100,100); 
    }

Quelle

2016-12-13 TechnicianCON

Wenn Sie in reset, um Ihren Code Anmeldung hinzufügen oder update Sie den Code immer noch sehen kann, ist Zeichnung (und gewinnen).

Der Grund, warum Sie kein Update sehen, ist ein Tippfehler von cc.fillstyle='black'; anstelle von cc.fillStyle='black';, der verhindert, dass Sie Ihren "weißen" Schläger, Ball und Punktestand sehen.

Working JSFiddle

(wechselte ich ein paar Variablennamen, um zu verfolgen, was los war)

PS. Ich bin nicht sicher Leistung, wenn es einen großen Unterschied macht, aber ich mag .clearRect() vor dem Zeichnen meiner Formen wieder, so dass ich im mit einer leeren Leinwand arbeiten.

Quelle

2016-12-13 08:30:29 haxxxton

Ihre eingestellte Zeit war in Ordnung, aber jeder jede Iteration Sie erstellen schwarz cc.fillRect (0,0, C.WIDTH, c.height), die coveres vorherigen weißen Zeichnungen war. Sie sollten cc.fillRect (0,0, c.width, c.height) vor setInterval verschieben und nur einmal zeichnen.

var c,cc; 
 
p1y=p2y=40; 
 
     pt=10; 
 
     ph=100; 
 
     bx=by=50; 
 
     bd=6; 
 
     xv=yv=4; 
 
     score1=score2=0; 
 
     ais=2; 
 
     window.onload=function(){ 
 
      c=document.getElementById('gc'); 
 
      cc=c.getContext('2d'); 
 
\t \t \t cc.fillstyle='black'; 
 
\t \t \t cc.fillRect(0,0,c.width,c.height); 
 
      setInterval(update,1000/30); 
 

 
     }; 
 
    function reset(){ 
 
     bx=c.width/2; 
 
     by=c.height/2; 
 
     xv=-xv; 
 
     yv=3; 
 
    } 
 
    function update(){ 
 
     bx+=xv; 
 
     by+=yv; 
 
     if(by<0 && yv<0){ 
 
      yv=-yv; 
 
     } 
 
     if(by>c.height && yv>0){ 
 
      yv=-yv; 
 
     } 
 
     if(bx<0){ 
 
      if(by>p1y && by<p1y+ph){ 
 
       xv=-xv; 
 
       dy=by-(p1y+ph/2); 
 
       yv = dy*0.3; 
 
      } else{ 
 
       score2++; 
 
       reset(); 
 
      } 
 
     } 
 
     if(bx>c.width){ 
 
      if(by>p2y && by<p2y+ph){ 
 
       xv=-xv; 
 
       dy=by-(p2y+ph/2); 
 
       yv = dy*0.3; 
 
      } else{ 
 
       score1++; 
 
       reset(); 
 
      } 
 
     } 
 
     if(p2y+ph/2<by){ 
 
      p2y+=ais; 
 
     } else{ 
 
      p2y-=ais; 
 
     } 
 

 

 

 
     cc.fillStyle='white'; 
 
     cc.fillRect(0,p1y,pt,ph); 
 
     cc.fillRect(c.width-pt,p2y,pt,ph); 
 
     cc.fillRect(bx-bd/2,by-bd/2,bd,bd); 
 
     cc.fillText(score1,100,100); 
 
     cc.fillText(score2,c.width-100,100); 
 
    }

<canvas id="gc" width="640" Height="480"></canvas>

Quelle

2016-12-13 08:29:49

Canvas-Spiel, Wie man es erfrischend hält

Antwort

Verwandte Themen