[英]How to get ball moving independently in javascript
所以我正在制作一个非常基本的Javascript游戏。 有一个用户球,您可以使用箭头键控制它,并且有一个敌人球漂浮在屏幕周围。
但是,我遇到了一个问题。 只有当我用箭头键移动自己的球时,敌人的球才会移动。 因此,如果我什么也不按,敌人的球只会坐在那儿,也不会动弹。
以下是我的JavaScript代码。 因此,基本上,我希望敌弹自己在画布上移动。 在此先多谢!
<script type="text/javascript">
// Gets a handle to the element with id gameCanvas.
var canvas = document.getElementById("gameCanvas");
// Get a 2D context for the canvas.
var ctx = canvas.getContext("2d");
var userBall = {
x: canvas.width / 2
, y: canvas.height / 2
, r: 13
}
var enemyBall1 = { // Create object for enball1
x: canvas.width / 5,
y: canvas.height / 5,
radius: 8 , // Set radius of ball to 12
acceleration: { // Determines ball acceleration
x: 5,
y: 3
}
} // End ball1
function drawCircle() {
ctx.fillStyle = "rgb(255, 255, 0)"; // Color
ctx.beginPath();
ctx.arc(userBall.x, userBall.y, userBall.r, 0, 2 * Math.PI);
ctx.fill();
}
function drawEnemyBall1() {
ctx.fillStyle = "rgb(255, 25, 100)"; // Color
ctx.beginPath(); // Begin path
ctx.arc(enemyBall1.x, enemyBall1.y, enemyBall1.radius, 0, 2 * Math.PI);
ctx.fill(); // Fills ball
enemyBall1.x += enemyBall1.acceleration.x; // Update y location
enemyBall1.y += enemyBall1.acceleration.y;
// Keep animation going while ball1 hasn't hit the canvas
if ((enemyBall1.x >= canvas.width - enemyBall1.radius) || (enemyBall1.x <= enemyBall1.radius))
enemyBall1.acceleration.x =- enemyBall1.acceleration.x;
if ((enemyBall1.y >= canvas.height - enemyBall1.radius) || (enemyBall1.y <= enemyBall1.radius))
enemyBall1.acceleration.y =- enemyBall1.acceleration.y;
} // End function drawball
drawCircle(); // call function
drawEnemyBall1();
function repeatme() {
// clears the screan/canvas i.e. where the ball was previously does not show up.
ctx.clearRect(0, 0, canvas.width, canvas.height);
// calls the enemyBall function
drawEnemyBall1();
//calls the userBall function
drawCircle();
// gets the animation going
window.requestAnimationFrame(repeatme);
}
// Add an event listener to the keypress event.
window.addEventListener("keydown", function(event) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (event.keyCode == 39 && userBall.x < canvas.width - userBall.r)
userBall.x += Math.min(10, canvas.width - userBall.x - userBall.r);
else if (event.keyCode == 37 && userBall.x > userBall.r)
userBall.x -= 10;
else if (event.keyCode == 40 && userBall.y < canvas.height - userBall.r)
userBall.y += 10;
else if (event.keyCode == 38 && userBall.y > userBall.r)
userBall.y -= 10;
drawCircle(); // call function
drawEnemyBall1();
});
</script>
您在最底部缺少再次调用requestAnimation的代码行。
window.requestAnimationFrame(repeatme);
在</script>
之前添加此行,它应该可以工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.