Javascript 在另一个圆圈内保持一个圆圈（画布）

我在做游戏。我希望玩家不要离开循环游戏区域。运动员不应越过红色的圆线。它应该留在里面，可以沿着边界移动

我已经写了一个简单的函数来检测圆之间的碰撞。我也发现了一个错误。即使我在游戏区内，我也会收到来自外部的

console.log（）

消息

当玩家在

[x<0]

时，就会发生这种情况。请帮帮我

var游戏=（函数（窗口）{
var canvas=document.getElementById（“游戏”），
ctx=canvas.getContext（“2d”）；
var SCREEN_WIDTH=window.innerWidth，
屏幕高度=窗内高度；
canvas.width=屏幕宽度；
canvas.height=屏幕高度；
var ROCK=“ROCK”，
PAPER=“PAPER”，
剪刀=“剪刀”；
var BG_IMAGE=document.getElementById（“BG”）；
//这是游戏区域的半径
var博弈=500；
var offsetX=0，
offsetY=0；
var播放器；
//圆碰撞检测
函数检查冲突（x1、y1、r1、x2、y2、r2）{
var x=x1-x2；
变量y=y1-y2；
var d=数学正态分布（x，y）；
返回d
这将检查内圈是否在外圈内

 function checkCollision(cxInner, cyInner, rInner, cxOuter, cyOuter, rOuter) {
        return Math.sqrt(Math.pow(cxInner-cxOuter, 2) + Math.pow(cyInner-cyOuter, 2)) < rOuter - rInner;
 }

函数检查冲突（cxInner、cyInner、rInner、cxOuter、cyOuter、路由器）{
返回Math.sqrt（Math.pow（cxInner-cxOuter，2）+Math.pow（cyInner-cyOuter，2））

完整代码：


var游戏=（函数（窗口）{
var canvas=document.getElementById（“游戏”），
ctx=canvas.getContext（“2d”）；
var SCREEN_WIDTH=window.innerWidth，
屏幕高度=窗内高度；
canvas.width=屏幕宽度；
canvas.height=屏幕高度；
var ROCK=“ROCK”，
PAPER=“PAPER”，
剪刀=“剪刀”；
var BG_IMAGE=document.getElementById（“BG”）；
//这是游戏区域的半径
var博弈=500；
var offsetX=0，
offsetY=0；
var播放器；
//圆碰撞检测
功能检查冲突（cxInner、cyInner、rInner、cxOuter、cyOuter、路由器）{
返回Math.sqrt（Math.pow（cxInner-cxOuter，2）+Math.pow（cyInner-cyOuter，2））