Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 18.01.2014, 22:48   #1
mixon-21
Я только Учусь
Форумчанин
 
Аватар для mixon-21
 
Регистрация: 06.03.2013
Сообщений: 193
По умолчанию Пинг-понг

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

Код:
<!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>
mixon-21 вне форума Ответить с цитированием
Старый 19.01.2014, 12:57   #2
Виталий Желтяков
Старожил
 
Аватар для Виталий Желтяков
 
Регистрация: 19.04.2010
Сообщений: 2,702
По умолчанию

Надо проверить находиться ли край шарика в плоскости движения ракетки.
Виталий Желтяков вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Делаю Пинг понг. 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