Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр
Сыграйте в классический пасьянс и попробуйте разложить по порядку колоду из 52 карт, начиная с короля и заканчивая тузом. Игра имеет четыре варианта: с 1, 2, 3 и 4 мастями. Выиграйте как можно больше в каждом варианте и улучшите свои показатели.

Пасьянс Паук «Классический»

Карточные, Логическая, Мобильная

Играть

Топ прошлой недели

  • AlexKud AlexKud 38 постов
  • SergeyKorsun SergeyKorsun 12 постов
  • SupportHuaport SupportHuaport 5 постов
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая кнопку «Подписаться на рассылку», я соглашаюсь с Правилами Пикабу и даю согласие на обработку персональных данных.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Помощь Кодекс Пикабу Команда Пикабу Моб. приложение
Правила соцсети О рекомендациях О компании
Промокоды Биг Гик Промокоды Lamoda Промокоды МВидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня

HTML

С этим тегом используют

CSS Программирование Javascript Верстка IT Сайт Web Все
966 постов сначала свежее
codeindie
codeindie
7 месяцев назад
Серия Инди код

Деньги с первой игры⁠⁠

Судя по аналитике первая игра вышла 20 октября. Сделал я её на phaser js. Залил на яндекс игры и конечно игра не прошла модерацию с первого раза. Ох, сколько мемов про модерацию яндекса насмотрелся.

Мне вероятно повезло со второго раза игру аппрувнули. Модерация про все ошибки пишет при отклонении сразу. Если их исправить, то со второго или третьего раза модерация проходит. Или может мне так просто повезло во всех трёх играх? 😱

В следующих играх старался не допускать тех же ошибок. Допускал другие 👹

Игра простая. Вдохновлялся советской игрушкой где волк собирает яица. Только чуть апгрейднут сеттинг. И управление другое. В моей же волшебник в таинственном лесу собирает звезды. Нужно собрать как можно больше звезд за 1 минуту.

Позже эту игру я и переписал на construct 3.

На сегодняшний день в игру поиграло в игру всего 55 человек, а доход на человека составил 0.1 руб.

Компьютерные игры Gamedev Инди игра Инди Игры HTML Личный опыт Текст
9
6
Djunney
Djunney
7 месяцев назад

Создание игры⁠⁠

Всем добрый.
Как то одним вечером мне пришла в голову мысль создавать игру. Но создавать я её решил в необычном месте, в браузере. Она не использует какие либо сложные технологии. Фактически всё держится на html,css,js + сервер на nodejs, который обрабатывают всю информацию что где нажато и где хранится вся информация и передаётся игроку дабы не нагружать страницу.

Сам жанр подразумевается как рогалик , сложный , нужно будет думать куда как передвигаться. с каким монстром как взаимодействовать. Пошаговый + карточный , ваш предмет в инвентаре даёт вам опр. характеристики а самое карты, которые вы используете в будущем. Некоторые идеи начинают превращаться в рабочий функционал, но многое ещё впереди.

Благо ИИ помогают с текстами и картинками, но я бы наверное хотел какой то свой стиль, только ещё не пришёл к нему.

Могу выкладывать врем от времени процесс разработки и какие новые вещи появились в игре. Да и в целом могу рассказать что уже имеется. "Игра" пока что на локальном компьютере и её нет в интернете, т.к ещё слишком сырая, но прилагаю скриншоты.

1. Главное меню. Да, пока идея останавливается на одной сессии. Создал, Умер, заново. Каждый новый забег - новый опыт. А если устал, то можно всегда выйти и в будущем продолжить там где остановился. Игра уже запоминает где ты был что делал и так далее.

Создание игры Компьютерные игры, Игры, Браузерные игры, Браузер, Web-программирование, HTML, CSS, Javascript, Длиннопост

2. Создание персонажа (Я пока не до конца решил будут ли классы или расы или что то ещё, но какие то уникальные карты и особенности точно добавлю.

Создание игры Компьютерные игры, Игры, Браузерные игры, Браузер, Web-программирование, HTML, CSS, Javascript, Длиннопост

3. Карта, по которой можно будет перемещаться. Генерируется рандомно, пока это цветные клетки, в будущем это будут места интересностей (мельница, пещера, заброшенный дом, болото и т.д). Есть 10 ходов до наступления ночи и что то произойдёт))

