Для класса мы делаем простую программу Javascript для прыгающих мячей.Однако в заключительной части задания мы должны включить механику, такую как изменение скорости при ударе о стену холста, изменение ее цвета, размера и т. Д. Я решил попробовать изменить цвет, так как это в значительной степенисамый простой, который я считаю, и я не слишком разбираюсь в коде.Однако я сделал все, что смог найти, чтобы шар изменился на случайный цвет, когда он попадает в стену, и он кажется перерисованным при столкновении, но остается тем же цветом, пока страница не обновится.Может кто-нибудь сказать мне, что мне не хватает?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Jay Aguiar">
<title>Week 1 Animation</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
<canvas id="canvas" width = "1024" height ="800" >
Your browser is outdated and does not support HTML5. Please
update to the latest version.
</canvas>
</body>
<!-- Do not change this-->
<script type="text/javascript" src="js/Ball.js"></script>
<!--
Change the src of the following script tag to the file you want
to view.
Your options are:
js/week1_basic_movement.js
js/week1_boundary_detection_loop.js
js/week1_boundary_detection_bounce.js
-->
<script type="text/javascript" src="js/week1_basic_movement.js">
</script>
</html>
Javascript для шара
function Ball()
{
this.x = canvas.width/2;
this.y = canvas.height/2;
this.width = 100;
this.height = 100;
this.vx = 0;
this.vy = 0;
this.force = 1;
this.color = getRandomColor();
this.draw = function()
{
context.save();
context.fillStyle = this.color;
context.translate(this.x, this.y);
context.beginPath();
context.arc(0, 0, this.width/2, 0, 360 * Math.PI);
context.closePath();
context.fill();
context.restore();
}
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
//This changes the player's position
this.move = function()
{
this.x += this.vx;
this.y += this.vy;
}
}
Javascript для движения и изменения цвета
var canvas;
var context;
var timer;
var interval = 1000/60;
var ball;
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
ball = new Ball();
ball.vx = 3;
ball.vy = 3;
timer = setInterval(animate, interval);
function animate()
{
context.clearRect(0,0,canvas.width, canvas.height);
ball.move();
if(ball.x > canvas.width - ball.width/2)
{
ball.vx = -ball.vx;
context.fillStyle = getRandomColor();
}
else if(ball.x < ball.width/2)
{
ball.vx = -ball.vx;
context.fillStyle = getRandomColor();
}
if(ball.y > canvas.height - ball.height/2)
{
ball.vy = -ball.vy;
context.fillStyle = getRandomColor();
}
else if(ball.y < ball.height/2)
{
ball.vy = -ball.vy;
context.fillStyle = getRandomColor();
}
ball.draw();
}