test

by DSDmark

HTML

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>

    <script>
        var game_md = {
            width : 400,
            height : 200,
            paddle : {
                width : 20,
                height : 40
            }
        };
        var paddles = [
            {
                x:0,
                y:0,
                points:0
            },
            {
                x:game_md.width - game_md.paddle.width,
                y:0,
                points:0
            }
        ];
        var ball_md = {
            radius : 10,
            speed : 5
        };
      /*   var ball = {
            //x : Math.floor(game_md.width/2) - ball_md.radius,
            //y : Math.floor(game_md.height/2) - ball_md.radius, 
            x : 2,
            y : 180, 
            direction : 200
        }; */
        ball = {x: 260.4154707161251, y: 0.4394247540238234, direction: -380};

        var canvas = document.createElement("canvas");
        document.body.appendChild(canvas);
        canvas.setAttribute('width', game_md.width);
        canvas.setAttribute('height', game_md.height);
        canvas.style.border = "1px solid black";
        var ctx = canvas.getContext("2d");

        function drawGame() {
            ctx.fillStyle="#000000";
            ctx.fillRect(0,0,game_md.width,game_md.height);

           ctx.fillStyle="#ffffff";
    
            var circle = new Path2D();
            circle.arc(ball.x+ball_md.radius, ball.y+ball_md.radius, ball_md.radius, 0, 2 * Math.PI, false);
            ctx.fill(circle);

        }

        function tick() {
            var dx = Math.cos(ball.direction * (Math.PI / 180))*ball_md.speed;
            var dy = Math.sin(ball.direction * (Math.PI / 180))*ball_md.speed;
            ball.x += dx;
            ball.y -= dy;
            drawGame();
        
         /*    console.log(ball); */
        
            paddles.some(function(paddle) {
                var...