Por el momento, funcionando :)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>bullseye</title>
</head>
<body>
<style>
body {
margin: 20px;
background-color: #BA9848;
}
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column-reverse;
align-content: center;
height: 100vh;
}
#canvas-1 {
position: relative;
width: 600px;
height: 400px;
border: 3px solid black;
border-radius: 10PX;
}
.item {
text-align: center;
}
h1 {
font-size: 2.5vw;
font-weight: 900;
margin: 10px;
color: black;
}
p {
font-family: 'Courier New', Courier, monospace;
font-size: 2vw;
margin: 20px;
color: black;
font-weight: 700;
}
</style>
</body>
<div class="container">
<div class="item">
<h1></h1>
<p>bullseye</p>
</div>
<canvas id="canvas-1" width="600" height="400"> </canvas>
</div>
<!-- ---------------------*************************------------------------------------- -->
<script>
// VARIABLES --------------------------------------->
var screen = document.querySelector("canvas");
var brush = screen.getContext("2d");
brush.fillStyle = "#e5c16b";
brush.fillRect(0, 0, 600, 400);
// FUNCIONES ------------------------------------------->
// crear circulo ********
/* bullseye radio */ var radio = 10;
function createCircle(x, y, radio, color) {
brush.fillStyle = color;
brush.beginPath();
brush.arc(x, y, radio, 0, Math.PI * 2);
brush.fill();
};
// limpiar canvas **********
function clearCanvas() {
brush.clearRect(0, 0, 600, 400);
};
// VARIABLES --------------------->
// circle ------------>
var x = 0;
// FUNCIÓN ANIMACIÓN --------------------->
function repeatCanvas() {
clearCanvas();
createCircle(x, 20, 10);
x++;
console.log(x);
};
screen.oncontextmenu = noRightClick;
function noRightClick() {
return false; /* EVITAR MENU CONTEXTUAL, EL CLASICO CLICK SENCUDARIO */
}
function bullsEye(x, y) {
createCircle(x, y, radio +43, 'black');
createCircle(x, y, radio +40, 'red');
createCircle(x, y, radio +30, 'white');
createCircle(x, y, radio +20, 'red');
createCircle(x, y, radio +10, 'white');
createCircle(x, y, radio, 'red');
};
function randomBullseye(maxPos) {
return Math.floor(Math.random()*maxPos);
};
randomX = randomBullseye(500);
randomY = randomBullseye(300);
bullsEye(randomX, randomY);
// setInterval(repeatCanvas,50); //aplicar función 'UPDATE CANVAS' y velocidad en 'ms'.
</script>
</html>