1
私は単純なキャンバスレイアウトを使用しています。ヒットするたびにボールの色が赤に変わるようにpongスクリプトを変更する方法を理解しようとしていますそれを逃すたびにパドルとブルーに。HTMLキャンバスでサークルの色を変更するPong Animation on Paddleヒット
キャンバスのセットアップは、このWebページ上と同じです：
私は色を変更するContext.strokeStyleを使用していますが、それは私がそれを配置したコンテキストで動作していません。ここで
は私のコードです：
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をキャンバス上にピンポン要素に対して：
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
});
ワウ。私は本当にこのばか？ –
クイックフィックスをお寄せいただきありがとうございます。私はそれを逃したと信じられない！ –