Создание игры Компьютерные игры, Игры, Браузерные игры, Браузер, Web-программирование, HTML, CSS, Javascript, Длиннопост

4. Боёвка

Создание игры Компьютерные игры, Игры, Браузерные игры, Браузер, Web-программирование, HTML, CSS, Javascript, Длиннопост

Ваша экипировка дарует вам карты, эти карты можно использовать в боёвке. У персонажа есть Сила Ловкость Выносливость Дух Интеллект и Харизма. Каждая карта требует своё количество очков какого либо атрибута. Монстры так же имеют свои карты и логику поведения. Карты они играют сразу, но вот какие зависит от того что вы играли ранее, или сколько у вас хитов и так далее. В будущем будут карты силы (А ля воин) , для магов (Интеллект) , для Шаманов (Дух) и прочее прочее))

На этом всё! Спасибо если дочитали до конца.
Всем продуктивных будней ;)
С вами был , Djunney

Показать полностью 4
[моё] Компьютерные игры Игры Браузерные игры Браузер Web-программирование HTML CSS Javascript Длиннопост
4
1
japonsu
7 месяцев назад

Создание чего-либо на HTML & CSS⁠⁠

Давно был интерес к программированию, первое время изучал Python, по итогу сколько пытался, столько и забрасывал. Теперь решил изучить HTML & CSS, пока-что нравится и есть интерес. Изучать язык начал буквально сегодня, но не знаю с чего именно начать. Можете накидать легкие проекты (пока-что делал квадрат, круг и таблицу, но код просто переписывал с нейронки и пытался его запомнить/разобраться что за что отвечает) или сказать с чего вообще лучше всего начать изучать HTML & CSS

Web-программирование CSS HTML Текст
9
0
Lenka.penka666
Lenka.penka666
8 месяцев назад

Но всё же⁠⁠

К Починили

В полноценную "послеоплатную" версию надо будет ещё разбираться, но после нескольких часов зависания могу сказать, что я, в принципе, могу вытащить платную информацию с сайта. (Там всё легко. Лажа с обзыванием сканов, хотя, может, так и надо?..) Возможно это даже могло бы решить проблемы с загрузкой сканов, из-за низкого интернета, но чёрт его знает, чесслово. Пусть теперешний метод не такой интересный как прошлый, это лишь означает, что сам сайт стал интереснее чем раньше. Буду любопытствовать дальше.

П.С.: интересно, какова вероятность того, что владельцы сайта наткнутся на мои посты в Пикабу? Или им кинуть ссылку?

[моё] Манга Сайт HTML Текст
0
2
Lenka.penka666
Lenka.penka666
8 месяцев назад

Починили⁠⁠

Если помните об этом посте, то спешу вас обрадовать, он больше не актуален.
Маленькая шалость

