1
Ich benutze ein einfaches Leinwandlayout und versuche herauszufinden, wie ich ein Pong-Skript so modifizieren kann, dass es bei jedem Treffer die Farbe des Balls in Rot ändert zu paddeln und blau jedes Mal, wenn es fehlt.Ändere die Farbe des Kreises in HTML Canvas Pong Animation auf dem Paddel Hit
Der Leinwand-Setup ist die gleiche wie auf dieser Webseite:
ich Context.strokeStyle bin mit der Farbe zu ändern, aber es funktioniert nicht in Zusammenhang ich es aufgegeben habe.
Hier ist mein Code:
HTML:
<HTML>
<BODY>
<canvas id="myCanvas" width="600" height="600" style="border:1px solid #000000;" />
<script src="JQuery.js"></script>
<script src="scripts.js"></script>
</BODY>
Javascript für pong Elemente auf Leinwand:
var Main = {}; // scope a (global) main object
Main.Canvas = document.getElementById('myCanvas'); // 600 x 600 canvas (per HTML)
Main.Context = Main.Canvas.getContext('2d');
Main.MX = 0; // keep track of X mouse position
Main.MY = 0;
Main.CX = 395;
Main.CY = 150;
Main.CRAD = 20;
Main.XINC = 1;
Main.YINC = 1;
Main.OFFSET = 1;
Main.HITS = 0;
Main.MISSES = 0;
// keep track of mouse movements
Main.Canvas.onmousemove = function(event)
{
if (event.offsetX)
{
mouseX = event.offsetX;
mouseY = event.offsetY;
}
else if (event.layerX)
{
mouseX = event.layerX;
mouseY = event.layerY;
}
Main.MX = mouseX;
Main.MY = mouseY;
}
Main.Animate = function()
{
Main.Context.clearRect(0, 0, Main.Canvas.width, Main.Canvas.height); // clear entire canvas
// upper left X & Y coordinates, width & height
// Draw Rectangle
Main.Context.fillStyle = "#FF0000"; // color red
Main.Context.fillRect(0, Main.MY, 25, 50); // position and size (follow mouse)
// Draw Circle
Main.Context.beginPath(); // start the circle
// When ball crosses the paddle width,
// check to see if paddle intersects path
if ((Main.CX-Main.CRAD == 25) && (Main.XINC == -1)) {
// if ball hits paddle, change increment (both X & Y) and change color of circle
if ((Main.CY>Main.MY) && (Main.CY<(Main.MY+50))){
Main.XINC = Main.XINC * (-1);
Main.YINC = Main.YINC * (-1);
Main.HITS = Main.HITS + 1;
Main.Context.beginPath();
Main.Context.strokeStyle = 'red';
} else Main.MISSES = Main.MISSES + 1;
Main.Context.beginPath();
Main.Context.strokeStyle = 'blue';
}
// If we hit a wall in x coordinate, then change x direction
if ((Main.CX < 0+Main.CRAD) || (Main.CX > 600-Main.CRAD))
Main.XINC = Main.XINC * (-1);
Main.CX = Main.CX + (Main.XINC);
// If we hit a wall in y coordinate, then change y direction
if ((Main.CY < 0+Main.CRAD) || (Main.CY > 600-Main.CRAD))
Main.YINC = Main.YINC * (-1);
Main.CY = Main.CY + Main.YINC;
Main.Context.arc(Main.CX, Main.CY, Main.CRAD, 0, 2 * Math.PI); // draw the circle
Main.Context.stroke(); // fill the circle
// Display the location of the mouse and circle
Main.Context.font = "10px Arial";
Main.Context.fillText("Mouse: X: " + Main.MX + " Y: " + Main.MY, 50, 25);
Main.Context.fillText("Ball: X: " + Main.CX + " Y: " + Main.CY, 350, 25);
// Display the score
Main.Context.font = "30px Arial";
Main.Context.fillText("Hits: " + Main.HITS + " Misses: " + Main.MISSES, 50, 100);
requestAnimFrame(function() { Main.Animate(); }); // must call at end of Main.Animate (recursive)
}
window.requestAnimFrame = (function(callback) // part of sample standard framework
{ // for browser compatibilty
return window.requestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.oRequestAnimationFrame
|| window.msRequestAnimationFrame
|| function(callback) { window.setTimeout(callback, 1000/60); }; // control repainting speed
})();
$(document).ready(function() // called when document loads
{
Main.Animate(); // this method is all that executes here
});
Wow. Bin ich wirklich so dumm? –
Danke für die schnelle Lösung. Ich kann nicht glauben, dass ich das verpasst habe! –