Здравствуйте!
Кратко: Тестирую скрипт на несколько участников, используя форум как интерактивную Базу Данных…
Важно: Понимая, что подобный скрипт может нарушать политику правил безопасности, заранее извиняюсь перед Администрацией Форума!
Текущая Игровая Ситуация
<style>body { background-image:url('https://www.dropbox.com/s/i9o3l8ao0r1tzvt/nullpost-javascript.jpeg?raw=1'); } </style>
(Используется глобальное DropBox-облако и локальный NodeJS-скрипт с периодическим обновлением изображения по мере изменения постов данной темы…)
Суть движка
Используя ресурсы форума как свободное открытое хранилище различных данных, решил попробовать написать скрипт, отображающий некое игровое поле в рамках данной темы.
Скрипт просто загружает данную страничку и сканирует все посты (будущих) пользователей на наличие псевдо-тега [map], в котором описывает некая карта-шаблон.
При этом, любые изображения в рамках поста пользователя используются как "кирпичики" для её отображения…
План
Несколько игроков на одной странице темы форума через многократное редактирование своих сообщений прорабатывают некий план местности.
Нуль-пост содержит скрипт, который сканирует основную страницу темы форума и собирает сведения об участвующих игроках.
Каждый игрок включает в своё сообщение несколько алфавитно-цифровых представлений своих планов местности с экранированием в псевдо-тег [map…]. При этом любые изображения в самом сообщении игрока используются как объекты для графического отображения самого плана.
Скрипт нуль-поста всё это переваривает и заполняет выпадающий список участниками с их вариантами карт.
По мере развития ситуации один из игроков начинает одерживать победу над некоторыми из остальных…
Тем самым, другие участники должны корректировать собственные планы, чтобы подавить противника…
Проблема: Хотя скрипт располагается в рамках домена форума, к сожалению, работает только с ключом «--disable-web-security» браузера. Хотя, предполагалось мною, что подобной неприятности не возникнет. Может кто-нибудь посоветует, как можно обойти эту проблемы хотя бы частично?
Скрипт прост и открыт, можно убедиться, что мною им не выполняется никаких противоправных действий.
Здесь под спойлером размещены две карты разметки местности:
(Можно обойтись и без спойлера)
[map:"Номер №1"]
0123456789
0246897531
1357986420
[/map]
[map:"Номер №2"]
1470369258
0369258147
2581470369
[/map]
[map:"Номер №3 - Беседка"]
8555555558 A
5444444445
5444444445 C
5443333445
5443223446 B
5443223446
5443333445 H
5444444445
5444444445 G
8855885588
[/map]
Изображения для карты:
- набор 8x8: код 0…9
- коллекция 24x24: код A…Z
А здесь - собственно и сам скрипт:
(Его не нужно здесь больше дублировать: Работает на всех участников темы ниже)
<html>
<head>
<script>
var szPage = "https://javascript.ru/forum/showthread.php?p=498767";//"https://javascript.ru/forum/project/74942-befunge-byl%E2%80%A6-poprobuem-ehto-v-canvas.html";
var hXML = new XMLHttpRequest();
var hSelect = null;
var hSecret = null;
var hCanvas = null;
var hCtx = null;
var aMaps = {};
function GetUp() {
var html;
var res = [];
{
hSecret.innerHTML = hXML.responseText;
//document.body.appendChild(hSecret);
hPosts = hSecret.querySelector("#posts").querySelectorAll("table[id^=post]");
hPosts.forEach
(function(hPost) {
hRows = hPost.rows;
hThread = hPost.querySelector(".thread-row");
hUserLink = hRows[1].querySelector(".bigusername");
hUserPost = hRows[2].querySelector("div[id^=post_message_]");
nick = hUserLink.textContent;
post = hUserPost.textContent;
pics = hUserPost.querySelectorAll("img");
//rank = hUserLink
maps = post.match(/(\[map:"(.+)"]([^\0]+?)\[\/map])+/gm);
if(maps)
maps
.forEach
(function(map) {
console.log(map);
mp = map.match(/(\[map:"(.+)"]([^\0]+)\[\/map])+/m);
console.log(mp);
if(mp) {
place = mp[2];
design = mp[3];
if(!(nick in aMaps))
aMaps[nick] = [];
aMaps[nick][place] = {
design :design,
images :pics
};
hSelect.add(new Option(nick + ":" + place, place), null);
res.push("«" + nick + "»:" + place + "\r\n" + design);
}
});
// res.push("«" + nick + "»\r\n" + hUserPost.post);
});
// hField.textContent = res.join("\r\n--------------\r\n");
}
}
function showMap(el) {
var info = el.selectedOptions[0].textContent.split(/:/);
var nick = info[0];
var place = info[1];
var map = aMaps[nick][place];
var y = 0;
//
hCtx.clearRect(0, 0, hCanvas.width, hCanvas.height);
//
map
.design.split(/\r?\n/)
.forEach
(function(plot) {
var x = 0;
while(plot.length) {
var c = plot.charAt(0);
var d = plot.charCodeAt(0) - 64;
if(isFinite(c))
hCtx.drawImage(map.images[0], 24 * +c, 0, 24, 24, x * 8, y * 8, 24, 24);
else
if(d > 0 && map.images.length > d)
hCtx.drawImage(map.images[d], x * 8, y * 8);
plot = plot.substr(1);
++ x;
}
++ y;
});
}
function main() {
hSecret = document.createElement("html");
hSelect = document.querySelector("select");
hCanvas = document.querySelector("canvas");
hCtx = hCanvas.getContext("2d");
hXML.open("GET", szPage, false);
hXML.send();
if(200 != hXML.status) {
alert(hXML.status + ": " + hXML.statusText);
} else {
setTimeout("GetUp(); showMap(hSelect)", 5000); // Ждём загрузки всех изображений
}
}
</script>
</head>
<body onload='main()'>
<select onchange='showMap(this)'></select><br/>
<canvas width=640px height=480px></canvas>
</body>
</html>
(Подождите секунд 5 для нормальной работы)
Любой пользователь в этой теме сможет добавить собственную карту тегами [map…] как у меня…
При этом, копировать сам мой скрипт не нужно: Прямо здесь он и будет сканировать сообщения пользователей далее ниже по странице…
Так как движок форума позволяет многократно редактировать собственные сообщения, пользователям не нужно создавать более одного поста от своего имени здесь, чтобы как можно больше остальных пользователей смогли разместиться на данной странице и иметь возможность вносить собственные карты…
P.S.: Возможно скрипт будет мною дорабатываться и усложняться. Например, чтобы добавить движения объектов на карте.
Напоминаю, что работает (пока) он лишь с ключём отключения безопасности…
Типа
chrome.exe --user-data-dir="%tmp%\ChromeGaming" --disable-web-security https://javascript.ru/forum/showthread.php?p=498767
Пример (как выглядит):
Спасибо!
