| 
| last2424 | Дата: Суббота, 16 Августа 2014, 20:17 | Сообщение # 1 |  |   30 мл. блоков Сейчас нет на сайте | Друзья, у меня сегодня хорошее настроение.   Решил написать вам новый урок, урок будет уже о интерфрейсе, я нарисовал примитивную карту на которой будет игра. Сделал div для чата, в общем для этого урока всё готово давай те приступим.
 
 <-- пред. урок
 
 P.S. многие опять после этого скажут что бы я использовал jquery - идите лесом.
   
 Приступим к коду, его сегодня не так много, как вчера, а возможно столько же, но тут в общем карта нарисованная через canvas. Никакого сервера сегодня, только клиент.
 
 Game.php:
 
 Код  <? header("Cache-Control: no-store, no-cache"); //отключаем кеширование, кеш - плохо
 set_time_limit(0); // скрипт работает бесконечно
 
 include 'conf.php'; // вставляем конфигурацию в игру
 
 if($server_work == 1 and $_SESSION['login_player'] != null){ //проверяем если сервер включён и пользователь авторизировался
 ?>
 <!DOCTYPE html>
 <html>
 <head>
 <title>THEBESTGAME</title>
 <script src="condisk_server.js"></script> <!--Подключаем condisk_server.js-->
 <script src="game.js"></script>
 <link rel="stylesheet" href="style_game.css"/>
 </head>
 <body>
 <canvas id="map"></canvas>
 <div id="chat">СДЕСЬ БУДЕТ ЧАТ!</div>
 </body>
 </html>
 <?
 
 }else if($_SESSION['login_player'] == null){ //если пользователь не авторизирован
 
 echo 'Вы не авторизирвоались!'; // выводим строчку "Вы не авторизировались!"
 
 }else if($server_work != 1){ //если сервер не включён
 
 echo 'Сервер выключен.'; // выводим строчку "Сервер выключен."
 
 }
 
 ?>
 Эх, давай те разбирать. Добавил 4 новых строчки.
 Подключил style_game.css.
 Подключил файл game.js.
 Создал “CANVAS”.
 Создал div в котором написано – “СДЕСЬ БУДЕТ ЧАТ!”.
 Усё(всё).
 
 Приступим к следующему, самому большому куску, где собственно всё рисуется, создаётся.
 
 Game.js:
 
 Код     
 var karta; //экран
 var ckarta; //контекст экрана
 
 var gameWidth = 900; //ширина игрового экрана
 var gameHeight = 400; //высота игрового экрана
 
 var groundgreen = new Image(); //создаём переменную groundgreen в которую пихаем новый экземляр картинки
 groundgreen.src = "images/groundgreen.jpg"; //указываем где находится картинка
 
 var tree = new Image(); //создаём переменную tree в которую пихаем новый экземляр картинки
 tree.src = "images/tree.png"; //указываем где находится картинка
 
 window.onload  = function(){ //функция старта
 karta = document.getElementById("map"); //подключаем canvas к карте
 ckarta = map.getContext("2d"); //в даём доступ к канвасу для рисования
 
 karta.width = gameWidth; //ширина экрана
 karta.height = gameHeight //высота экрана
 drawImg(); //запускаем функцию рисования
 }
 
 function drawImg() //обьявляем функцию drawImg
 {
 for(var x = 0; x < 29; x++){ //запускаем первый цикл в котором у нас рисуется вся трава в ширину
 for(var y = 0; y < 13; y++){ //запускаем второй цикл в котором у нас рисуется вся трава в длинну
 ckarta.drawImage(groundgreen, 0, 0, gameWidth, gameHeight, 32*x, 32*y, gameWidth, gameHeight); //рисуем <img src="http://s12.ucoz.net/sm/1/smile.gif" border="0" align="absmiddle" alt="smile" />
 }
 }
 
 //деревья буду рисовать без циклов, надо будем сами сделаете
 //первая линия
 ckarta.drawImage(tree, 0, 0, gameWidth, gameHeight, 50, 50, gameWidth, gameHeight); //рисую
 ckarta.drawImage(tree, 0, 0, gameWidth, gameHeight, 200, 50, gameWidth, gameHeight); //рисую
 ckarta.drawImage(tree, 0, 0, gameWidth, gameHeight, 350, 50, gameWidth, gameHeight); //рисую
 ckarta.drawImage(tree, 0, 0, gameWidth, gameHeight, 500, 50, gameWidth, gameHeight); //рисую
 ckarta.drawImage(tree, 0, 0, gameWidth, gameHeight, 650, 50, gameWidth, gameHeight); //рисую
 ckarta.drawImage(tree, 0, 0, gameWidth, gameHeight, 800, 50, gameWidth, gameHeight); //рисую
 //вторая линия
 ckarta.drawImage(tree, 0, 0, gameWidth, gameHeight, 50, 150, gameWidth, gameHeight); //рисую
 ckarta.drawImage(tree, 0, 0, gameWidth, gameHeight, 200, 150, gameWidth, gameHeight); //рисую
 ckarta.drawImage(tree, 0, 0, gameWidth, gameHeight, 350, 150, gameWidth, gameHeight); //рисую
 ckarta.drawImage(tree, 0, 0, gameWidth, gameHeight, 500, 150, gameWidth, gameHeight); //рисую
 ckarta.drawImage(tree, 0, 0, gameWidth, gameHeight, 650, 150, gameWidth, gameHeight); //рисую
 ckarta.drawImage(tree, 0, 0, gameWidth, gameHeight, 800, 150, gameWidth, gameHeight); //рисую
 //последняя линия
 ckarta.drawImage(tree, 0, 0, gameWidth, gameHeight, 50, 250, gameWidth, gameHeight); //рисую
 ckarta.drawImage(tree, 0, 0, gameWidth, gameHeight, 200, 250, gameWidth, gameHeight); //рисую
 ckarta.drawImage(tree, 0, 0, gameWidth, gameHeight, 350, 250, gameWidth, gameHeight); //рисую
 ckarta.drawImage(tree, 0, 0, gameWidth, gameHeight, 500, 250, gameWidth, gameHeight); //рисую
 ckarta.drawImage(tree, 0, 0, gameWidth, gameHeight, 650, 250, gameWidth, gameHeight); //рисую
 ckarta.drawImage(tree, 0, 0, gameWidth, gameHeight, 800, 250, gameWidth, gameHeight); //рисую
 }
 В самом начале объявляем 6 переменных, karta, ckarta, gameWidth, gameHeight, groundgreen и tree.
 
 Первые две переменные это подключение канваса и разрешение его редактирования через JS, gameWidth и gameHeight – это ширина и высота игрового экрана, groundgreen – картинка травы, tree – картинка дерева. То что идёт после groundgreen и tree это я указываю местоположение картинок.
 
 После этого запускаем функцию которая срабатывает после полной загрузки страницы, подключаем канвас, даём доступ, настраиваем ширину и высоту. После этого переходим на drawImg();
 
 Там запускаем цикл рисования из 2 for в которых переменные x и y, думаю, вы поняли.
 
 Между { { и } } идёт длинная функция вырисовки объектов, drawImage, сначало какую часть объекта мы рисуем, в данном случае всю картинку, потом ширина и высота картинки не на экране, я написал gameWidth и gameHeight если напишем 32 и 32 то трава будет размана, потом идёт местоположение картинок в данном случае они каждый раз умножаются на x и y и опять пишем ширину и высоту.
 
 Потом я пишу “дохренища” всяких функций рисования, но в данном случае я рисую деревья.
 
 Почему я нарисовал их примитивным способом. Ответ будет в конце урока. ↓
 
 Нам остался только один файл style_game.css:
 
 Код  body { background: #000;
 margin: 0px;
 }
 #chat {
 background: #fff;
 width: 900px;
 height: 200px
 }
 
 #map
 {
 display: block;
 background: #fff;
 }
 Тут мы указываем цвет всех частей, ширину и высоту чата, дисплэй экрана, отступ body.
 
 А теперь долгожданный ответ:
 
 Я вас учу, значит должны быть задания
   
 Вот вам задание, написать нормальный вариант рисования деревьев.
 
 Всё, я пошёл пилить проект дальше.
 
 Картинки.
 Добавлено (16.08.2014, 18:23)---------------------------------------------
 UP!
 Добавлено (16.08.2014, 20:17)---------------------------------------------
 Ну где срач то?
  
 Предупреждение: всё что я написал в зачёркнутом виде является шуткой и никак не пытает обидеть того к кому обращаются.
 (нет)
 
 Сообщение отредактировал last2424 - Суббота, 16 Августа 2014, 16:09 |  |  |  |  |