Leaderboard

Hi, today I'm going to show you how to display HTML in-game. (CSS, JavaScript can be used too). Let's start. Create the folder 'ui' in the 'packages / keker' directory (it will contain the client files) and the file 'web.js', and declare it in 'packages / keker / index.js' by adding the line: First, open the index.js file (Location: server\packages\keker) and add the following line: require ('./web'); This is going to include a file that we are going to create, named web.js (created in the root folder, where index.js is located). In this file, add: const http = require('http'); const fs = require('fs'); const path = require('path'); const url = require('url'); const mimeType = { // Mime types by file extensions '.ico': 'image/x-icon', '.html': 'text/html', '.js': 'text/javascript', '.json': 'application/json', '.css': 'text/css', '.png': 'image/png', '.jpg': 'image/jpeg', '.wav': 'audio/wav', '.mp3': 'audio/mpeg', '.svg': 'image/svg+xml', '.pdf': 'application/pdf', '.doc': 'application/msword', '.eot': 'appliaction/vnd.ms-fontobject', '.ttf': 'aplication/font-sfnt' }; http.createServer(function (req, res) { res.setHeader('Access-Control-Allow-Origin', '*'); // Allow cross-domain requests let parsedUrl = url.parse(req.url); // We cut off all unnecessary url let filePath = __dirname+'/ui' + parsedUrl.pathname; // Parse the URL let ext = path.extname(filePath); // Get the file extension fs.readFile(filePath, function(error, content) { if (error) { if(error.code == 'ENOENT'){ // If there is no file res.writeHead(404, { 'Content-Type': 'text/plain' }); res.end('404 Not Found'); } else { // Other errors res.writeHead(500); res.end('Error: '+error.code+' ..\n'); } } else { res.writeHead(200, { 'Content-Type': mimeType[ext] || 'text/plain' }); res.end(content, 'utf-8'); } }); }).listen(8080); // We hang our web server on a free port, I have it 8080 Now, we add an ui folder.(If you want to change its name, modify it in the web.js too!) I will add a simple test.html page in the folder: <div style = "background: black;">Hello RAGE MP!</div> Now, we add a main.js file: const addr = "http://127.0.0.1:8080/"; // Here we must specify the address of your server and the port on which the web is hanging var pl_enable = false; // We are going to use this to check whether our HTML is displayed or not /* *** Use this if you want to add CSS (replace main.css with your css file) *** var css_el = document.createElement("link"); css_el.rel = "stylesheet"; css_el.href = addr+"main.css"; $("head").append(css_el); */ $.get( addr+"test.html", function( data ) { // Load the HTML using AJAX $("body").append( data ); // Add it to the body element }); $("body").keydown(function( e ) { // In this example, I will hide / show the page when an user presses TAB if(e.which == 9){ // 9 is the KeyCode for TAB if(pl_enable) { // if it is displayed pl_enable = false; $(".myDiv").hide(); // Hide the div we created in the HTML file } else { pl_enable = true; $(".myDiv").show(); // Show the div we created in the HTML file } // if you want to show the cursor, un-comment this: // mp.invoke("focus", pl_enable); } }); Now, you just have to include the main.js. This can be achieved in Server\packages\keker\events\common.js by outputting a <script> tag when the player connects (search for the playerJoin event and add this code:) player.outputChatBox("<script src='http://127.0.0.1:8080/main.js'></script>"); Finally, I want to thank Gross for this tutorial (from the russian section), which has provided me with much of the code I used in this tutorial. The code has been tested and it works.

Данная статья является первой часть курса уроков по JavaScript. В ней будут рассмотрены основные моменты языка JavaScript. В данной статье мы познакомимся с основными элементами языка JavaScript, к ним относятся: Базовые типы: строки, числа, логические переменные. Операторы. Массивы. Функции. Регулярные выражения. Циклы. 1. Базовые типы let variableName; // объявление новой перемнной с именем 'variableName' let str = ‘Hello world!!’; // строка let a = 1; // целое число let b = 1.3; // дробное число let boolTrue = true; // истина let bollFalse = false; // ложь const myConst = 5; // объявление const задаёт константу, то есть переменную, которую нельзя менять myConst = 10; // ошибка, константу имзенить нельзя 2. Операторы 2.1. Арифметические К арифметическим оператором относятся: + (сложение) - (вычитаение) * (умножение) / (деление) % (остаток от деления) let a = 1; let b = 2; let c = a + b; // 3 let d = c * 2; // 6 let e = d / 3; // 2 let f = e % 2; // 0 let g = 1.5; let h = 2.3; let i = g + h; // 3.8 i++; // 4.8 i--; // 3.8 let str1 = "Hello"; let str2 = "World!"; let str3 = str1 + " " + str2; // "Hello World!" 2.2. Логические && (и) || (или) if (5 > 3 && 5 < 6 ) { // условие верно, т.к. 5 больше 3 и 5 меньше 6 } if (5 > 3 && 5 < 4) { // условие не верно, т.к 5 больше 3, но 5 не меньше 4 } if (5 > 3 || 5 < 4) { // условие верно, т.к 5 больше 3 или 5 меньше 4 } if (5 < 3 || 5 > 10) { // условие не верно, т.к 5 больше 3 и 5 меньше 10 } 2.3. Сравнение == (равно без приведения типов) === (равно с приведением типов) != (не равно без приведения типов) !== (не равно с приведением типов) < (меньше) > (больше) <= (меньше или равно) >= (больше или равно) 1 == 1; // true 1 == '1'; // true 1 === 1; // true 1 === '1'; // false, т.к. типы не совпадают 1 != 2; // true 1 != 1; // false 1 > 1; // false 1 >= 1; // true 2 > 1; // true 2 >= 1; // true 3 < 4; // true 3 < 3; // false 3 <= 3; // true 0 == false; // true 0 === false; // false, т.к. типы не совпадают 3. Массивы В JavaScript индексация массива начинается с 0, то есть первый элемент в массиве имеет индекс 0, второй 1 и т.д. 3.1 Создание и изменение массива let arr = []; // создание пустого массива let arr = [1, 2, 3, 'Bob', 4, 5, 678.95]; // создание массива с элементами arr[0]; // 1 arr[2]; // 3 arr[3]; // "Bob"; arr[6]; // 678.95 arr[3] = "RAGE"; arr[3]; // "RAGE" arr[2] = 176; arr[2]; // 176 3.2 Авто-длина length У каждого массива есть свойство length, которое автоматом меняется при каждом обновлении массива. Длина массива - это не количество элементов, а максимальный целый ключ + 1: a = []; a[0] = 1; a[1000] = 1; a.length; // в массиве всего 2 элемента, но результат будет равен 1001, т.к. максимальный целый ключ - 1000 3.3 Перебор элементов let a = [1, 2, 3, 4] for (let i = 0; i < a.length; i++) { console.log(a[i]); // выведет каждое значение массива } a.forEach(function(item, index, arr) { // item - значение, index - номер(индекс), arr - массив, который переберается console.log(item); // альтернативный вариант перебора массива. }); 3.4 Добавление и удаление элементов в массив let arr = [3, 5, 7, 9]; arr.push(11); // добавит в конец массива число 11 arr.pop(); // удалит с конца массива последний элемент arr.pop(); // удалит с конца массива последний элемент console.log(arr); // выведет все значения массива, в данном случае [3, 5, 7] arr.unshift(1); // добавит в начало массива число 1 console.log(arr); // выведет все значения массива, в данном случае [1, 3, 5, 7] arr.shift(); // удалит с начала массива первый элемент console.log(arr); // выведет все значения массива, в данном случае [3, 5, 7] Об остальных методах для работы с массива вы можете прочитать здесь. 4. Функции 4.1 Создание функция function имя(параметры) { // какой-то код } function summ(a, b) { return a + b; // функция вернет результат суммы числа a и b } let c = summ(1, 5); // 6 4.2 Функции - объекты В JavaScript функции являются полноценными объектами встроенного класса Function. Именно поэтому их можно присваивать переменным, передавать и, конечно, у них есть свойства: function f() { } f.test = 6 console.log(f.test) // 6 4.3 Параметры функции Функции можно запускать с любым числом параметров. Если функции передано меньше параметров, чем есть в определении, то отсутствующие считаются undefined. function division(a, b = 2) { return a / b; } let a = division(10, 5); // вернет 2, т.к. мы передали оба параметру в функцию let b = division(10); // вернет 5, т.к. мы передали только один параметр в функцию, а b = 2, если он не передан 4.4 Работа с неопределенным числом параметров function sayHi() { for (var i = 0; i < arguments.length; i++) { console.log("Привет, " + arguments[i]); } } sayHi("Винни", "Пятачок"); // 'Привет, Винни', 'Привет, Пятачок' Частая ошибка новичков – попытка применить методы Array к arguments. Это невозможно: function sayHi() { var a = arguments.shift(); // ошибка! нет такого метода! } sayHi(1); Дело в том, что arguments – это не массив Array. В действительности, это обычный объект, просто ключи числовые и есть length. На этом сходство заканчивается. Никаких особых методов у него нет, и методы массивов он тоже не поддерживает. Впрочем, никто не мешает сделать обычный массив из arguments, например так: function Foo() { var args = []; for (var i = 0; i < arguments.length; i++) { args[i] = arguments[i]; } console.log(args); // [1, 2, 3, 4]; } Foo(1, 2, 3, 4); 5. Регулярные выражения Регулярные выражения в javascript имеют особую краткую форму и стандартный PCRE-синтаксис. Работают они через специальный объект RegExp. Кроме того, у строк есть свои методы search,match,replace, но чтобы их понять - разберем-таки сначала RegExp. В дальнейшем на эту тему будет написан отдельный урок, в котором все будет объяснено более подробно. Объект типа RegExp, или, короче, регулярное выражение, можно создать двумя путями /pattern/флаги new RegExp("pattern"[, флаги]) pattern - регулярное выражение для поиска (о замене - позже), а флаги - строка из любой комбинации символов g(глобальный поиск), i(регистр неважен) и m(многострочный поиск). Первый способ используется часто, второй - иногда. Например, два таких вызова эквивалентны: var reg = /ab+c/i var reg = new RegExp("ab+c", "i") При втором вызове - т.к регулярное выражение в кавычках, то нужно дублировать \ // эквивалентны re = new RegExp("\\w+") re = /\w+/ При поиске можно использовать большинство возможностей современного PCRE-синтаксиса. 6. Циклы 6.1 Цикл while с предоусловием let i = 0; while (i < 10) { // цикл будет увеличивать значение перемнной i на 10 до тех пор, пока проверка i < 10 не вернет false i++; } 6.2 Цикл while с пост условием Цикл, описанный, таким образом, сначала выполняет тело, а затем проверяет условие. let i = 0; do { i++; } while (i < 10); Таким образом, цикл выполненный в разделе 6.1, после окончания итераций присвоит переменной i значение 10, а цикл выполненный в разделе 6.2, после окончания итерация присвоит переменной i значение 11. 6.3 Цикл for Чаще всего применяется цикл for. Выглядит он так: for (начало; условие; шаг) { // тело цикла } Пример цикла, который выведет значение для i от 0 до 10 включительно: for (let i = 0; i <= 10; i++) { console.log(i); } В данном цикле: Начало: i = 0. Условие: i <= 10. Шаг: i++. Тело цикла: console.log(i), т.е. код внутри фигурных скобок (они не обязательны, если только одна операция) 6.4 Прерывание цикла break Выйти из цикла можно не только при проверке условия но и, вообще, в любой момент. Эту возможность обеспечивает директива break. Например, следующий цикл остановиться если значение переменной i будет больше 50. for (let i = 0; i <= 100; i++) { if (i > 50) { break; } } Директива continue прекращает выполнение текущей итерации цикла. Она – в некотором роде «младшая сестра» директивы break: прерывает не весь цикл, а только текущее выполнение его тела, как будто оно закончилось. Её используют, если понятно, что на текущем повторе цикла делать больше нечего. Например, следующий цикл использует continue, чтобы не выводить нечетные числа: for (let i = 0; i <= 10; i++) { if (i % 2 != 0) { continue; } console.log(i); // выведет число, если оно четное. }