Разработка игр в ОС GNU/Linux и не только ...: HTML5. Canvas. ч.3.

Еще немного поглумившись с js, потихонечку перешел к работе со спрайтами. Для анимации спрайтов перевел с "сей" cвою функцию ControlAnimate, за что - огромное спасибо Mainamez за помощь) И теперь трепещите! Великий, Ужасный и Брутальный Свиборг теперь на сабже: http://minidune.narod.ru/canvas5.html. Управление аналогично предудщему примеру.

Исходник у проги под катом...
<html>
<head>
  <title>canvasExample</title>
</head>

<body onload="Init()" onkeydown="get_key_down(event);" onkeyup="get_key_up(event);">
<canvas width='800' height='480' id='herovina'>Обновите браузер</canvas>
</body>

<script>

//Тут пишем сам текст проги на js

//Служебные переменные
var herovina = document.getElementById("herovina"),
    ctx = herovina.getContext('2d'),
    timer=0,//таймер, в мс
    frameRate = 0,//длительность 1 цикла, в мс - аналог delay()
    counter = 0,
    fps = 0,
    fps_max=0, 
    win_DX=herovina.width,//размеры выводимого фрейма
    win_DY=herovina.height;

//Cвоя функция random
function random(val)
 {
  return Math.floor(Math.random()*val); 
 }

//объект
var obj_frame=0,
    obj_frame_count=0;

function Some(frame,frame_count,c)
 {
  frame_count=frame_count+1;
  if (frame_count>=c) 
   {
 frame_count=0;
 frame=frame+1;   
   }

  return {x: frame, y: frame_count};
 }

function Hren()
 {
  //вызов
  var result = Some(obj_frame,obj_frame_count,2);
  obj_frame = result.x;
  obj_frame_count = result.y; 
  
  //Вывод текста  
  ctx.fillStyle = "rgb(255,0,255)";
  ctx.font = "16px Arial";
  ctx.textBaseline = "top";
  ctx.fillText("obj_frame="+obj_frame+", obj_frame_count="+obj_frame_count,10,80);
 }
 
//Функция для контроля анимации                    
function ControlAnimate(frame,//номер текущего кадра
                        frame_start,//стартовый кадр
                        frame_finish,//финальный кадр
                        frame_delta,//шаг между кадрами
                        frame_count,
                        delay,//задержка между кадрами в циклах
                        frame_loop)//зациклить ли анимацию
 {
  if (frame_count>=delay)
   {
    frame_count=0;
    if (frame_start<frame_finish) {frame=frame+frame_delta;}//следующий кадр анимации
    if (frame_start>frame_finish) {frame=frame-frame_delta;}//следующий кадр анимации
   }

  if (frame>frame_finish && frame_start<frame_finish ||
      frame<frame_finish && frame_start>frame_finish)
   {
    frame=frame_finish;
    if (frame_loop>0) {frame=frame_start;}//возвращаемся на старый кадр
   }
  
  frame_count=frame_count+1;//счетчик задержки
 
  return {x: frame, y: frame_count};
 }

//Звездное небо. Для массива звезд используется класс
var star = new Array;

function StarClass(x,y,speed)
 {
  this.x = x;
  this.y = y;
  this.speed = speed;
 }

//Инициация звездного неба
function InitStars()
 {
  //Исходные значение для членов массива star
  for (var i = 1; i < 50; i++)
   {
    var s = new StarClass(random(win_DX),
                          random(win_DY),
                          random(4)+1);                  
    star.push(s);
   }
 }

//Движение звездного неба
function RefreshStars()
 {
  for (var i = 0; i < star.length; i++)
   {
 star[i].x=star[i].x-star[i].speed;
 if (star[i].x < 0)//если звезда вылетает за границу экрана
  {
      star[i].x = win_DX;
      star[i].y = random(win_DY);
      star[i].speed = random(4) + 1;
      break;
     }
   }
 } 

//Вывод звездного небы
function DrawStars()
 {
  var distance;//мнимая дистанция до экрана
  for (var i = 0; i < star.length; i++)
   {
 //резмеры звезды и ее цвет зависят от ее близости к экрану   
 distance = star[i].speed*80;
 if (distance < 100) distance = 100;//не темная
 ctx.fillStyle = "rgb("+distance+","+distance+","+distance+")";
 ctx.fillRect(star[i].x,star[i].y,distance/30,distance/30);
   }  
 }

//Мячики - используется самый обычный массив
const ball_max=random(30)+15;

var ball_x = [ball_max],//координаты объекта
    ball_y = [ball_max],
    ball_radius = [ball_max],//размеры объекта
    ball_move_x = [ball_max],//скорости смещения объекта
    ball_move_y = [ball_max];

