Nuevamente, tal vez sea demasiado trabajo para algo sencillo, pero me quise divertir un rato. ¿Qué les pareció? Pueden probar el código aquí https://jsfiddle.net/gsc4Ln65/5/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Programa v4 HTML - DVD Style</title>
</head>
<body>
<canvas width="600" height="400">
</canvas>
<script>
var pantalla = document.querySelector(`canvas`);
var pincel = pantalla.getContext(`2d`);
pincel.fillStyle = `lightgrey`;
pincel.fillRect(0, 0, 600, 400);
var colores = [`white`, `red`, `green`, `yellow`];
var indexAlterarColor = 0;
function diseniarCirculo(x, y, radio) {
pincel.fillStyle = colores[indexAlterarColor]
pincel.beginPath();
pincel.arc(x, y, radio, 0, 2 * Math.PI);
pincel.fill();
}
function limpiarPantalla() {
pincel.clearRect(0, 0, 600, 400);
pincel.fillStyle = `black`;
pincel.fillRect(0, 0, 600, 400);
}
function mostrarMensaje() {
console.log(`Circulo en posición ` + x);
}
function escribirTexto(x, y, texto) {
pincel.font = `25px Garamond`;
pincel.fillStyle = colores[indexAlterarColor]
pincel.fillText(texto, x, y);
}
let x = 300
let y = 200
let radio = 1
let direccion = 1
let subibaja = 1
function actualizarPantalla() {
limpiarPantalla();
if (x > 545) {
direccion = -1;
indexAlterarColor++;
if (indexAlterarColor >= colores.length) {
indexAlterarColor = 0;
}
} else if (x < 0) {
direccion = 1;
indexAlterarColor++;
if (indexAlterarColor >= colores.length) {
indexAlterarColor = 0;
}
}
if (y < 15) {
subibaja = 1;
indexAlterarColor++;
if (indexAlterarColor >= colores.length) {
indexAlterarColor = 0;
}
} else if (y > 400) {
subibaja = -1;
indexAlterarColor++;
if (indexAlterarColor >= colores.length) {
indexAlterarColor = 0;
}
}
escribirTexto(x, y, `DVD`);
// diseniarCirculo(x, y, radio);
x = x + direccion;
y = y + subibaja;
// radio++;
/* if (radio >= 20) {
radio = 10;
indexAlterarColor++;
if (indexAlterarColor >= colores.length) {
indexAlterarColor = 0;
}
} */
// escribirTexto(x,y,`texto`);
// mostrarMensaje();
}
function alterarColor() {
indexAlterarColor++;
if (indexAlterarColor >= colores.length) {
indexAlterarColor = 0;
}
console.log(`El color cambió a "` + colores[indexAlterarColor] + `"`);
return false;
}
pantalla.oncontextmenu = alterarColor;
setInterval(actualizarPantalla, 10);
</script>
</body>
</html>