Сейчас там вооот такая красота, в которой я, к сожалению своему, ещё не до конца разобралась. Но, по идее, на сколько я понимаю эту тему, это именно то, что нужно. Это не сам код, а любезно предоставленные разработчиками (или скопированные с GitHub'а, что весьма вероятно — там часто появляется ссылка на этот домен) примеры и пояснения (но в, отличие от кода, они довольно интересные).

/
*
* @Description
*
* A wrapper for messaging on WebKit platforms. It supports modern WebKit messageHandlers
* along with encryption for older versions (like macOS Catalina)
*
* Note: If you wish to support Catalina then you'll need to implement the native
* part of the message handling, see {@Link WebkitMessagingTransport} for details.
*/
// eslint-disable-next-line @TypeScript-eslint/no-unused-vars

/
* @Example
* On macOS 11+, this will just call through to window.webkit.messageHandlers.x.postMessage
*
* Eg: for a foo message defined in Swift that accepted the payload {"bar": "baz"}, the following
* would occur:
*
* * const json = await window.webkit.messageHandlers.foo.postMessage({ bar: "baz" });
* const response = JSON.parse(json)
*
*
* @Example
* On macOS 10 however, the process is a little more involved. A method will be appended to window
* that allows the response to be delivered there instead. It's not exactly this, but you can visualize the flow
* as being something along the lines of:
*
* * // add the window method
* window["_0123456"] = (response) => {
* // decrypt `response` and deliver the result to the caller here
* // then remove the temporary method
* delete window['_0123456']
* };
*
* // send the data + `messageHanding` values
* window.webkit.messageHandlers.foo.postMessage({
* bar: "baz",
* messagingHandling: {
* methodName: "_0123456",
* secret: "super-secret",
* key: [1, 2, 45, 2],
* iv: [34, 4, 43],
* }
* });
*
* // later in swift, the following JavaScript snippet will be executed
* (() => {
* window['_0123456']({
* ciphertext: [12, 13, 4],
* tag: [3, 5, 67, 56]
* })
* })()
*
* @implements {MessagingTrans

Этот фрагмент снизу и вовсе кусок от куска побольше, что, наверное, легко понять по ненормально большому количеству скобочек внизу. Тем не менее, в нём можно встретить все переменные, которые были в примере выше, и я нахожу это очень подозрительным (это единственное что мне остаётся — понятия не имею что такое async и с чем его едят). Из всего, могу сказать, что наверное мне надо начинать учиться разбираться во всём потихоньку... Этот сайт развивается явно успешнее чем я сама — это мотивирует учиться. Так что в общих планах на (следующий, а если не повезёт — через следующий) год прибавилось изучение HTML и JavaScript. По крайней мере всей той части, которая связана с JSON... Они же связаны как-то, да?

async wkSendAndWait (handler, data) {
if (this.config.hasModernWebkitAPI) {
const response = await this.wkSend(handler, data);
return this.globals.JSONparse(response || '{}')
}

try {
const randMethodName = this.createRandMethodName();
const key = await this.createRandKey();
const iv = this.createRandIv();

const {
ciphertext,
tag
} = await new this.globals.Promise((/ @type {any} */ resolve) => {
this.generateRandomMethod(randMethodName, resolve);

// @ts-expect-error - this is a carve-out for catalina that will be removed soon
data.messageHandling = new SecureMessagingParams({
methodName: randMethodName,
secret: this.config.secret,
key: this.globals.Arrayfrom(key),
iv: this.globals.Arrayfrom(iv)
});
this.wkSend(handler, data);
});

const cipher = new this.globals.Uint8Array([...ciphertext, ...tag]);
const decrypted = await this.decrypt(cipher, key, iv);
return this.globals.JSONparse(decrypted || '{}')
} catch (e) {
// re-throw when the error is just a 'MissingHandler'
if (e instanceof MissingHandler) {
throw e
} else {
console.error('decryption failed', e);
console.error(e);
return { error: e }
}
}
}

/
* @Param {import('../index.js').NotificationMessage} msg
*/
notify (msg) {
this.wkSend(msg.context, msg);
}

/
* @Param {import('../index.js').RequestMessage} msg
*/
async request (msg) {
const data = await this.wkSendAndWait(msg.context, msg);

Я там в коде по ходу разглядывания даже встретила некий "псевдорандомный генератор чисел на основе алгоритма Alea" (как мне после любезно подсказал GPT-chat). Это такая прикольная вещь!

(function(global, module, define) {

function Alea(seed) {
var me = this, mash = Mash();

me.next = function() {
var t = 2091639 * me.s0 + me.c * 2.3283064365386963e-10; // 2^-32
me.s0 = me.s1;
me.s1 = me.s2;
return me.s2 = t - (me.c = t | 0);
};

// Apply the seeding algorithm from Baagoe.
me.c = 1;
me.s0 = mash(' ');
me.s1 = mash(' ');
me.s2 = mash(' ');
me.s0 -= mash(seed);
if (me.s0 < 0) { me.s0 += 1; }
me.s1 -= mash(seed);
if (me.s1 < 0) { me.s1 += 1; }
me.s2 -= mash(seed);
if (me.s2 < 0) { me.s2 += 1; }
mash = null;
}

function copy(f, t) {
t.c = f.c;
t.s0 = f.s0;
t.s1 = f.s1;
t.s2 = f.s2;
return t;
}

Есть ещё такая штука, думаю, это тоже является каким-то псевдорандомом (по крайней мере, оно так же умножает в начале, как и в Alea.

function impl(seed, opts) {
var xg = new Alea(seed),
state = opts && opts.state,
prng = xg.next;
prng.int32 = function() { return (xg.next() * 0x100000000) | 0; };
prng.double = function() {
return prng() + (prng() * 0x200000 | 0) * 1.1102230246251565e-16; // 2^-53
};
prng.quick = prng;
if (state) {
if (typeof(state) == 'object') copy(state, xg);
prng.state = function() { return copy(xg, {}); };
}
return prng;
}

function Mash() {
var n = 0xefc8249d;

var mash = function(data) {
data = String(data);
for (var i = 0; i < data.length; i++) {
n += data.charCodeAt(i);
var h = 0.02519603282416938 * n;
n = h >>> 0;
h -= n;
h *= n;
n = h >>> 0;
h -= n;
n += h * 0x100000000; // 2^32
}
return (n >>> 0) * 2.3283064365386963e-10; // 2^-32
};

return mash;
}


if (module && module.exports) {
module.exports = impl;
} else if (define && define.amd) {
define(function() { return impl; });
} else {
this.alea = impl;
}

})(
commonjsGlobal,
module, // present in node.js
(typeof undefined) == 'function' // present with an AMD loader
);
} (alea$1));

var aleaExports = alea$1.exports;

var xor128$1 = {exports: {}};

xor128$1.exports;

(function (module) {
// A Javascript implementaion of the "xor128" prng algorithm by
// George Marsaglia. See http://www.jstatsoft.org/v08/i14/paper

(function(global, module, define) {

function XorGen(seed) {
var me = this, strseed = '';

me.x = 0;
me.y = 0;
me.z = 0;
me.w = 0;

// Set up generator function.
me.next = function() {
var t = me.x ^ (me.x << 11);
me.x = me.y;
me.y = me.z;
me.z = me.w;
return me.w ^= (me.w >>> 19) ^ t ^ (t >>> 8);
};

if (seed === (seed | 0)) {
// Integer seed.
me.x = seed;
} else {
// String seed.
strseed += seed;
}

// Mix in string seed, then discard an initial batch of 64 values.
for (var k = 0; k < strseed.length + 64; k++) {
me.x ^= strseed.charCodeAt(k) | 0;
me.next();
}
}

function copy(f, t) {
t.x = f.x;
t.y = f.y;
t.z = f.z;
t.w = f.w;
return t;
}

function impl(seed, opts) {
var xg = new XorGen(seed),
state = opts && opts.state,
prng = function() { return (xg.next() >>> 0) / 0x100000000; };
prng.double = function() {
do {
var top = xg.next() >>> 11,
bot = (xg.next() >>> 0) / 0x100000000,
result = (top + bot) / (1 << 21);
} while (result === 0);
return result;
};
prng.int32 = xg.next;
prng.quick = prng;
if (state) {
if (typeof(state) == 'object') copy(state, xg);
prng.state = function() { return copy(xg, {}); };
}
return prng;
}

if (module && module.exports) {
module.exports = impl;
} else if (define && define.amd) {
define(function() { return impl; });
} else {
this.xor128 = impl;
}

})(
commonjsGlobal,
module, // present in node.js
(typeof undefined) == 'function' // present with an AMD loader
);
} (xor128$1));

var xor128Exports = xor128$1.exports;

var xorwow$1 = {exports: {}};

xorwow$1.exports;

Насколько я понимаю, сайт растёт из-за чего товарищи программисты постарались над его общим видом, и защитой платёжной системы.
Раньше это выглядело как css-ная вставка, где в качестве примечания была написана рабочая "послеоплатная" ссылка (https://rumangalist.org/payment — она теперь всё равно не работает, так как путь заменён методом какого-то там разнообразного хеширования ииии я ещё не до конца разбираюсь в этой теме, но она меня ооооочень интригует). В общем, думаю, сайт будут развивать и дальше. Не зря же у них домен на год с чем-то вперёд проплачен?

Кстати. Вверху приведён кусок с МакОсными продуктами, но только потому, что у них самый красивый и ясный пример с этими данными, не то что бы мне принципиально. Ну вот и все новости на сегодня 〜(꒪꒳꒪)〜, так что на этом, пожалуй, всё.

Показать полностью
[моё] Манга Сайт HTML Длиннопост
1
20
user9674044
8 месяцев назад
Лайфхак

Мини-лайфхак. Ссылка на страницу PDF \ выложенного в интернете текста книги⁠⁠

Бывает, надо дать ссылку на конкретную страничку, а страница только в огромном файле. И объяснять человеку придется дополнительно на какой странице открыть (что особенно сложно если нумерация скана и файла не совпадают и надо давать на этот счет пояснения).

Можно просто давать в ссылке указание на страницу. Надо к ссылке дописать после окончания .pdf #page=(номер страницы)

В браузере, например, эта ссылка откроет на 233 странице файла (203 страницы книги, возьмем для примера кое-что доброе, нейтральное и в общественном достоянии):

https://igiti.hse.ru/data/2016/10/09/1122562381/Ленин ПСС 06.pdf#page=233

Для книг, которые выложены в интернете как htm-файлы можно использовать оригинальную нумерацию с помощью окончания

#s(номер страницы)

Ссылка на версию той же книги в htm будет выглядеть, соответственно, так:

http://uaio.ru/vil/06.htm#s203

Это работает только если в странице есть нумерация, но если ее нет, можно дать просто ссылку на текст, а для краткости можно указать в тексте номер страницы (лишь бы он ранее не использовался внутри текста). Что выглядит для почти любой страницы в интернете добавление к адресу вот такого элемента:

#:~:text=(текст или номер страницы)

В нашем примере будет, соответственно:

http://uaio.ru/vil/06.htm#:~:text=203

Показать полностью
[моё] Pdf Лайфхак Ссылка Гиперссылка HTML Книги Отрывок из книги Ленин Цитаты Текст
2
Puwi
Puwi
8 месяцев назад

А ты в теме? Сколько нас...⁠⁠

А ты в теме? Сколько нас...
HTML Верстка Код Программирование Верстальщик Frontend Программист Создание сайта
19
Партнёрский материал Реклама
specials
specials

Сколько нужно времени, чтобы уложить теплый пол?⁠⁠

Точно не скажем, но в нашем проекте с этим можно справиться буквально за минуту одной левой!

Попробовать

Ремонт Теплый пол Текст
AlexeyPerfilev
AlexeyPerfilev
8 месяцев назад

Жизнь фронтендера: когда твой код – это искусство, а браузер – холст⁠⁠

Привет, Пикабу! Сегодня я хочу рассказать вам о захватывающем мире фронтенд-разработки. Готовы погрузиться в пучину тегов, стилей и скриптов? Поехали!

1. HTML: скелет нашего цифрового тела

Представьте, что вы скульптор, но вместо глины у вас теги. Каждый <div> – это маленькая вселенная, а <p> – повествование целой истории. А когда вы случайно забываете закрыть тег, это как забыть застегнуть ширинку – вроде работает, но что-то не так.

2. CSS: макияж для вашего сайта

CSS – это как модный журнал для вашего HTML. Хотите, чтобы ваш сайт выглядел как топ-модель на подиуме? Просто добавьте немного flexbox и grid, и вуаля! Хотя иногда CSS больше похож на игру "Угадай, почему этот элемент съехал на 2 пикселя влево".

3. JavaScript: душа вашего сайта

Если HTML – это тело, а CSS – одежда, то JavaScript – это душа вашего сайта. Именно он заставляет всё двигаться, реагировать и иногда падать с криком "Uncaught TypeError". Но когда вы наконец-то заставляете всё работать идеально, чувствуете себя настоящим волшебником!

4. Фреймворки: когда вы устали изобретать велосипед

React, Vue, Angular – выбирайте свой яд. Эти ребята обещают сделать вашу жизнь проще, и они действительно это делают... после 10 часов настройки и 100 ошибок при сборке.

5. Отладка: детективная работа 21 века

Кто сказал, что программисты не детективы? Попробуйте найти ошибку в 1000 строк кода! Это как искать иголку в стоге сена, только стог постоянно меняет форму, а иголка превращается в стог.

Заключение

Быть фронтендером – значит быть немного художником, немного волшебником и чуточку мазохистом. Но когда вы видите, как ваш код оживает в браузере, понимаете – оно того стоило!

А вы, дорогие читатели, сталкивались с миром фронтенд-разработки? Поделитесь своими историями в комментариях!

Показать полностью
[моё] IT Разработка Frontend HTML CSS Javascript Текст
5
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии