HTML5(canvas) + Js, игра

Запись от pavlinmavlin размещена 01.04.2019 в 19:43

Сваял вот такую игрульку.

Нажмите на изображение для увеличения
Название: загруженное (2).png
Просмотров: 340
Размер: 36.6 Кб
ID: 5318

Играем за Человечка.

Сверху игрового поля летает птичка и сбрасывает вниз яйца и кирпичи. Яйца нужно ловить.
За каждое пойманное яйцо +1 к счету и -1 к кол-ву жизней птички. Если яйцо не поймать, то упав оно разобьется. После прохождения раунда из общего счета вычтется кол-во разбитых яиц в текущем Уровне. Как только у птички закончатся жизни уровень - пройден. На каждом следующем уровне кол-во жизней у птички повышается на 5 единиц, а скорость на 1 единицу. Скорость падения предметов не меняется. Кол-во уровней неограниченно.

Если человечек словит кирпич, тогда у него отнимется 1 жизнь и он переместится в левый край игрового поля. На каждом уровне дается по 3 попытки(жизни). Как только кол-во жизней станет равно 0 игра окончена.

Управление:
A - идти влево
D - идти вправо
Пробел - прыжок.
2 раза Пробел или Зажать Пробел - двойной прыжок.
ЛКМ по окну игры во время игры - поставить/убрать паузу.

код игры(index.html), с комментариями:

Javascript

