我正在制作这样的游戏：
黄色笑脸必须从红色笑脸中逃脱，当黄色笑脸撞到边界时游戏结束，当红色笑脸撞到边界时，它们应该以它们来的相同角度反弹回来，如下图所示：
每10秒一个新的红色笑脸出现在大圆圈中，当红色笑脸碰到黄色时，游戏结束，红色笑脸的速度和起始角度应该是随机的。我用箭头键控制黄色笑脸。我遇到的最大问题是：创建多个红色笑脸并从边界反射红色笑脸以它们来的角度。我不知道如何给一个红色笑脸一个起始角度，并随着它出现的角度反弹它。我会很高兴任何提示！html 文件中的 Mycanvas 大小为 700x700。
我的js源代码：
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
// Object containing some global Smiley properties.
var SmileyApp = {
radius: 15,
xspeed: 0,
yspeed: 0,
xpos:200, // x-position of smiley
ypos: 200 // y-position of smiley
};
var SmileyRed = {
radius: 15,
xspeed: 0,
yspeed: 0,
xpos:350, // x-position of smiley
ypos: 65 // y-position of smiley
};
function drawBigCircle() {
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radiusBig = 300;
ctx.beginPath();
ctx.arc(centerX, centerY, radiusBig, 0, 2 * Math.PI, false);
// context.fillStyle = 'green';
// context.fill();
ctx.lineWidth = 5;
// context.strokeStyle = '#003300'; // green
ctx.stroke();
}
function lineDistance( positionx, positiony )
{
var xs = 0;
var ys = 0;
xs = positionx - 350;
xs = xs * xs;
ys = positiony - 350;
ys = ys * ys;
return Math.sqrt( xs + ys );
}
function drawSmiley(x,y,r) {
// outer border
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(x,y,r, 0, 2*Math.PI);
//red ctx.fillStyle="rgba(255,0,0, 0.5)";
ctx.fillStyle="rgba(255,255,0, 0.5)";
ctx.fill();
ctx.stroke();
// mouth
ctx.beginPath();
ctx.moveTo(x+0.7*r, y);
ctx.arc(x,y,0.7*r, 0, Math.PI, false);
// eyes
var reye = r/10;
var f = 0.4;
ctx.moveTo(x+f*r, y-f*r);
ctx.arc(x+f*r-reye, y-f*r, reye, 0, 2*Math.PI);
ctx.moveTo(x-f*r, y-f*r);
ctx.arc(x-f*r+reye, y-f*r, reye, -Math.PI, Math.PI);
// nose
ctx.moveTo(x,y);
ctx.lineTo(x, y-r/2);
ctx.lineWidth = 1;
ctx.stroke();
}
function drawSmileyRed(x,y,r) {
// outer border
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(x,y,r, 0, 2*Math.PI);
//red
ctx.fillStyle="rgba(255,0,0, 0.5)";
//yellow ctx.fillStyle="rgba(255,255,0, 0.5)";
ctx.fill();
ctx.stroke();
// mouth
ctx.beginPath();
ctx.moveTo(x+0.4*r, y+10);
ctx.arc(x,y+10,0.4*r, 0, Math.PI, true);
// eyes
var reye = r/10;
var f = 0.4;
ctx.moveTo(x+f*r, y-f*r);
ctx.arc(x+f*r-reye, y-f*r, reye, 0, 2*Math.PI);
ctx.moveTo(x-f*r, y-f*r);
ctx.arc(x-f*r+reye, y-f*r, reye, -Math.PI, Math.PI);
// nose
ctx.moveTo(x,y);
ctx.lineTo(x, y-r/2);
ctx.lineWidth = 1;
ctx.stroke();
}
// --- Animation of smiley moving with constant speed and bounce back at edges of canvas ---
var tprev = 0; // this is used to calculate the time step between two successive calls of run
function run(t) {
requestAnimationFrame(run);
if (t === undefined) {
t=0;
}
var h = t - tprev; // time step
tprev = t;
SmileyApp.xpos += SmileyApp.xspeed * h/1000; // update position according to constant speed
SmileyApp.ypos += SmileyApp.yspeed * h/1000; // update position according to constant speed
// change speed direction if smiley hits canvas edges
if (lineDistance(SmileyApp.xpos, SmileyApp.ypos) + SmileyApp.radius > 300) {
alert("Game Over");
}
// redraw smiley at new position
ctx.clearRect(0,0,canvas.height, canvas.width);
drawBigCircle();
drawSmiley(SmileyApp.xpos, SmileyApp.ypos, SmileyApp.radius);
drawSmileyRed(SmileyRed.xpos, SmileyRed.ypos, SmileyRed.radius);
}
run();
// --- Control smiley motion with left/right arrow keys
function arrowkeyCB(event) {
event.preventDefault();
if (event.keyCode === 37) { // left arrow
SmileyApp.xspeed = -100;
SmileyApp.yspeed = 0;
} else if (event.keyCode === 39) { // right arrow
SmileyApp.xspeed = 100;
SmileyApp.yspeed = 0;
} else if (event.keyCode === 38) { // up arrow
SmileyApp.yspeed = -100;
SmileyApp.xspeed = 0;
} else if (event.keyCode === 40) { // right arrow
SmileyApp.yspeed = 100;
SmileyApp.xspeed = 0;
}
}
document.addEventListener('keydown', arrowkeyCB, true);
JSFiddle：http: //jsfiddle.net/X7gz7/