//Инициация мячиков
function InitBalls()
 {
  for (var i = 0; i < ball_max; i++)
   {  
    ball_x[i]=win_DX/2;
    ball_y[i]=win_DY/2;
  
    ball_radius[i]=random(ball_max/2)+1;
  
    ball_move_x[i]=random(ball_max/2)-random(ball_max/2);
    ball_move_y[i]=random(ball_max/2)-random(ball_max/2);
    
    if (ball_move_x[i]==0) {ball_move_x[i]=1;}
    if (ball_move_y[i]==0) {ball_move_y[i]=1;}   
   } 
 }

//Движение мячиков
function RefreshBalls()
 {
  for (var i = 0; i < ball_max; i++)
   {  
    ball_x[i]=ball_x[i]+ball_move_x[i];
    ball_y[i]=ball_y[i]+ball_move_y[i];
  
    if (ball_x[i]+ball_radius[i]>=win_DX || ball_x[i]<0) 
       {ball_move_x[i]=-ball_move_x[i];}
    if (ball_y[i]+ball_radius[i]>=win_DY || ball_y[i]<0) 
       {ball_move_y[i]=-ball_move_y[i];}
   }
 }
  
//Вывод мячиков  
function DrawBalls()
 {
  for (var i = 0; i < ball_max; i++)
   { 
    //для справок http://oneline.org.ru/statii/canvas.html
    ctx.beginPath();//начало рисования
    ctx.lineWidth = random(7)+1;//толщина линий
    ctx.strokeStyle = "rgba(90,50,205,20)";//при использовании рисовании без заливки
    //ctx.fillStyle = "rgb(9,5,205)";//при использовании в рисовании заливки
    //Рисование дуги
    //ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise); // Create the arc path.
 ctx.arc(ball_x[i],ball_y[i],ball_radius[i],0,Math.PI*2, true);
 
 ctx.stroke();//конец рисования без заливки
    //ctx.fill();//конец рисования c заливкой
   }  
 }
      
//Задник - изображение 
var BackGround = new Image(),
    PlayerSprite = new Image(); 
   
//Игрок
var p_x,//координаты объекта
    p_y,
    p_dx,//размеры объекта
    p_dy,
    p_move_dx,//скорости смещения объекта
    p_move_dy,
    p_move = 0,
    p_frame,
    p_frame_count,
    p_start_frame,
    p_finish_frame,
    p_frame_delay,//заержка смены кадра анимации
    
    p_view_right,//игрок смотрит вправо - направлениие вектора последнего движения по OX
    p_active,//игрок активен
    
    p_TX_x,
    p_TX_y,
    p_TX_dx,
    p_TX_dy;

//Максимальное количество патронов
const bullet_max = 30;

//Массив патронов игрока    
var bullet_x = [bullet_max],
    bullet_y = [bullet_max],
    bullet_dx = [bullet_max],
    bullet_dy = [bullet_max],
    bullet_move_dx = [bullet_max],
    bullet_true = [bullet_max],
    bullet_matugalnik = [bullet_max];

var matuga = [6];
    
//Переменные для управления    
var k_down = 0,
    k_up = 0,
    k_left = 0,
    k_right = 0,
    k_fire = 0;

function get_key_down(e)
 {
  if (e.keyCode == 37) k_left = 1;
  if (e.keyCode == 38) k_up = 1;
  if (e.keyCode == 39) k_right = 1;
  if (e.keyCode == 40) k_down = 1;
  if (e.keyCode == 32) k_fire = 1; 
 }

function get_key_up(e)
 {
  if (e.keyCode == 37) k_left = 0;
  if (e.keyCode == 38) k_up = 0;
  if (e.keyCode == 39) k_right = 0;
  if (e.keyCode == 40) k_down = 0;
 
  if (e.keyCode == 32) k_fire = 0;
 }

//Стадия инициализации
function Init()
 {
  InitStars();//инициация звезд
  InitBalls();//инициация мячиков
  
  //Грузим изображение фона
  BackGround.src = "back.png";
  PlayerSprite.src = "swiborg.png";
  
  //Игрок
  p_x=win_DX/2;//координаты старта игрока
  p_y=win_DY/2;
  
  p_dx=80;//геометрические размеры игрока
  p_dy=80;
  
  p_move_dx=2;//скорость передвижения игрока
  p_move_dy=2;
  
  p_frame=1;
  p_frame_count=0;
  p_start_frame=p_frame;
  p_finish_frame=2;
  p_frame_delay=80;
  
  p_view_right=1;
  p_active=0;
  
  p_TX_x=0;
  p_TX_y=256;
  p_TX_dx=128;
  p_TX_dy=128;
  
  //Начальные параметры для патронов игрока
  for (var i = 0; i < bullet_max; i++)
   {  
    bullet_true[i]=0;
   }
   
  matuga[1] = "You!"
  matuga[2] = "Look"
  matuga[3] = "Like"
  matuga[4] = "A"
  matuga[5] = "Shit!" 
  matuga[6] = "Pesec!" 
   
 }    

