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

Порывшись в нетах нашел несколько ресурсов по html5 и canvas:
1) http://msdn.microsoft.com/en-us/library/ms533053(v=VS.85).aspx (куда уж без мс:))
2) http://oneline.org.ru/statii/canvas.html
3) http://webcache.googleusercontent.com/search?q=cache:http://arttu-peka.info/html-5/igri-na-html5-dlja-chajnikov/
4) http://webcache.googleusercontent.com/search?q=cache:http://arttu-peka.info/html-5/igry-na-html5-canvas-dlya-chajnikov-%E2%80%93-chast-ii/
5) http://habrahabr.ru/blogs/canvas/112274/ (имхо, какаято компиляция 3) и 4) )
6) http://wecreategames.com/blog/?p=321
7) http://html5blog.ru/
8) http://w3pro.ru/article/html-5-canvas-dlya-nachinayushchikh
9) http://www.html5canvastutorials.com/
10) http://www.html5dev.ru/
11) http://www.johnegraham2.com/category/web-technology/web-playground/
12) http://simon.html5.org/dump/html5-canvas-cheat-sheet.html
13) http://www.03www.su/
14) http://javascript.internet.com/image-effects/

Еще немного поковырялся с canvas и js. Переместил все свои примеры на minidune.ya.ru - blogspot както болезненно относится к тегам body. Разобрался с массивами и осуществление управления объектом при помощи клавиатуры. Вот результат моих трудов в виде очередного примера: http://minidune.narod.ru/canvas3.html. Можно управлять лиловым квадратиком клавишами вверх, вниз, влево, вправо, и стрелять - используя клавишу пробел.

Исходник примера под катом...

<html>
<head>
  <title>canvasExample</title>
</head>

<body onload="Main()" 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 = 10,//длительность 1 цикла, в мс - аналог delay()
    win_DX=herovina.width,//размеры выводимого фрейма
    win_DY=herovina.height;

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

//Звездное небо. Для массива звезд используется класс
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 player_x,//координаты объекта
    player_y,
    player_dx,//размеры объекта
    player_dy,
    player_move_x,//скорости смещения объекта
    player_move_y;

//Максимальное количество патронов
const bullet_max = 30;
//Массив патронов игрока    
var bullet_x = [bullet_max],
    bullet_y = [bullet_max],
    bullet_true = [bullet_max];
    
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();//инициация мячиков
  
  player_x=win_DX/2;//координаты старта игрока
  player_y=win_DY/2;
  
  player_dx=20;//геометрические размеры игрока
  player_dy=20;
  
  player_move_x=2;//скорость передвижения игрока
  player_move_y=2;
  
  //Начальные паракметры для патронов игрока
  for (var i = 0; i < bullet_max; i++)
   {  
    bullet_true[i]=0;
   }
 }    

//Стадия обновления
function RefreshStuff() 
 {
  RefreshStars();
  RefreshBalls();  
  
  //Движение игрока
  if (k_left==1) {player_x=player_x-player_move_x};
  if (k_right==1) {player_x=player_x+player_move_x};
  if (k_up==1) {player_y=player_y-player_move_y};
  if (k_down==1) {player_y=player_y+player_move_y};

  //Ограничение на перемещение игрока по экрану 
  if (player_x+player_dx>win_DX) {player_x=win_DX-player_dx;}
  if (player_x<0) {player_x=0;}
  if (player_y+player_dy>win_DY) {player_y=win_DY-player_dy;}
  if (player_y<0) {player_y=0;}
  
  //Выстрел
  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]=player_x;//в координатах игрока
        bullet_y[i]=player_y;
        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]+15;//движение патрона вправо по OX
      //Если патрон вылетает за win_DX, то его больше не существует
      if (bullet_x[i]>win_DX) {bullet_true[i]=0;}
     }
   }      

 }

//Стадия отрисовки
function Draw() 
 {
  //Черный фон на весь фрейм
  ctx.fillStyle = "rgb(0,0,0)";
  ctx.fillRect(0,0,win_DX,win_DY)
 
  //Рисуем звезды
  DrawStars();

  //Вывод текста  
  ctx.fillStyle = "rgb(58,95,205)";
  ctx.font = "16px Arial";
  ctx.textBaseline = "top";
  ctx.fillText(timer,10,10);  

  //Вывод игрока
  ctx.fillStyle = "rgb(255,0,255)";
  ctx.fillRect(player_x, player_y, player_dx, player_dy);
  
  //Рисуем патроны 
  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], 12, 12);
     }
   }  
  
  
  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;//считаем таймер
  //Очистка задника
  ctx.clearRect(0,0,herovina.width, herovina.height);
  ctx.beginPath();
  
  //Обновление всего
  RefreshStuff();
  
  //Стадия отрисовки всего
  Draw();

  setTimeout("Refresh()", frameRate);
 }

//Главная функция
function Main() 
 {
  Init();
  
  setTimeout("Refresh()",0);//0 - в начале запуска отсутствует пауза
 }   

</script>
</html>

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

воскресенье, 23 января 2011 г.

HTML5. Canvas. ч.2.

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

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

воскресенье, 23 января 2011 г.

HTML5. Canvas. ч.2.

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

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

воскресенье, 23 января 2011 г.