JavaScript: how to keep track of the circle in canvas on specific path?

Joined
Mar 20, 2023
Messages
1
Reaction score
0
Hi,
everyone I have following code I want the filled circle to remain within the drawn path or dont slip out of the curved (although it can) if it happens the game ends, (I don't want to bound it to the path) I have been working on this can't help myself finding a solution.

Code:
<html>
<head>
    <style>
        #canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div>
        <canvas id="canvas" width="500" height="500"></canvas>
    </div>
    <script>
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        var x = 0;
        var y = 250;
        var radius = 10;
        var pathWidth = 200;
        var pathHeight = 100;
        var pathStartX = 100;
        var pathStartY = 200;
        var pathEndX = 400;
        var pathEndY = 200;
        var pathControlX = 250;
        var pathControlY = 100;
        var pathControlX2 = 250;
        var pathControlY2 = 300;
        var pathColor = "black";
        var circleColor = "red";
        var score = 0;
        var startTime = new Date().getTime();
        var endTime = startTime + 60000;
        var path = new Path2D();
        path.moveTo(pathStartX, pathStartY);
        path.bezierCurveTo(pathControlX, pathControlY, pathControlX2, pathControlY2, pathEndX, pathEndY);
        context.stroke(path);
        context.beginPath();
        context.arc(x, y, radius, 0, 2 * Math.PI, false);
        context.fillStyle = circleColor;
        context.fill();
        canvas.addEventListener("mousemove", function (event) {
            var rect = canvas.getBoundingClientRect();
            x = event.clientX - rect.left;
            y = event.clientY - rect.top;
        });
        function draw() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.stroke(path);
            context.beginPath();
            context.arc(x, y, radius, 0, 2 * Math.PI, false);
            context.fillStyle = circleColor;
            context.fill();
            if (x > pathEndX - radius && x < pathEndX + radius && y > pathEndY - radius && y < pathEndY + radius) {
                score++;
                pathStartX = pathEndX;
                pathStartY = pathEndY;
                pathEndX = Math.floor(Math.random() * (canvas.width - pathWidth)) + pathWidth;
                pathEndY = Math.floor(Math.random() * (canvas.height - pathHeight)) + pathHeight;
                pathControlX = Math.floor(Math.random() * canvas.width);
                pathControlY = Math.floor(Math.random() * canvas.height);
                pathControlX2 = Math.floor(Math.random() * canvas.width);
                pathControlY2 = Math.floor(Math.random() * canvas.height);
                path = new Path2D();
                path.moveTo(pathStartX, pathStartY);
                path.bezierCurveTo(pathControlX, pathControlY, pathControlX2, pathControlY2, pathEndX, pathEndY);
                context.stroke(path);
                x = pathStartX;
                y = pathStartY;
            }
            if (new Date().getTime() > endTime) {
                alert("Game Over! Your score is " + score);
                clearInterval(interval);
            }
        }
        var interval = setInterval(draw, 10);
    </script>
</body>
</html>

one more thing I want the filled circle initial position right on either end of the curved path thanks any input or help is appreciated thanks
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top