<html>
    <head> 
        <title> Лови яйки </title>
    </head>
    <body>
    <canvas id='example' width='800' height='450'>Обновите браузер</canvas>
    <script>
    
    // Ищем наш canvas с id = example
    example = document.getElementById("example");
    
    // будем работать с 2d контентом. 
    // ctx - это наше окно canvas, изображение.
    ctx = example.getContext('2d');
    
    // подгружаем птичку
    fly = new rectImage('images/fly.png' , 40 , 40 , 100 , 100 , 80 , 100 , 17 , 3);
    
    fly.lives = 5; // доп. поле жизни.
    fly.livesScore = 5; // доп. поле счет кол-ва жизней.
    fly.timeOut = 100; // доп. поле таймер сброса айца/ кирпича.
    
    // создаем объекты для прорисовки HP у птички
    backHp = new rect('#e14546', 100, 10, 100,10); // задний - красный фон
    frontHp = new rect('green', 100, 10, 100,10); // передний - зеленый фон
    
    // подгружаем изображение человечка
    man = new rectImage('images/man.png' , 0,300,70,75,80,85,15);
    man.score=0; // дополнительное поле объекту человечка - счет
    man.jump=0; // доп. поле прыжок
    man.lives=3; // доп. поле жизни
    
    pause = 0; // переменная паузы. Если 0 игра идет, если 1 игра стоит
    
    
    // создаем область main. на все окно
    var main = new rect('#000',0,0,example.width, example.height);
    // создаем зеленое поле
    var pole = new rect('green',0,350,example.width, example.height-350);
    // подгружаем пень
     
    var pen = new rectImage('images/pen.png',350,340,100,49,100,49);
    
    // устанавливаем гравитацию.
    gravity = 0.1;
    
    // массивы яиц/кирпичей
    miniballs = [];
    eggs = []; // разбитое яйцо
    
    
    // блокировка Анимации человечка.
    // Анимация происходит только тогда когда он передвигается.
    man.animateBlock=1;
    
    // номер уровня
    level=1;
    
    // отслеживаем нажатие клавиши
    document.onkeypress = function(e) {
        
        // Если нажата A 
        if(e.keyCode==1092 || e.keyCode == 97)
        {    
            // разблокировываем анимацию человечка
            man.animateBlock=0;
            // из ImageSet берем второй ряд изображений, где человечек идет влево
            man.animateRyad = 1;
            // скорость перемещения человечка по оси X
            // стремимся к 0 по оси X
            man.speedX = -4; 
        }
        
        // Если нажата клавиша D
        if(e.keyCode==1074 || e.keyCode == 100)
        {   
            // разблокировываем анимацию человечка
            man.animateBlock=0; 
            // скорость перемещения человечка по оси X
            // стремимся к бесконечности  по оси X
            man.speedX = 4;
            // Ряд изображений из ImageSet 1
            man.animateRyad = 0;
        }
        
        // Если нажат пробел
        if(e.keyCode == 32)
        {
            // Если счетчик прыжков меньше двух
            if(man.jump < 2)
            {
                // Если сделан очередной прыжок увеличиваем счетчик
                man.jump += 1;
                // скорость перемещения по оси Y, стремимся к 0 по оси Y
                man.speedY=-3;
            }
        }
    }
            
    document.onkeyup = function(e) {
                
                // Если отпущена клавиша и это не пробел
                if(e.keyCode == 32)
                {
                
                }
                else
                {
                    // блокируем анимацию
                    man.animateBlock=1;
                    // скорость перемещения по оси X = 0;
                    man.speedX = 0;
                }
            }
     
     // запускаем SetInterval
     // который в определенный промежуток времени
     // будет запускать код, который будет отрисовывать все согласно нашим значениям в инфоблоках
    setInterval(function(){  
        // отрисовываем черный фон
        main.draw();
        // отрисовываем зеленое поле
        pole.draw();
        // отрисовываем пень
        pen.draw();
          
        // Если pause == 1, значит игра посталена на паузу
        if(pause == 1)
        {
            // прорисовываем текст, что игра поставлена на паузу
            rectText('white','normal 18px Arial','Игра приостановлена. Кликните по окну, чтобы продолжить',150,150);
            // назначаем окну onClick, чтобы pause сделать равным 0, т.е. снять игру с паузы.
            example.onclick = function(e) { pause=0; }
        }
        else
        {
        
            // Если количество жизней меньше или равно 0
          if(man.lives <=0 )
          {
            
            ctx.font = 'normal 14px Arial'; // устанавливаем шрифт
            ctx.fillStyle = 'red'; // устанавливаем цвет шрифта
            ctx.fillText("Игра Окончена. Кликните, чтобы начать заново" , 150, 150); // отрисовываем надпись по координатам X,Y
            ctx.fillText("Ваш счет: " + score(man.score,eggs.length) , 150, 180); // отрисовываем счет
            
            // назначаем нашему canvas OnClick при котором запустится функция Завершения игры с флагом "gameover"
            example.onclick = function(e) { gameComplete('gameover'); }
          }
          // Если наши жизни еще больше 0, а вот у птички HP дошло до 0
          else if(fly.livesScore <=0)
          {
            ctx.font = 'normal 14px Arial';// устанавливаем шрифт
            ctx.fillStyle = '#FFF';// устанавливаем цвет шрифта
            ctx.fillText("Уровень "+level+" пройден. Кликните, чтобы перейти на следующий" , 150, 150);// отрисовываем надпись по координатам X,Y
            ctx.fillText("Ваш счет: " + score(man.score,eggs.length) , 150, 180);// отрисовываем счет
            
            // назначаем нашему canvas OnClick при котором запустится функция Завершения игры с флагом "nextLevel"
            example.onclick = function(e) { gameComplete('nextLevel'); }
          }
          else
          {
              // Если кликнуть по окну Мышкой pause станет равен 1 и игра будет поставлена на паузу
              example.onclick = function(e) { pause=1; }
              backHp.draw(); // отрисовываем задний, красный фон HP птички
              frontHp.draw(); // отрисовываем зеленый прямоугольник HP птички
              
              rectText('#FFF','normal 12px Arial','Уровень: ' + level, 15, 25); // прописываем уровень
              rectText('#FFF','normal 10px Arial',fly.livesScore, fly.x, fly.y+8); // прописываем HP
              
              
              rectText('#FFF','normal 12px Arial',"счет: " + man.score, 100, 25); // прописываем Счет
             
              rectText('#FFF','normal 14px Arial',"разбилось: " + eggs.length , 10, 405); // прописываем кол-во разбитых яиц
              rectText('#FFF','normal 14px Arial',"жизни: " + man.lives , 120, 405); // прописываем кол-во жизней
              rectText('#FFF','normal 12px Arial',"управление: A - влево, D - вправо, Пробел - прыжок, 2 раза Пробел - двойной прыжок " , 10, 425); // прописываем управление
              rectText('#FFF','normal 12px Arial',"задача: ловить яйки" , 10, 440); // прописываем задачу
              rectText('#FFF','normal 12px Arial',"ЛКМ по окну - пауза" , 200, 440); // прописываем задачу
              
              // Задаем координаты  шкале HP птички
              // красная шкала НР
              backHp.x = fly.x+20;
              backHp.y = fly.y;
              
              // Зеленая шкала НР
              frontHp.x = fly.x+20;
              frontHp.y = fly.y;
              
             
              
              
          
          // если анимация человечка разблокирована 
         if(man.animateBlock==0)
         {
            // вызываем счетчик кадров человечка
            man.animate();
         }
          
          // вызываем счетчик кадров птички
          fly.animate();
          
          fly.x += fly.speedX; // меняем координаты по оси X у птички 
          man.x +=man.speedX; // меняем координаты по оси X у человечка
          
          man.draw(); // отрисовываем человечка
          
          // Если скорость движение по Оси Y меньше 2.5 (скорость приземления)
          if(man.speedY<2.5)
          {
                man.speedY +=gravity ; // меняем скорость перемещения по оси Y у человечка, т.е. гравитация сначала снижает скорость до 0, а потом ниже 0, т.е. человечка начинает тянуть вниз
          }
          
          man.y +=man.speedY ; // меняем координаты человечка по оси Y
         
          fly.draw(); // отрисовываем птичку
          
          
            fly.timeOut -=1; // снижаем на 1 таймаут выброса яйца или кирпича
            
            // Если таймаут выброса айца/кирпича меньше 0
            if(fly.timeOut < 0)
            {
                // устанавливаем новый таймер
                fly.timeOut = Math.random()*150;
                
                // выбираем рандомно что будем кидать 0 - кирпич, 1 - яйцо
                EggOrKirp = Math.round(Math.random());
                
                if(EggOrKirp == 0)
                {
                 
                    // подгружаем кирпич по тем координатам
                    kirpich =  new rectImage('images/kirp.png' , fly.x+fly.width/2,fly.y+fly.height/2,20,15 ,40,19,0,0,2);
                    // устанавливаем Таргет. Т.е. при столкновении с человечком он отнимет у него жизнь, а при столкновении с землей или пнем пропадет
                    kirpich.target = 1;
                    // добавляем в массив яиц/кирпичей
                    miniballs.push(kirpich);
                }
                else
                {
                    // подгружаем яйцо
                    egg =  new rectImage('images/egg.png' , fly.x+fly.width/2,fly.y+fly.height/2,10,12,21,30,0,0,2);
                    // устанавливаем Таргет. Т.е. при столкновении с человечком он увеличит счет на 1, а при столкновении с землей или пнем разобьется
                    egg.target = 2;
                    // добавляем в массив яиц/кирпичей
                    miniballs.push(egg);
                }
            }
            
            
            // обрабатываем массив ЯИК / КИРПИЧЕЙ
            for(var i =0; i< miniballs.length; i++)
            {
                // отрисовываем текущее яйцо / кирпич.
                miniballs[i].draw();
                
                // меняем положение того что отрисовали по оси y
                miniballs[i].y += miniballs[i].speedY;
                
                // Если это что-то столкнулось с человечком
                if(collision(miniballs[i],man))
                {
                    // Если это кирпич
                    if(miniballs[i].target == 1)
                    {
                        // удаляем из массива яиц/ кирпичей
                        miniballs.splice(i, 1); 
                         
                        // снижаем кол-во жизней человечка
                        man.lives -=1;
                        // возвращаем человечка к левому краю
                        man.x = 0;
                        // запускаем следущий цикл и miniballs[i];
                        continue;
                    }
                    else
                    {
                        // если это было яйцо, убираем его из массива
                        miniballs.splice(i, 1);
                        // увеличиваем счет человечка
                        man.score +=1;
                        // уменьшаем HP у птички
                        fly.livesScore -=1;
                        fly.livesPercent = 100/fly.lives; // если 5 жизней это 100%, то сколько процентов 1 жизнь у птички?
                        frontHp.width = frontHp.width - fly.livesPercent; // отнимаем ширину у зеленой шкалы жизней на %
                        // запускаем следущий цикл и miniballs[i];
                        
                        continue;
                    }
                }
                
                // Если то, что падает столкнулось с пнем
                if(collision(miniballs[i],pen))
                {
                    // Если это был кирпич
                    if(miniballs[i].target == 1)
                    {
                        // просто удаляем его из массива
                        miniballs.splice(i, 1);
                        // запускаем следущий цикл и miniballs[i];
                        continue;
                    }
                    else
                    {
                        // если, это было яйко, тогда оно должно разбиться
                        // подгружаем изображение разбитого яйка 
                         
                        egg1 =  new rectImage('images/egg2.png' , miniballs[i].x,miniballs[i].y+5,10,12 ,18,15);
                        // и добавляем в массив разбитых яиц.
                        eggs.push(egg1);
                        // удаляем из массива Яиц / кирпичей
                        miniballs.splice(i, 1);
                        // запускаем следущий цикл и miniballs[i];
                        continue;
                    }
                }
                
                // если то, что падает по оси Y, упало ниже 380
                if(miniballs[i].y > 380 )
                {
                    // Если это был кирпич
                    if(miniballs[i].target == 1)
                    {
                        // просто удаляем его из массива яиц/ кирпичей
                        miniballs.splice(i, 1);
                        // запускаем следущий цикл и miniballs[i];
                        continue;
                    }
                    else
                    {
                        // если, это было яйко, тогда оно должно разбиться
                        // подгружаем изображение разбитого яйка 
                         
                        egg1 =  new rectImage('images/egg2.png' , miniballs[i].x,miniballs[i].y,10,12 ,18,15);
                        eggs.push(egg1);
                        miniballs.splice(i, 1);
                        // запускаем следущий цикл и miniballs[i];
                        continue;
                    }
                }
            }
             
            // обрабатываем массив разбитых яик
            for(var e=0;e < eggs.length;e++)
            {
                // отрисовываем яйки
                eggs[e].draw();
            }
            
            // Если позиция Птички по оси X
            // Стала больше или равна ширине экрана минус ширина птички
            // иными словами птичка уперлась в Правый край окна
            if(fly.x >= example.width - fly.width)
            {
                // меняем скорость птички, теперь она движется в обатную сторону по оси X
                fly.speedX *= -1;
                // меняем ряд в ImageSet
                fly.animateRyad = 1;
                
            }   
            
            // Если птичка уперлась в левый край окна
            if(fly.x <=0)
            {
                // опять домножаем скорость на -1, -1 * -1 = 1, т.е. птичка теперь полетит в обратную сторону
                fly.speedX *= -1;
                // меняем ряд в imageSet
                fly.animateRyad = 0;
            }
            
            // Если человечек уперся в правый край Окна
            if(man.x >= example.width - man.width)
            {
                // просто непускаем его дальше устанавливая ему координу X= ширина окна минус ширина человечка
                man.x = example.width-man.width;
            }
            //если человечек уперся в Левый край Окна
            if(man.x <= 0)
            {
                // просто не пускаем его дальше задавая ему координату X=0
                man.x = 0;
            }
            
            // Если по оси Y  человечек достиг заданного нижнего края, заданного для него
            if(man.y > example.height - pole.height-man.height +30  )
            { 
                // невыпускаем его ниже пределов этого края
                man.y = example.height - pole.height-man.height+30;
                // кол-во сделанных прыжков сводим к нулю
                man.jump = 0;
            }
            
            // Если пересекаются человечек и пень
            if(collision(man,pen))
            {
                // прыжки скидываем
                man.jump=0;
                // координаты по Y у человечка становятся координатами Пня - Высота человечка
                man.y = pen.y - man.height;
            }
        }
    }
    
        
    
    
    },1000/40); // устанавливаем частоту setInterval
    
    // Функция по созданию объекта изображения, которое будем отрисовывать
    // src - ссылка на изображение 
    // x - первоначальные координаты элемента по оси X
    // y - первоначальные координаты Элемента по оси Y
    // width - ширина
    // height - высота
    // num - кол-во кадров для возможной анимации в ImageSet
    // speedX - скорость по оси X
    // speedY - скорость по оси Y
    // HP - изначальное кол-во жизней
    // cellW - ширина 1 блока в ImageSet
    // cellH - высота 1 блока в ImageSet
    
    function rectImage(src, x, y, width, height, cellW=0,cellH=0,num=0,speedX=0,speedY=0)
    {
        this.img = new Image(); // создаем объект изображение
        this.img.src = src; // устанавливаем ссылку на изображение
        this.x = x; // устанавливаем объекту координаты по оси x
        this.y  = y;// устанавливаем объекту координаты по оси y
        this.speedX = speedX; // скорость X
        this.speedY = speedY; // скорость Y
        this.width = width; // ширина
        this.height = height; // высота
        this.cellW = cellW; // ширина
        this.cellH = cellH; // высота
        this.animateRyad = 0; // ряд ImageSet
        this.animateScore = 0; // блок ряда ImageSet
        this.animate = function()
        {
            // меняем номер блока ряда в ImageSet
            this.animateScore +=1;
            // Если дошли до конца (num), максимального кол-ва
            if(this.animateScore > num)
            {
                // то присваиваем значение 1
                this.animateScore = 1;
            }
                
        };
        
        this.draw = function()
        {
            // отрисовываем блок из ImageSet
            // Координаты начала вырезки блока по X
            sx = this.animateScore * this.cellW ;
            // Координаты начала вырезки блока по Y
            sy = this.animateRyad  * this.cellH ;
            
            // от sx до sx+cellW
            // и от sy до sy+cellH
            // вырежем из коллекции изображений(ImageSet) квадратик, и вставим его по координатам this.x и this.y, подогнав под this.width и this.height
            ctx.drawImage(this.img, sx , sy , this.cellW , this.cellH, this.x, this.y, this.width, this.height);
        }
    }       
    
    // Функция вставки прямоугольников
    // color - цвет
    // x - координата по x куда вставлять
    // y - координата по y куда вставлять
    // width - ширина прямоугольника
    // height - высота прямоугольника
    function rect(color, x, y, width,height)
    {
        this.color = color; // устанавливаем цвет
        this.x = x; // координата по х
        this.y = y; // координата по у
        this.width = width; // ширина
        this.height = height; // высота
        this.draw = function() {
            // функция устанавливаем цвет прямоугольника
            ctx.fillStyle = this.color;
            // и отрисовывает его на поле
            ctx.fillRect(this.x,this.y,this.width,this.height);
        }
    }
    
    // Отрисовка текста
    // color - цвет текста
    // font - шрифт текста
    // string - строка
    // x и y координаты левого верхнего угла текста
    function rectText(color,font,string,x,y)
    {
          ctx.font = font;// устанавливаем шрифт
          ctx.fillStyle=color;// устанавливаем цвет шрифта
          ctx.fillText(string, x, y); // отрисовываем надпись на в окне 
    }
        
    // вычитаем из счета игрока кол-во разбитых яиц
    // score - man.score - счет игрока
    // eggs - кол-во разбитых яиц
    function score(score,eggs)
    {
        // Если разность счета и разбитых яиц меньше 0, тогда оставим 0
        // иначе результат
        score = ((score - eggs) <0) ? 0 : score-eggs;
        return score;
    }
    
    // Функция завершения игры
    function gameComplete(flag)
    {
        // Если Флаг GAMEOVER
        if(flag == 'gameover')
        {
          // Это значит, что играть придется заново с первого уровня
          // жизни птички снижаются до 5, как в 1 раунде
          fly.lives = 5;  
          // скорость полета так же снижается
          fly.speedX=3;
          // информация об уровне снижается соответственно
          level = 1;
        }
        else
        {
            // Если флаг не GAMEOVER
            // то переходим на следущий уровень
            
            // Жизни птички увеличиваем на 5
            fly.lives = fly.lives + 5;
            // уровень повышаем на 1
            level+=1; 
            
            // Если птичка летела в обратную сторону по оси Х, т.е. к 0
            // меняем ее скорость, т.к. раунд должен начаться с того, что птичка полетит от левой стенки к правой.
            if(fly.speedX < 0) { fly.speedX *=-1; }
            // увеличиваем скорость перемещения птички
            fly.speedX +=1 ;
        }
        
        // ряд изображений в ImageSet у птички обновляем на 0 по той же причине что и скорость
        fly.animateRyad = 0;
        // скидываем у окна событие onclick
        example.onclick='';
        // положения человtxка по оси X = 0
        man.x=0;
        // положения птички по оси X = 0
        fly.x=0;
        // Кол-во попыток / жизней обновляем до 3
        man.lives=3; 
        
        // обновляем зачения HP птички для отрисовки
        fly.livesScore = fly.lives;
        // обновляем шкалу жизней
        frontHp.width = 100;
        
        // Вычисляем счет исходя из пойманных и разбитых яиц
        man.score = score(man.score,eggs.length);
        // опустошаем массив разбитых яиц
        eggs = [];
        // опустошаем массив падающих яиц/кирпичей
        miniballs = [];
    }
        
    // функция столкновений
    // object - объект который сталкивается
    // target - объект с которым сталкиваемся
    function collision(object,target)
    {
        // Исходя из этих сравнений
        if((object.x+object.width) >= target.x // если координаты Правого края object больше координат Левого края target
            && object.x <= (target.x+target.width) // и если координаты Левого края object меньше координат Правого края target
            && (object.y+object.height) >= target.y // и если координаты Нижнего края object больше координат Верхнего края target
            && object.y < (target.y+target.height)) // и если координаты Верхнего края object меньше координат Нижнего края target
        {
            // то все это значит, что Object пересекся с Target
            return true;
        }
        else
        {
            // Иначе он не пересекся
            return false;
        }
    }
  </script>
    </body>
