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,754
Messages
2,569,516
Members
44,991
Latest member
Josephnag

Latest Threads

Top