Question

所以我在this tutorial之后制作了一个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>

练习指定每次碰撞时让球变为新的随机颜色，但就我的目的而言，我只需要知道如何让球改变一次。

Answer 1

在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>

Answer 2

这是一种简单的方法。

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>

如何通过碰撞检测更改画布fillStyle？

2 个答案: