Canvas И Javascript

Тема в разделе "Разработка игр и приложений к ним", создана пользователем varanika, 29 окт 2014.

  1. varanika

    varanika New Member

    Регистрация:
    29 окт 2014
    Сообщения:
    1
    Симпатии:
    0
    В общем беда такая - есть задача сделать простую игрушку, где летают шары по рандому и добавляются препятствия (все через кнопки, плюч очистка поля). Естественно, все должно взаимодействовать между собой и перетаскиваться мышкой. У меня пока лишь беда - то шарики летают, то препятствия ставятся, а вместе ну ни как. А уж как мышью работать вообще не пойму.
    Код:

    Код (Text):
    window.onload = function() {
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    canvas.width = 800;
    canvas.height = 400;
    canvas.onmousedown = canvasClick;

    setTimeout("drawFrame()", 20);
    setTimeout("draw()", 20);
    function loaded() {
    X[0]=20;
    Y[0]=20
    block(0); //запускаем функцию
    var textX = 50;
    var textY = 50;

    function update() {
    textX += 1;
    textY += 1;
    }

    var FPS = 30; //интервал времени
    var X=[]; //коорд X
    var Y=[]; // коорд Y
    var IdIl=0 // номер элемента


    function Ball(x, y, dx, dy, radius) {
    this.x = x;
    this.y = y;
    this.dx = dx;
    this.dy = dy;
    this.radius = radius;
    var colors = ["green", "blue", "red", "yellow", "#756391", "orange", "brown", "#09a4d1", "pink"];
    var random = Math.floor(Math.random()*colors.length);
    this.fillColor = colors[random];
    }
    function block(id_il){ //id_il - id элемента
    var colors = ["Snow", "GhostWhite", "WhiteSmoke", "Gainsboro", "FloralWhite", "Seashell", "MintCream", "Azure", "Grey"];
    var random = Math.floor(Math.random()*colors.length);
    var big = ["70", "50", "60", "40", "80"];
    var small = ["5", "10", "15"];
    var randomBig = Math.floor(Math.random()*big.length);
    var randomSmall = Math.floor(Math.random()*small.length);

    context.fillStyle = colors[random];
    context.beginPath();
    context.fillRect(X[id_il],Y[id_il], big[randomBig], small[randomSmall])
    context.closePath();
    context.fill();
    }

    var balls = [];
    var blocks = []; //массив кирпичей, не работает, гад!

    function addBall() {
    // Устанавливаем размер мячика
    var radius = parseFloat(document.getElementById("ballSize").value);
    // Создаем новый мячик
    var ball = new Ball(50,50,6,6,radius);
    // Сохраняем его в массиве
    balls.push(ball);
    }
    function addBlock() { //!! кирпичи добавляются!!!
    IdIl++;
    var x = (1- Math.random())* (880-20); //генератор случайных чисел.
    var y = (1 - Math.random())* (420-20);
    X[IdIl] = x;
    Y[IdIl] = y;
    block(IdIl);
    blocks.push(block);
    }



    function clear() {
    // Удаляем все мячики и кирпичи
    balls = [];
    blocks = [];
    }

    function drawFrame() {
    // Очистить холст
    context.clearRect(0, 0, canvas.width, canvas.height);
    // Вызываем метод beginPath(), чтобы убедиться,
    // что мы не рисуем часть уже нарисованного содержимого холста
    context.beginPath();
    // Перебираем все мячики
    for(var i=0; i<balls.length; i++) {
    // Перемещаем каждый мячик в его новую позицию
    var ball = balls[i];
    ball.x += ball.dx;
    ball.y += ball.dy;
    // Добавляем движение мячика
    if ((ball.y) < canvas.height) ball.dy;
    // Добавляем эффект "трения", который замедляет движение мячика
    ball.dx = ball.dx * 0.999;
    // Если мячик натолкнулся на край холста, отбиваем его, но слегка увеличиваем скорость, чтоб не заглох
    if ((ball.x + ball.radius > 800) || (ball.x - ball.radius < 0)) {
    ball.dx = -ball.dx*1.01;
    }
    // Если мячик упал вниз, отбиваем его, но слегка уменьшаем скорость
    if ((ball.y + ball.radius > canvas.height) || (ball.y - ball.radius < 0)) {
    ball.dy = -ball.dy*0.99;
    }
    context.beginPath();
    context.fillStyle = ball.fillColor;
    // Рисуем мячик
    context.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2);    
    context.fill();
    }
    // Рисуем следующий кадр через 20 миллисекунд
    setTimeout("drawFrame()", 20);
    }
    function draw() {
    block ();
    setTimeout("draw()", 20);
    }


    function canvasClick(e) {
    // Координаты щелчка мышью
    var clickX = e.pageX - canvas.offsetLeft;
    var clickY = e.pageY - canvas.offsetTop;
    for(var i in balls)
    {
    var ball = balls[i];

    // Проверка попадания
    if ((clickX > (ball.x-ball.radius)) && (clickX < (ball.x+ball.radius)))
    {
    if ((clickY > (ball.y-ball.radius)) && (clickY < (ball.y+ball.radius)))
    {
    // Изменить скорость мячика
    ball.dx -= 4;
    ball.dy -= 5;
    return;
    }
    }
    }
    }
     
Загрузка...
Похожие Темы - Canvas Javascript
  1. illusion2
    Ответов:
    0
    Просмотров:
    1.015
  2. itincorp
    Ответов:
    0
    Просмотров:
    61
  3. itincorp
    Ответов:
    0
    Просмотров:
    72
  4. Aaleks111
    Ответов:
    2
    Просмотров:
    191
  5. SvetlanaL
    Ответов:
    0
    Просмотров:
    165

Поделиться этой страницей