//Стадия обновления
function RefreshStuff() 
 {
  RefreshStars();
  RefreshBalls();  
  
  //Движение игрока и соответствующие ей анимации
  if (k_left==1)//движение влево 
   {
 p_x=p_x-p_move_dx;//перемещение игрока вдоль OX
 p_view_right=0;//вправо игрок не смотрит
    p_TX_x=0;//текстурные координаты
    p_TX_y=128;
    p_start_frame=1;//начальный и конечный кадр анимации движения
    p_finish_frame=4;
    p_frame_delay=10;
    p_active=1;
   }
   
  if (k_right==1)//движение вправо
   { 
 p_x=p_x+p_move_dx;//перемещение игрока вдоль OX
 p_view_right=1;//игрок смотрит вправо
    p_TX_x=0;//текстурные координаты
    p_TX_y=0;
    p_start_frame=1;//начальный и конечный кадр анимации движения
    p_finish_frame=4;
    p_frame_delay=10;
    p_active=1;
   }
    
  if (k_up==1) {p_y=p_y-p_move_dy;}//движение вверх
  if (k_down==1) {p_y=p_y+p_move_dy;}//движение вниз 
  
  if (k_up==1 || k_down==1)//при движении вверх и вниз будет использоваться различная анимация
   {
 if (p_view_right==1)//если игрок смотрит вправо  
  {
      p_TX_x=0;
      p_TX_y=0;   
  } 
  
    if (p_view_right==0)//если игрок не смотрит вправо
     {
      p_TX_x=0;
      p_TX_y=128;   
  } 
    p_start_frame=1;//начальный и конечный кадр анимации движения
    p_finish_frame=4;
    p_frame_delay=10;
    p_active=1;
   }
       
  if (k_left==0 && k_right==0 && k_up==0 && k_down==0 && k_fire==0)//анимация в состояние покоя
   {
    if (p_frame>1 && p_active==1)//переход к анимации покоя из активного состояния
  {
   if (p_view_right==1)//если игрок смотрит вправо   
    {
        p_TX_x=0;
        p_TX_y=0;   
    } 
  
      if (p_view_right==0)//если игрок не смотрит вправо  
    {
        p_TX_x=0;
        p_TX_y=128;   
    } 
      p_start_frame=p_frame;
      p_finish_frame=1;  
  } 
    
    if (p_frame==1 && p_active==1)//переход к анимации покоя из активного состояния
  {
      p_TX_x=0;
      p_TX_y=256;  
      p_start_frame=p_frame;
      p_finish_frame=2;
      p_frame_delay=80;
      p_active=0;//состояние покоя
  }

   }                       
                         
  //Ограничение на перемещение игрока по экрану 
  if (p_x+p_dx>win_DX) {p_x=win_DX-p_dx;}
  if (p_x<0) {p_x=0;}
  if (p_y+p_dy>win_DY) {p_y=win_DY-p_dy;}
  if (p_y<0) {p_y=0;}
  
  if (k_fire==1)//при стрельбе
   { 
 if (p_view_right==1)
     {
      p_TX_x=0;
      p_TX_y=256+128;   
  }
 if (p_view_right==0)   
  {
      p_TX_x=256;
      p_TX_y=256+128;   
  }  
    p_start_frame=1;
    p_finish_frame=2;
    p_frame_delay=15;
    p_active=1;
   }
   
  //Выстрел
  if (k_fire==1) 
   {
    for (var i = 0; i < bullet_max; i++)
     {  
   if (bullet_true[i] == 0)//если i-го патрон не существует, то
    {
  bullet_true[i]=1;//теперь он существует
        bullet_x[i]=p_x+p_dx/2;//в координатах игрока
        bullet_y[i]=p_y+p_dy/1.8+random(4)-random(4);
        bullet_dx[i]=random(15)+6;
        bullet_dy[i]=random(6)+6;           
        bullet_matugalnik[i]=random(6)+1;
               
        //направление движения патрона взависимости от того куда смотрит игрок
       if (p_view_right==1) {bullet_move_dx[i]=random(6)+4;}//если смотрит вправо
       if (p_view_right==0) {bullet_move_dx[i]=-(random(6)+4);}//если смотрит влево     
        break;//вываливаемся из цикла
       }
     }      
    //k_fire=0;//если хотим чтобы было 1 нажатие
   }
  
  //Движение патрона 
  for (var i = 0; i < bullet_max; i++)
   {  
 if (bullet_true[i] == 1)//если i-ый патрон существует, то
  {
      bullet_x[i]=bullet_x[i]+bullet_move_dx[i];//движение патрона вдоль OX
      //Если патрон вылетает за win_DX или 0, то его больше не существует
      if (bullet_x[i]>win_DX ||
          bullet_x[i]+bullet_dx[i]<0) 
         {bullet_true[i]=0;}
     }
   }      

  var res=ControlAnimate(p_frame,//номер текущего кадра
                         p_start_frame,//стартовый кадр
                         p_finish_frame,//финальный кадр
                         1,//шаг между кадрами
                         p_frame_count,
                         p_frame_delay,//задержка между кадрами в циклах
                         1);//зациклить ли анимацию
  p_frame=res.x;
  p_frame_count=res.y; 

 }
              
