如何使用碰撞检测更改画布fillStyle？
[英]How to change canvas fillStyle with collision detection?
问题描述
因此，我按照本教程制作了一款Breakout游戏， 该游戏相当简单，但是可选的练习之一是让球在碰到画布一侧时改变其颜色。 该网站没有告诉您如何执行此操作，并且在谷歌搜索几个小时后，我仍然找不到任何答案。
我刚刚开始学习Javascript，这是我正在为大学制作的一款简单游戏的练习，其思想是在与墙壁碰撞时，如何更改颜色的知识或多或少地可以转换为更改精灵。
为了简单起见，下面是仅使球四处移动并弹起墙壁的代码：
var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var ballRadius = 10; var x = canvas.width/2; var y = canvas.height-30; var dx = 2; var dy = -2; function drawBall() { ctx.beginPath(); ctx.arc(x, y, ballRadius, 0, Math.PI*2); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawBall(); if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) { dx = -dx; } if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) { dy = -dy; } x += dx; y += dy; } setInterval(draw, 10);
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Gamedev Canvas Workshop</title> <style> * {padding: 0; margin: 0;} canvas { background: #eee; display: block; margin: 0 auto;} </style> </head> <body> <canvas id="myCanvas" width="480" height="320"></canvas> <script> </script> </body> </html>
练习指定每次碰撞时将球更改为新的随机颜色，但是出于我的目的，我只需要知道如何使球更改一次即可。
2 个解决方案
解决方案1
1 2016-02-22 01:25:10
在if语句的代码底部附近，您会看到，当对它进行评估时，它将dx的值设置为负值，这是球在x或y轴上改变方向的位置，可用于检测碰撞。
var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var ballRadius = 10; var x = canvas.width / 2; var y = canvas.height - 30; var dx = 2; var dy = -2; var color = 'green'; function drawBall(contact) { ctx.beginPath(); ctx.arc(x, y, ballRadius, 0, Math.PI * 2); color = (contact === true ? (color === 'green' ? 'pink' : 'green') : color); ctx.fillStyle = color; ctx.fill(); ctx.closePath(); } function draw() { var contact = false; ctx.clearRect(0, 0, canvas.width, canvas.height); if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) { dx = -dx; contact = true; } if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) { dy = -dy; contact = true; } drawBall(contact); x += dx; y += dy; } setInterval(draw, 10);
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Gamedev Canvas Workshop</title> <style> * { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; } </style> </head> <body> <canvas id="myCanvas" width="480" height="320"></canvas> <script> </script> </body> </html>
解决方案2
1 已采纳 2016-02-22 01:34:48
这是一种简单的方法。
var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var ballRadius = 10; var x = canvas.width / 2; var y = canvas.height - 30; var dx = 2; var dy = -2; var color = "#0095DD" function drawBall() { ctx.beginPath(); ctx.arc(x, y, ballRadius, 0, Math.PI * 2); ctx.fillStyle = color; ctx.fill(); ctx.closePath(); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawBall(); if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) { dx = -dx; color = "#" + ((1 << 24) * Math.random() | 0).toString(16); } if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) { dy = -dy; color = "#" + ((1 << 24) * Math.random() | 0).toString(16); } x += dx; y += dy; } setInterval(draw, 10);
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Gamedev Canvas Workshop</title> <style> * { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; } </style> </head> <body> <canvas id="myCanvas" width="480" height="320"></canvas> <script> </script> </body> </html>
如何使用javascript或jquery更改canvas元素的fillStyle？
[英]How to change the fillStyle of a canvas element using javascript or jquery?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.