个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在使用一个简单的 Canvas 布局，并试图弄清楚如何修改 pong 脚本，以便它每次击中球时将球的颜色更改为红色，每次未命中时将颜色更改为蓝色。
Canvas 设置与此网页相同:
我正在使用 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>
Canvas 上的 pong 元素的 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
});
最佳答案
您只是在 else 上缺少打开和关闭 {} 括号，请参阅 fiddle :https://jsfiddle.net/5wwg1q5j/61/
else{
Main.MISSES = Main.MISSES + 1;
Main.Context.beginPath();
Main.Context.strokeStyle = 'blue';
}
关于javascript - 在桨击中更改 HTML Canvas Pong 动画中的圆圈颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36803343/
26
4
0
我遇到了一个问题，我无法将网络请求发送到我创建的 Docker 容器。我已经公开了正确的端口，所以我不确定这里可能有哪些其他问题。 我有一台服务器在容器中运行 alice在 localhost:100
在下面最后一行的方法中，我总是遇到异常: System.OverflowException: Value was either too large or too small for an Int32.
我正在关注 realpython article about running Flask on Ubuntu .建议在文章中检查 nginx 已通过导航到 http://localhost:8000/
给定一个条件，我想搜索一个元素列表并返回第一个达到条件的元素和前一个元素。 在 C/C++ 中，这很容易: int i = 0; for(;;i++) if (arr[i] == 0) break;
我正在使用 Firebase Firestore 我想从数据库中删除数据..删除数据工作正常，但我的进度对话框卡住了。我想我必须使用工作线程，但我不知道如何使用。 db = FirebaseFire
我按照 this page 上的说明进行操作创建推送通知。我之前实际上已经做过一次并且能够让它工作(几周前)，花了一些时间，我想我现在才再次做这个教程作为复习，出于某种原因，我可以'甚至获取代码以点击
我在大学学习Java，这是我的任务。任务是创建一个由颜色方块组成的x x y网格，每个网格在单独的线程中运行，并且每k ms要么将其颜色更改为随机的颜色，要么对其邻居的颜色求平均。 现在，如果我创建一
我有一台服务器，它不断地从自身获得随机命中，IP 读取为 127.0.0.1 .我知道有各种各样的程序可以做到这一点，但服务器是带有 sendmail 和 monit 的最低限度的 LAMP 服务器。
我正在使用 sqlite 数据库并且我在这个要点中声明了模型 https://gist.github.com/mmahesh/7245561 我添加了一个带有事务管理器的模型实例作为 with tra
我是一名优秀的程序员,十分优秀！