//Стадия отрисовки
function Draw() 
 {
  //Черный фон на весь фрейм
  //ctx.fillStyle = "rgb(0,0,0)";
  //ctx.fillRect(0,0,win_DX,win_DY)
 
 
  //Вывод повернутого изображения
  //ctx.save();//запоминаем состояние
  //ctx.translate(win_DX/2,win_DY/2);//смещаем на половину размера изображения
  //ctx.rotate(45 * Math.PI / 180);//поворачиваем на нужный угол
  //ctx.translate(-win_DX/2,-win_DY/2);//смещаем повернутое изображение обратно
  //ctx.drawImage(BackGround,0,0, win_DX, win_DY);//рисуем изображение
  //ctx.restore();//восстанавливаем состояние

  //Вывод задника на весь фрейм
  ctx.drawImage(BackGround,0,0, win_DX, win_DY);//рисуем изображение

  //Рисуем звезды
  DrawStars();

  //Вывод текста  
  ctx.fillStyle = "rgb(255,0,255)";
  ctx.font = "12px Arial";
  ctx.textBaseline = "top";
  ctx.fillText("timer="+timer+", counter="+counter+", fps_max="+fps_max,10,10);
  
  //Вывод игрока
  //ctx.fillStyle = "rgb(255,0,255)";
  //ctx.fillRect(p_x, p_y, p_dx, p_dy);
  
  //Вывод части изображения
  ctx.fillText("p_TX_x="+p_TX_x+", p_TX_y="+p_TX_y+", p_frame="+p_frame+", p_frame_count="+p_frame_count,10,40);
 
   //Рисуем патроны 
  for (var i = 0; i < bullet_max; i++)
   {  
 if (bullet_true[i] == 1)//если i-ый патрон существует, то
  {
      ctx.fillStyle = "rgb(0,255,255)";
      ctx.fillRect(bullet_x[i], bullet_y[i], bullet_dx[i], bullet_dy[i]);
      //ctx.fillStyle = "rgb(255,200,200)";
      //ctx.font = "12px Arial";
      //ctx.fillText(matuga[bullet_matugalnik[i]],bullet_x[i],bullet_y[i]);
      
     }
   }  
 
  ctx.drawImage(PlayerSprite,
                p_TX_x+p_TX_dx*(p_frame-1),//координаты начала среза, относительно текстуры
                p_TX_y,
                p_TX_dx,//величина среза
                p_TX_dy,
                p_x,//координаты вывода вырезанного куска
                p_y, 
                p_dx,//размеры куска 
                p_dy);
/*
  //Вывод всего изображения
  ctx.drawImage(PlayerSprite,
                p_x,//координаты
                p_y, 
                p_dx,//размеры
                p_dy);                
*/  
                  
  DrawBalls();//рисуем мячики
  
  //Рамка
  ctx.beginPath();
  ctx.lineWidth = "10";//толщина линий
  ctx.strokeStyle = "rgb(0,0,205)";//цвет рамки
  ctx.rect (0,0,win_DX,win_DY);//сама рамка
  ctx.stroke(); 
 }

//Стадия обновления
function Refresh() 
 {
  timer=timer+frameRate;//считаем таймер, мс
  counter=counter+1;//суммарное число циклов
  fps++;//количество пройденных циклов за 1 секунду
  
  //Очистка задника
  //ctx.clearRect(0,0,herovina.width, herovina.height);
  //ctx.beginPath();
  
  //Обновление всего
  RefreshStuff();
  
  //Стадия отрисовки всего
  Draw();
 }
  
setInterval(Refresh,frameRate);//обновление

//Расчет ФПС
function checkFps() 
 {  
  fps_max = fps;
  fps = 0; 
 }
setInterval(checkFps, 1000);

</script>
</html>
Разработка игр в ОС GNU/Linux и не только ...

вторник, 25 января 2011 г.

HTML5. Canvas. ч.3.

Комментариев нет:

Отправить комментарий

вторник, 25 января 2011 г.

HTML5. Canvas. ч.3.

Комментариев нет:

Отправить комментарий

вторник, 25 января 2011 г.