</html>

архив с игрой. index.html и изображения
eggs.zip

Размещено в html,css, js,jQuery, Идеи

Показов 3954 Комментарии 6

« Проекты Главная страница Flash(AS3) мини-игра »

Всего комментариев 6

Комментарии

	Вот видите) И никакой Flash уже больше не нужен.
	Запись от Usaga размещена 02.04.2019 в 09:25

	Цитата: Сообщение от Usaga Вот видите) И никакой Flash уже больше не нужен. Вижу. Спасибо)
	Запись от pavlinmavlin размещена 02.04.2019 в 10:22

	ага, забавно получилось. хвала HTML5 я тоже заделал похожую в 3D, только практического применения для неё пока что нет)
	Запись от karrbonn размещена 02.04.2019 в 13:22

	Ненужен то ненужен, но на такую поделку во флеше кода было в 5 раз меньше, я помню на мой марио на флеше кода было меньше раза в три чем в вашей игре.
	Запись от Nidl размещена 03.04.2019 в 16:40

	хоть и простая игра но, понравилась (вспомнились советские микропроцессорные игры). в теге указан jQuery - но, в игре его нет, если я правильно понял. и ещё.. ты игру сам с нуля делал или по книге?
	Запись от untyped размещена 05.04.2019 в 13:15

Цитата:

Сообщение от sam063rus

хоть и простая игра но, понравилась (вспомнились советские микропроцессорные игры).
в теге указан jQuery - но, в игре его нет, если я правильно понял.
и ещё..
ты игру сам с нуля делал или по книге?

Нашел функции, которые отрисовывают объекты и изображения в canvas и попрактиковался )

Запись от pavlinmavlin размещена 06.04.2019 в 08:38 pavlinmavlin вне форума

Сообщение форума

Отменить изменения

Архив
< Апрель 2024
Вс	Пн	Вт	Ср	Чт	Пт	Сб
24	25	26	27	28	29	30
31	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	1	2	3	4