为什么我的随机值几乎立即被覆盖？

Question

我遇到了我的代码问题。我尝试使对象产生在随机位置，如您所看到的drawHyperBall()和getRandomIntX()和getRandomIntY()。发生的事情是，随机值几乎立即被覆盖。我怎样才能解决这个问题？下面

代码：

var canvas = document.getElementById("myCanvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var x = canvas.width/2; 
 
var y = canvas.height/2; 
 
var ballRadius = 40; 
 
var hBallRadius = 10; 
 
var w = 5; 
 
var hunger = 630; 
 
var hypo = 0; 
 
var hyper = 0; 
 
var randomX; 
 
var randomY; 
 
var Keys = { 
 
    \t up: false, 
 
     down: false, 
 
     left: false, 
 
     right: false 
 
}; 
 
\t 
 
function drawBall() { 
 
    ctx.beginPath(); 
 
    ctx.arc(x, y, ballRadius, 0, Math.PI*2); 
 
    ctx.fillStyle = "#00FF00"; 
 
    ctx.fill(); 
 
    ctx.lineWidth= 3.5; 
 
    ctx.stroke(); 
 
    ctx.closePath(); 
 
} 
 
\t 
 
function drawConceBar() { 
 
\t ctx.strokeRect(100,930,630,30) 
 
} 
 
\t 
 
function drawHungerBar() { 
 
\t ctx.fillStyle = "#73591C"; 
 
\t ctx.fillRect(1140,930,hunger,30) 
 
\t ctx.fillStyle = "black"; 
 
\t ctx.strokeRect(1140,930,630,30) 
 
} 
 

 
function drawTitle() { 
 
\t ctx.fillStyle = "black"; 
 
\t ctx.font = "120px Arial"; 
 
\t ctx.fillText("Osmos.is",canvas.width/2 -210,120); 
 
} 
 
function drawBorder() { 
 
\t ctx.strokeRect(100,150,1670,730); 
 
} 
 
\t 
 
function getRandomIntX(minX,maxX) { 
 
    return Math.floor(Math.random() * (maxX- minX + 1)) + minX; 
 
} 
 
function getRandomIntY(minY,maxY) { 
 
    return Math.floor(Math.random() * (maxY - minY + 1)) + minY; 
 
} 
 

 
function drawHyperBall() { 
 
\t ctx.beginPath(); 
 
    ctx.arc(getRandomIntX(110, 1660), getRandomIntY(160, 720), hBallRadius, 0, Math.PI*2); 
 
    ctx.fillStyle = "#FF0000"; 
 
    ctx.fill(); 
 
    ctx.closePath(); 
 
} 
 
\t 
 
function draw() { 
 
\t ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
\t 
 
\t drawBall(); 
 
\t 
 
\t drawBorder(); 
 
\t \t 
 
\t drawTitle(); 
 
\t \t 
 
\t drawConceBar(); 
 
\t \t 
 
\t drawHungerBar(); 
 
\t \t 
 
\t if(y > 830) { 
 
\t  y -= 5; 
 
\t } 
 
\t else if(y < 195) { 
 
\t  y += 5; 
 
\t } 
 
\t 
 
\t if(x < 150) { 
 
\t \t x += 5; 
 
\t } 
 
\t else if(x > 1720) { 
 
\t \t x -= 5; 
 
\t } 
 
\t \t 
 
\t if (Keys.up) { 
 
\t  y -= 5; 
 
\t } 
 
\t else if (Keys.down) { 
 
\t  y += 5; 
 
\t } 
 

 
\t if (Keys.left) { 
 
\t  x -= 5; 
 
\t } 
 
\t else if (Keys.right) { 
 
\t  x += 5; 
 
\t } 
 
\t 
 
\t if (hunger <= 0) { 
 
\t \t hunger += 1; 
 
\t } 
 
\t else { 
 
\t \t hunger -= 1; 
 
\t } 
 
} 
 
\t 
 
window.onkeydown = function(e) { 
 
    var kc = e.keyCode; 
 
    e.preventDefault(); 
 
    if  (kc === 37) Keys.left = true; // only one key per event 
 
    else if (kc === 38) Keys.up = true; // so check exclusively 
 
    else if (kc === 39) Keys.right = true; 
 
    else if (kc === 40) Keys.down = true; 
 
}; 
 
\t 
 
window.onkeyup = function(e) { 
 
    var kc = e.keyCode; 
 
    e.preventDefault(); 
 
    if  (kc === 37) Keys.left = false; 
 
    else if (kc === 38) Keys.up = false; 
 
    else if (kc === 39) Keys.right = false; 
 
    else if (kc === 40) Keys.down = false; 
 
}; 
 

 
setInterval(draw, 10); 
 
setInterval(drawHyperBall, 1000);

<canvas id="myCanvas"></canvas>

Answer 1

我已经想通了这个问题。我清除了所有的画布，所以我添加了一个新功能，只清除特定的事物。