Пинг-понг - JavaScript, Ajax

mixon-21 · 18.01.2014, 22:48

Подскажите пожалуста как проверить координаты ударения шарика об ракетку. и изменить направление движения шарика???

Код:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <canvas id="can1" width="900" height="550" style="border:1px solid;background:#c4d52b"   onmousemove="X=event.clientX;Y=event.clientY">
        
    </canvas>
    <input  type="text" onmousemove="this.value=event.clientX+':'+event.clientY" />

    <script>
        document.write('<input type="button" style="position:absolute;top:250px;left:250px" value="Start" onclick="timerBox()"/>');
        X = 0;
        Y = 0;
        Xo = 530;
        Yo = 500;
        Vx = 15;
        Vy = 15;
       
            function box() {
                var canvasBox = document.getElementById('can1');
                W = canvasBox.width
                H = canvasBox.height;
                var x = canvasBox.getContext("2d");

                var grad = x.createLinearGradient(0, 0, 0, 0.5);
                grad.addColorStop(0.0, "blue");
                x.fillStyle = '#c4d52b';
                x.fillRect(0, 0, W, H);
                x.fillStyle = grad;
                x.fillRect(X -40, 510, 80, 15);
                circle()
            };
            function circle() {
                var canvasCircle = document.getElementById('can1'),
           context = canvasCircle.getContext('2d');
                function drawCircle(x, y, r) {
                    context.arc(x, y, r, 0, 2 * Math.PI, false);
                }
                context.beginPath();

                Xo += Vx;
                Yo += Vy;
                if (Xo > W - 10){
                    Xo = W - 10;
                    Vx = -Vx;
                } else if (Xo < 10) {
                    Xo = 10;
                    Vx = -Vx;
                }
                
                if (Yo > H-10) {
                    Yo = H - 10;
                    Vy = -Vy;
                } else if (Yo < 10) {
                    Yo = 10;
                    Vy = -Vy;
                }
                
               
                
                drawCircle(Xo, Yo, 5);
                context.lineWidth = 10;
                context.strokeStyle = 'red';
                context.stroke();
            };
            function timerBox()
            {
                setInterval('box()', 100);
            }

     </script>
</body>
</html>

Виталий Желтяков · 19.01.2014, 12:57

Надо проверить находиться ли край шарика в плоскости движения ракетки.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Делаю Пинг понг.	demigod82	Gamedev - cоздание игр: Unity, OpenGL, DirectX	9	10.03.2012 22:43
Пинг понг (паскаль)	Katmai	Gamedev - cоздание игр: Unity, OpenGL, DirectX	0	29.10.2010 22:59
Пинг-понг	Ckomoroh	Gamedev - cоздание игр: Unity, OpenGL, DirectX	9	27.08.2010 18:33

19.01.2014, 12:57	#2
Виталий Желтяков Старожил Регистрация: 19.04.2010 Сообщений: 2,702	Надо проверить находиться ли край шарика в плоскости движения ракетки.