Question

如何改变弹跳球的大小，使其每5次弹跳变小，然后每5次弹跳恢复正常大小。我刚刚开始学习HTML5，就我的项目而言。

    ball.x += xunits;
    ball.y += yunits;
    context.fillStyle = color;
    context.beginPath();
    context.arc(ball.x,ball.y,15,0,Math.PI*2,true);
    context.closePath();
    context.fill();


    if (ball.x > theCanvas.width || ball.x < 0 ) {
        angle = 180 - angle;
        color = "red";
        updateBall();
    } else if (ball.y > theCanvas.height || ball.y < 0) {
        angle = 360 - angle;
        color = "blue";
        updateBall(); 
    }

}

function updateBall() {
    radians = angle * Math.PI/ 180;
    xunits = Math.cos(radians) * speed;
    yunits = Math.sin(radians) * speed;
}

var speed = 5;
var p1 = {x:250,y:0};
var angle = 45;
var radians =0;
var xunits = 0;
var yunits = 0; 
var color = "blue";
var ball = {x:p1.x, y:p1.y};
updateBall();

theCanvas = document.getElementById('canvasOne');
context = theCanvas.getContext('2d');

function gameLoop() {
        window.setTimeout(gameLoop, 20);
        drawScreen()    
    }

gameLoop();

Answer 1

您可以使用计数器

var counter = 0;

弹跳时，增加反击和adust尺寸

counter++;
size -= value;

并检查5您可以重置计数器和大小的位置

if (counter === 5) {
    counter = 0;
   // size = ... reset
}

Answer 2

哟，我觉得这可能有太多错误可以帮助你解决问题。您在声明变量和函数之前使用它们。 drawScreen未在您发布的代码段中声明，并且是此处的关键功能。

我已经把它清理了一下，我相信它正在做你想要的大多数。我挑选的一些东西更具风格，但我上面提到的声明顺序不风格，是必要的。

(function(window, document){
var ball = {x:250, y:30},
    color = "blue",
    speed = 20,
    angle = 45,
    radians,
    xunits,
    yunits, 

    theCanvas = document.getElementById('canvasOne'),
    context = theCanvas.getContext('2d');

function drawScreen(){
  context.beginPath();
  context.arc(ball.x,ball.y,15,20,Math.PI*2,true);
  context.fillStyle = color;
  context.fill();
  context.closePath();
function updateBall(){
    radians = angle * Math.PI/180;
    xunits = Math.cos(radians) * speed;
    yunits = Math.sin(radians) * speed;
    ball.x += xunits;
    ball.y += yunits;

    if (ball.x > theCanvas.width - 7.5 || ball.x < 7.5 ) {
        angle = 180 - angle;
        color = "red";
    } 
    if(ball.y > theCanvas.height || ball.y < 0) {
        angle = 360 - angle;
        color = "blue";
    }
}
  updateBall();
  context.clear();
}
function gameLoop() {
        window.setTimeout(gameLoop, 500);
        drawScreen();   
    }
gameLoop();
})(this, document);

如何改变弹跳球的大小，使其每5次弹跳变小，然后每5次弹跳恢复到正常大小

2 个答案: