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 |
|
| |