0
私のコードに問題があります。 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>
あなたが描いたボールをクリアしている10msごとにキャンバスをクリアしています.... – david
@davidキャンバスのクリアをやめると、オブジェクトのトレイルは削除されません。 –