如何使用碰撞檢測更改畫布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.