Архивы javascript

JavaScript: Еще один вариант загрузки файла по клику на кнопку

26.11.2024 Павел Грибов WEB

Общая идея следующая: по клику на кнопку вызываем AJAX запрос на сервер с определенными параметрами передаваемыми в POST, затем получив в результат запроса файл — формируем в DOM на файл в формате blob, и тут-же её нажимаем. В результате браузер показывает диалоговое окно сохранения файла.

Таким необычным способом мы убиваем несколько зайцев сразу:

Получаем возможность показать ошибку, если вдруг файл на сервере сформировать не удалось. Это полезно если например файл формируется на сервере «на лету» — например файл XLSX с отчётом
Мы можем передать серверу какие-то условия для формирования файла в POST запросе
На странице мы не размещаем заранее данные в тегах <form></form>, как практикуется в подобных решениях
Пользователю достаточно нажать на кнопку один раз для получения результата.

В результате скрипт формирования файла может выглядеть примерно следующим образом:

На клиенте:

/**
 * Формирование отчета
 * @param {type} filename - имя файла на сервере для формирования отчета
 * @param {type} ext - выходное расширение (например xlsx,csv)
 * @returns {Number}
 */
function get_report(filename,ext){
        $("#global").addClass("loading");    
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '?r=reports/'+filename, true);
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xhr.responseType = 'blob';     
        xhr.onload = function(e) {
            $("#global").removeClass("loading");    
            if (this.status == 200) {
                var link=document.createElement('a');
                link.href=window.URL.createObjectURL(this.response);                
                console.log("Расширение:"+ext);
                link.download="report."+ext;
                link.click();
            }
            else {
                console.log(e);
                ToastMessage("error","Произошла ошибка при формировании файла. Попробуйте позднее или обратитесь к администратору системы.");
            }
        };     
        var form_data = new Map();
        form_data.period_from = period_from.value;
        form_data.period_to = period_to.value;
        form_data.area = area_select.value;
        form_data.division_check=division_check.checked;
        form_data.period_check=period_check.checked;
        xhr.send(mapToQueryString(form_data));                                          
};

/**

* Формирование отчета

* @param {type} filename - имя файла на сервере для формирования отчета

* @param {type} ext - выходное расширение (например xlsx,csv)

* @returns {Number}

function get_report(filename,ext){

$("#global").addClass("loading");

var xhr = new XMLHttpRequest();

xhr.open('POST', '?r=reports/'+filename, true);

xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

xhr.responseType = 'blob';

xhr.onload = function(e) {

$("#global").removeClass("loading");

if (this.status == 200) {

var link=document.createElement('a');

link.href=window.URL.createObjectURL(this.response);

console.log("Расширение:"+ext);

link.download="report."+ext;

link.click();

}

else {

console.log(e);

ToastMessage("error","Произошла ошибка при формировании файла. Попробуйте позднее или обратитесь к администратору системы.");

}

};

var form_data = new Map();

form_data.period_from = period_from.value;

form_data.period_to = period_to.value;

form_data.area = area_select.value;

form_data.division_check=division_check.checked;

form_data.period_check=period_check.checked;

xhr.send(mapToQueryString(form_data));

};

На сервере:

    public function actionGet_report_by_settlers(){               
       $request = Yii::$app->request;      
       $area= $request->post("area");
       $dir=Yii::$app->basePath."/web/templates";
        
      $oSpreadsheet = IOFactory::load($dir . "/report_1_1.xlsx");
      ...
      формируем файл эксель
      ...
      $oWriter = IOFactory::createWriter($oSpreadsheet, 'Xlsx');
      $oWriter->save('php://output');      
    };

public function actionGet_report_by_settlers(){

$request = Yii::$app->request;

$area= $request->post("area");

$dir=Yii::$app->basePath."/web/templates";

$oSpreadsheet = IOFactory::load($dir . "/report_1_1.xlsx");

...

формируем файл эксель

...

$oWriter = IOFactory::createWriter($oSpreadsheet, 'Xlsx');

$oWriter->save('php://output');

};

Оставить комментарий javascript, сохранение файла

Yandex map: динамическая загрузка содержимого балуна

12.12.2023 Павел Грибов WEB

Задача: динамически загружать контент по клику на метку, в т.ч. и при кластеризации

Решение:

Добавим события открытия балуна по клике на метку из карты и кластера:

                objectManager.objects.events.add('balloonopen', function (e) {
                    console.log("Открыт балун вне кластера");
                    var id = e.get('objectId'),
                    geoObject = objectManager.objects.getById(id);
                    downloadContent([geoObject], id);
                });          

                objectManager.clusters.events.add('balloonopen', function (e) {
                    var id = e.get('objectId'),
                        cluster = objectManager.clusters.getById(id),
                        geoObjects = cluster.properties.geoObjects;
                        console.log("Открыт балун из кластера..");
                        downloadContent(geoObjects, id, true);
                });   
....
function downloadContent(obj,id,isCluster){    
    console.log("Загружаем объект:");
    aids = obj.map(function (geoObject) {return geoObject.id;});
    if ((obj.length)<200) {
        $("#global").addClass("loading");   
            $.post("?r=inications/get_points_content", {  
            ids:aids,
        }).done(function(data) {            
            obj.forEach(function (geoObject) {
              //console.log("--присваиваем новое тело балуна");                
              if (geoObject.properties.balloonContentBody.includes("<l></l>")){
                //console.log("-подменяю содержимое балуна!");  
                //console.log(geoObject);
                geoObject.properties.balloonContentBody =geoObject.properties.balloonContentBody.replace("<l></l>",data.result[geoObject.id].content);      
                if (isCluster!==true){
                    objectManager.objects.balloon.setData(objectManager.objects.balloon.getData());
                } else {
                    objectManager.clusters.balloon.setData(objectManager.clusters.balloon.getData());
                };
                //setNewData();
              }            
            });                   
            $("#global").removeClass("loading");                    
        });
    } else {
     ToastMessage("error","Кластер слишком велик","Кластер слишком велик для того чтобы его раскрыть. Увеличьте масштаб и попробуйте снова!",6000);   
    };
}

objectManager.objects.events.add('balloonopen', function (e) {

console.log("Открыт балун вне кластера");

var id = e.get('objectId'),

geoObject = objectManager.objects.getById(id);

downloadContent([geoObject], id);

});

objectManager.clusters.events.add('balloonopen', function (e) {

var id = e.get('objectId'),

cluster = objectManager.clusters.getById(id),

geoObjects = cluster.properties.geoObjects;

console.log("Открыт балун из кластера..");

downloadContent(geoObjects, id, true);

});

....

function downloadContent(obj,id,isCluster){

console.log("Загружаем объект:");

aids = obj.map(function (geoObject) {return geoObject.id;});

if ((obj.length)<200) {

$("#global").addClass("loading");

$.post("?r=inications/get_points_content", {

ids:aids,

}).done(function(data) {

obj.forEach(function (geoObject) {

//console.log("--присваиваем новое тело балуна");

if (geoObject.properties.balloonContentBody.includes("<l></l>")){

//console.log("-подменяю содержимое балуна!");

//console.log(geoObject);

geoObject.properties.balloonContentBody =geoObject.properties.balloonContentBody.replace("<l></l>",data.result[geoObject.id].content);

if (isCluster!==true){

objectManager.objects.balloon.setData(objectManager.objects.balloon.getData());

} else {

objectManager.clusters.balloon.setData(objectManager.clusters.balloon.getData());

};

//setNewData();

}

});

$("#global").removeClass("loading");

});

} else {

ToastMessage("error","Кластер слишком велик","Кластер слишком велик для того чтобы его раскрыть. Увеличьте масштаб и попробуйте снова!",6000);

};

}

К сожалению, если в кластере собрано очень много меток (более 200), то обновление идёт довольно долго, потому пришлось немножко ограничить загрузку. В хорошем варианте, нужно бы отслеживать клик по заголовку списка в кластере, но это пока не удалось

Оставить комментарий javascript, maps, yandex, динамическая загрузка

Синхронный запрос через fetch

06.09.2023 Павел Грибов WEB

Да, знаю, плохо, отвратительно и всё такое. Но иногда нужно. Например мне понадобилось при написании Service Worker, для возможности подмены запрашиваемого для загрузки url.. Реализовал так:

self.addEventListener('fetch', (event) => {    
    console.log('Запрашиваем URL: '+event.request.url);    
    (async () => {
        res=await postData("woodpecker.php", { "url": event.request.url});
    })();
    console.log("--получили ответ");
    if (res.error===false){
        console.log("Отдаём URL");
        if ( event.request.url.endsWith( '.png' ) ) {
           return event.respondWith(
             fetch( 'm.jpg' )
           );
         }        
    } else {
        return event;
    };
            
});

async function postData(url = "", data = {}) {
   console.log("-отправляем в "+url);
  // Default options are marked with *
  const response = await fetch(url, {
    method: "POST", 
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/x-www-form-urlencoded', 
    },
    body: "data="+JSON.stringify(data), 
  });
  return await response.json();
}

self.addEventListener('fetch', (event) => {

console.log('Запрашиваем URL: '+event.request.url);

(async () => {

res=await postData("woodpecker.php", { "url": event.request.url});

})();

console.log("--получили ответ");

if (res.error===false){

console.log("Отдаём URL");

if ( event.request.url.endsWith( '.png' ) ) {

return event.respondWith(

fetch( 'm.jpg' )

);

}

} else {

return event;

};

});

async function postData(url = "", data = {}) {

console.log("-отправляем в "+url);

// Default options are marked with *

const response = await fetch(url, {

method: "POST",

headers: {

'Accept': 'application/json',

'Content-Type': 'application/x-www-form-urlencoded',

body: "data="+JSON.stringify(data),

});

return await response.json();

}

Оставить комментарий javascript, ServiceWorker, sync fetch

JavaScript: перехват всех http/https запросов страницы

04.09.2023 Павел Грибов WEB

Прилетела задача перехватить URL всех загрузок тайлов на странице с размещенной Яндекс картой. В принципе если бы был простой случай, то всё решилось бы созданием прототипа для функции XMLHttpRequest , что-то в духе:

var open = XMLHttpRequest.prototype.open;

XMLHttpRequest.prototype.open = function(method, uri, async, user, pass) {
    this.addEventListener("readystatechange", function(event) {  
    if(this.readyState == 4){
       var self = this;
       var response = {
         method: method,
         uri: uri,
         responseText: self.responseText
      };
      console.log(response);  
    } else {
        console.log(this.readyState);
    }
    }, false);
  open.call(this, method, uri, async, user, pass);
};

var open = XMLHttpRequest.prototype.open;

XMLHttpRequest.prototype.open = function(method, uri, async, user, pass) {

this.addEventListener("readystatechange", function(event) {

if(this.readyState == 4){

var self = this;

var response = {

method: method,

uri: uri,

responseText: self.responseText

};

console.log(response);

} else {

console.log(this.readyState);

}

}, false);

open.call(this, method, uri, async, user, pass);

};

Но возник один нюанс, карта располагается в iframe, а прототипы «вниз» не распространяются. Единственным способом осталось написать сервис Service Worker, который будет отлавливать все запросы..

На странице добавляем функцию загрузки сервиса:

<script>
console.log("пробуем зарегистрировать Service Worker");    
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js',{}).then(function(registration) {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}
</script>

console.log("пробуем зарегистрировать Service Worker");

if ('serviceWorker' in navigator) {

window.addEventListener('load', function() {

navigator.serviceWorker.register('/sw.js',{}).then(function(registration) {

console.log('ServiceWorker registration successful with scope: ', registration.scope);

}, function(err) {

console.log('ServiceWorker registration failed: ', err);

});

}

</script>

Далее в sw.js добавим слушательсобытия fetch, и реализацию отправки перехваченых url на сервер:

self.addEventListener('install', (event) => {
    console.log('Установлен');
});

self.addEventListener('activate', (event) => {
    console.log('Активирован');
    self.clients.claim();
});

self.addEventListener('fetch', (event) => {    
    console.log('Запрашиваем URL: '+event.request.url);    
    postData("woodpecker.php", { "url": event.request.url}).then((data) => {
        console.log(data); 
    });
            
});


async function postData(url = "", data = {}) {
   console.log("-отправляем в "+url);
  // Default options are marked with *
  const response = await fetch(url, {
    method: "POST", 
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/x-www-form-urlencoded', 
    },
    body: "data="+JSON.stringify(data), // body data type must match "Content-Type" header    
  });
  return await response.json(); // parses JSON response into native JavaScript objects
}

self.addEventListener('install', (event) => {

console.log('Установлен');

});

self.addEventListener('activate', (event) => {

console.log('Активирован');

self.clients.claim();

});

self.addEventListener('fetch', (event) => {

console.log('Запрашиваем URL: '+event.request.url);

postData("woodpecker.php", { "url": event.request.url}).then((data) => {

console.log(data);

});

async function postData(url = "", data = {}) {

console.log("-отправляем в "+url);

// Default options are marked with *

const response = await fetch(url, {

method: "POST",

headers: {

'Accept': 'application/json',

'Content-Type': 'application/x-www-form-urlencoded',

body: "data="+JSON.stringify(data), // body data type must match "Content-Type" header

});

return await response.json(); // parses JSON response into native JavaScript objects

}

Серверная часть woodpecker.php:

<?php
$body= json_decode($_POST["data"]);

if ($body->url!=""){
    file_put_contents("urls.txt",$body->url."\n",FILE_APPEND);
}

$answer=new stdClass();
$answer->error=false;
$answer->result="ok";

echo json_encode($answer);
die();

<?php

$body= json_decode($_POST["data"]);

if ($body->url!=""){

file_put_contents("urls.txt",$body->url."\n",FILE_APPEND);

}

$answer=new stdClass();

$answer->error=false;

$answer->result="ok";

echo json_encode($answer);

die();

В результате в файл url.txt на сервере пишутся все запрошенные url.

Отладка сервиса в FireFox возможна на вкладке about:debugging#/runtime/this-firefox, ищем там свой сервис, нажимаем «исследовать»

Оставить комментарий javascript, ServiceWorker, браузер

Pixi.js: игра «жизнь»

27.07.2023 Павел Грибов WEB, Из жизни

Продолжаю на досуге изучать 2D движек для работы с графикой на javascript. Решил написать игру «жизнь» со следующими правилами:

У каждого жителя есть возраст,пол и профессия.

Жители двигаются по всему полю хаотично
При достижении возраста 120 лет житель умирает
Если два жителя сталкиваются между собой и они разного пола от 18 до 50 лет, тогда они рожают ребенка

Сначала определим объекты карты:

// Люди
class People {
    /**
     * Конструктор
     * @param {type} gender - пол
     * @param {type} age - возраст
     * @param {type} health - здоровье
     * @param {type} profession - профессия из map professions
     * @returns {People}
     */
  constructor(gender,age,health,profession) {
      this.gender=gender;           // пол 0/1 м/ж
      this.age=age;                 // возраст
      this.health=health;           // здоровье
      this.profession=profession;   // профессия      
  }  
}
class Citizen {
    constructor(name,pers,color) {
      this.name=name;
      this.pers=pers; // изначальныый процент от общего колиества
      this.color=color;
    }
    
}
// Зданиям
class Building {
    /**
     * Конструктор
     * @param {type} name   название
     * @param {type} cnt    количество зданий на 1000 жителей
     * @returns {Building}
     */
    constructor(name,color,cnt) {
      this.name=name;
      this.color=color;
      this.cnt=cnt;
    }
    /**
     * Установить начальные координаты
     * @param {type} x
     * @param {type} y
     * @param {type} height
     * @param {type} width
     * @returns {undefined}
     */
    setSpawn(x,y,height,width){
      this.x=x;  
      this.y=y;
      this.height=height;
      this.width=width;        
    }
}

// Люди

class People {

/**

* Конструктор

* @param {type} gender - пол

* @param {type} age - возраст

* @param {type} health - здоровье

* @param {type} profession - профессия из map professions

* @returns {People}

constructor(gender,age,health,profession) {

this.gender=gender; // пол 0/1 м/ж

this.age=age; // возраст

this.health=health; // здоровье

this.profession=profession; // профессия

}

class Citizen {

constructor(name,pers,color) {

this.name=name;

this.pers=pers; // изначальныый процент от общего колиества

this.color=color;

}

// Зданиям

class Building {

/**

* Конструктор

* @param {type} name название

* @param {type} cnt количество зданий на 1000 жителей

* @returns {Building}

constructor(name,color,cnt) {

this.name=name;

this.color=color;

this.cnt=cnt;

}

/**

* Установить начальные координаты

* @param {type} x

* @param {type} y

* @param {type} height

* @param {type} width

* @returns {undefined}

setSpawn(x,y,height,width){

this.x=x;

this.y=y;

this.height=height;

this.width=width;

}

Зададим переменные для игры:


/**
 * Профессии, они же модели поведения
 * @type Map
 */
professions=new Map(
        [
            // индекс, название,  % от всего населения
            [1,new Citizen("Детсадовец",10,0xFFFF0B)],    // ночует дома, днём ходит в детский сад
            [2,new Citizen("Школьник",10,0xAA0000)],      // ночует дома, днем до 13:00 в школе, потом идёт домой через магазин
            [3,new Citizen("Студент",10,0xFFFFFF)],       // ночует дома, днем до 17:00 в институте, потом идёт домой через магазин
            [4,new Citizen("Продавец",20,0xFF0000)],      // ночует дома, днём в магазине, потом идёт домой через магазин
            [5,new Citizen("Офисный клерк",20,0xFF3300)], // ночует дома, днём в офисе, потом идёт домой через магазин
            [6,new Citizen("Рабочий",20,0x0000FF)],       // ночует дома, днём на заводе, потом идёт домой через магазин
            [7,new Citizen("Пенсионер",10,0xDE3249)]      // ночует дома, днём шляется по магазинам или по улицам
        ]
);
buldings_types=new Map(
        [   
            [1,new Building("Жилище",0xDE3249,10)], // индекс, название, количество на 1000 жителей
            [2,new Building("Школа",0xAA0000,1)],
            [3,new Building("Университет",0xFFFFFF,1)],
            [4,new Building("Магазин",0xFF0000,2)],
            [5,new Building("Офис",0xFF3300,3)],
            [6,new Building("Завод",0x0000FF,1)],                
            [7,new Building("Детсад",0xFFFF0B,1)]                
        ]
);


// ну пусть размеры пока в экран, потом можно поиграться
var scrollWidth=GetScrollWidth();
var screen_width = window.innerWidth-4; //получаем ширину экрана
var screen_height = window.innerHeight-4; // получаем высоту экрана

residents_count=1000;   // начальное количество жителей
residents=[];           // массив жителей
buldings=[];            // массив зданий
cur_seconds=0;          // текущая секунда
cur_minuts=0;           // текущая минута
cur_hour=0;             // текущая час
cur_day=0;              // текущая день
cur_month=0;            // текущая месяц
cur_year=0;             // текущая год

max_FPS=60;

/**

* Профессии, они же модели поведения

* @type Map

professions=new Map(

[

// индекс, название, % от всего населения

[1,new Citizen("Детсадовец",10,0xFFFF0B)], // ночует дома, днём ходит в детский сад

[2,new Citizen("Школьник",10,0xAA0000)], // ночует дома, днем до 13:00 в школе, потом идёт домой через магазин

[3,new Citizen("Студент",10,0xFFFFFF)], // ночует дома, днем до 17:00 в институте, потом идёт домой через магазин

[4,new Citizen("Продавец",20,0xFF0000)], // ночует дома, днём в магазине, потом идёт домой через магазин

[5,new Citizen("Офисный клерк",20,0xFF3300)], // ночует дома, днём в офисе, потом идёт домой через магазин

[6,new Citizen("Рабочий",20,0x0000FF)], // ночует дома, днём на заводе, потом идёт домой через магазин

[7,new Citizen("Пенсионер",10,0xDE3249)] // ночует дома, днём шляется по магазинам или по улицам

]

);

buldings_types=new Map(

[

[1,new Building("Жилище",0xDE3249,10)], // индекс, название, количество на 1000 жителей

[2,new Building("Школа",0xAA0000,1)],

[3,new Building("Университет",0xFFFFFF,1)],

[4,new Building("Магазин",0xFF0000,2)],

[5,new Building("Офис",0xFF3300,3)],

[6,new Building("Завод",0x0000FF,1)],

[7,new Building("Детсад",0xFFFF0B,1)]

]

);

// ну пусть размеры пока в экран, потом можно поиграться

var scrollWidth=GetScrollWidth();

var screen_width = window.innerWidth-4; //получаем ширину экрана

var screen_height = window.innerHeight-4; // получаем высоту экрана

residents_count=1000; // начальное количество жителей

residents=[]; // массив жителей

buldings=[]; // массив зданий

cur_seconds=0; // текущая секунда

cur_minuts=0; // текущая минута

cur_hour=0; // текущая час

cur_day=0; // текущая день

cur_month=0; // текущая месяц

cur_year=0; // текущая год

max_FPS=60;

Напишем процедуры генерации зданий и жителей:

function GenerateNewCitizen(){
   x=randomIntFromInterval(1,screen_width-width);
   y=randomIntFromInterval(1,screen_height-height);      
   resident=new People(randomIntFromInterval(0,1),1,randomIntFromInterval(1,100),professions.get(1));
   
   graphics = new PIXI.Graphics();           
   graphics.beginFill(professions.get(1).color);
   graphics.lineStyle(2, professions.get(1).color, 1);
   graphics.beginFill(professions.get(1).color, 1);           
   graphics.drawCircle(0,0, 1);  
   graphics.position.set(x, y);         
   graphics.direction=randomIntFromInterval(0,360);
   graphics.endFill();        
   graphics.resident=resident;
   residents.push(graphics);

   app.stage.addChild(residents[residents.length-1]); 
    
}

/**
 * Начальная генерация зданий
 * @returns {undefined}
 */
function InitGenerateBuilding(){
  for (let i=1;i<= buldings_types.size;i++){
      cnt=buldings_types.get(i).cnt/1000*residents_count;
      yet_cnt=1;
      while (yet_cnt<=cnt){
        // случайным образом генерируем координаты и размеры здания
        width=randomIntFromInterval(20,60);
        height=randomIntFromInterval(20,60);
        x=randomIntFromInterval(1,screen_width-width);
        y=randomIntFromInterval(1,screen_height-height);      
        // если наложений нет, то добавляю здание в массив
        if (CheckingOverlaysRect(x,y,width,height,buldings)==false){
                console.log("Добавляю "+buldings_types.get(i).name+" №"+yet_cnt);
                graphics = new PIXI.Graphics();  
                graphics.lineStyle(2, buldings_types.get(i).color, 1);
                graphics.drawRect(x, y, width, height);
                buldings.push(graphics); 
            app.stage.addChild(buldings[buldings.length-1]);            
                FPSText = new PIXI.Text(buldings_types.get(i).name,new PIXI.TextStyle({fontFamily: 'Arial',fontSize: 11,}));
                FPSText.x = x;
                FPSText.y = y;            
            app.stage.addChild(FPSText);         
            yet_cnt++;
        };
      }
  };  
}

/**
 * Проверка наложения квадратов друг на друга
 * @param {type} x
 * @param {type} y
 * @param {type} width
 * @param {type} height
 * @param {type} rects
 * @returns {res|Boolean}
 */
function CheckingOverlaysRect(x,y,width,height,rects){
  res=false;
    for (let bi=1;bi<= rects.length;bi++){
         rect_height=rects[bi-1].getBounds().height;
         rect_width=rects[bi-1].getBounds().width;
         rect_x=rects[bi-1].getBounds().x;
         rect_y=rects[bi-1].getBounds().y;
         //console.log(rect_height,rect_width,rect_x,rect_y);
         if ((x>=rect_x)&(x<=rect_x+rect_width)){res=true;};
         if ((y>=rect_y)&(y<=rect_y+rect_height)){res=true;};
         if ((x+width>=rect_x)&(x+width<=rect_x+rect_width)){res=true;};
         if ((y+height>=rect_y)&(y+height<=rect_y+rect_height)){res=true;};         
    };  
  return res;
}

/**
 * Начальная генерация жителей
 * @returns {undefined}
 */
function InitGeneratePeoples(){
        
    for (let i=1;i<= professions.size;i++){ //перебираем все профессии
        console.log("-генерирую "+professions.get(i).name);
        for (let cnt=1;cnt<= professions.get(i).pers*residents_count/100;cnt++){
          x=randomIntFromInterval(1,screen_width-width);
          y=randomIntFromInterval(1,screen_height-height);      
          resident=new People(randomIntFromInterval(0,1),randomIntFromInterval(1,100),randomIntFromInterval(1,100),professions.get(i));


           graphics = new PIXI.Graphics();           
           graphics.beginFill(professions.get(i).color);
           graphics.lineStyle(2, professions.get(i).color, 1);
           graphics.beginFill(professions.get(i).color, 1);           
           graphics.drawCircle(0,0, 1);  
           graphics.position.set(x, y);         
           graphics.direction=randomIntFromInterval(0,360);
           graphics.endFill();        
           graphics.resident=resident;
           residents.push(graphics);

        app.stage.addChild(residents[residents.length-1]); 
          
          
          
        }
    }    
}

100

101

102

103

104

105

106

107

108

109

110

function GenerateNewCitizen(){

x=randomIntFromInterval(1,screen_width-width);

y=randomIntFromInterval(1,screen_height-height);

resident=new People(randomIntFromInterval(0,1),1,randomIntFromInterval(1,100),professions.get(1));

graphics = new PIXI.Graphics();

graphics.beginFill(professions.get(1).color);

graphics.lineStyle(2, professions.get(1).color, 1);

graphics.beginFill(professions.get(1).color, 1);

graphics.drawCircle(0,0, 1);

graphics.position.set(x, y);

graphics.direction=randomIntFromInterval(0,360);

graphics.endFill();

graphics.resident=resident;

residents.push(graphics);

app.stage.addChild(residents[residents.length-1]);

}

/**

* Начальная генерация зданий

* @returns {undefined}

function InitGenerateBuilding(){

for (let i=1;i<= buldings_types.size;i++){

cnt=buldings_types.get(i).cnt/1000*residents_count;

yet_cnt=1;

while (yet_cnt<=cnt){

// случайным образом генерируем координаты и размеры здания

width=randomIntFromInterval(20,60);

height=randomIntFromInterval(20,60);

x=randomIntFromInterval(1,screen_width-width);

y=randomIntFromInterval(1,screen_height-height);

// если наложений нет, то добавляю здание в массив

if (CheckingOverlaysRect(x,y,width,height,buldings)==false){

console.log("Добавляю "+buldings_types.get(i).name+" №"+yet_cnt);

graphics = new PIXI.Graphics();

graphics.lineStyle(2, buldings_types.get(i).color, 1);

graphics.drawRect(x, y, width, height);

buldings.push(graphics);

app.stage.addChild(buldings[buldings.length-1]);

FPSText = new PIXI.Text(buldings_types.get(i).name,new PIXI.TextStyle({fontFamily: 'Arial',fontSize: 11,}));

FPSText.x = x;

FPSText.y = y;

app.stage.addChild(FPSText);

yet_cnt++;

};

}

};

}

/**

* Проверка наложения квадратов друг на друга

* @param {type} x

* @param {type} y

* @param {type} width

* @param {type} height

* @param {type} rects

* @returns {res|Boolean}

function CheckingOverlaysRect(x,y,width,height,rects){

res=false;

for (let bi=1;bi<= rects.length;bi++){

rect_height=rects[bi-1].getBounds().height;

rect_width=rects[bi-1].getBounds().width;

rect_x=rects[bi-1].getBounds().x;

rect_y=rects[bi-1].getBounds().y;

//console.log(rect_height,rect_width,rect_x,rect_y);

if ((x>=rect_x)&(x<=rect_x+rect_width)){res=true;};

if ((y>=rect_y)&(y<=rect_y+rect_height)){res=true;};

if ((x+width>=rect_x)&(x+width<=rect_x+rect_width)){res=true;};

if ((y+height>=rect_y)&(y+height<=rect_y+rect_height)){res=true;};

};

return res;

}

/**

* Начальная генерация жителей

* @returns {undefined}

function InitGeneratePeoples(){

for (let i=1;i<= professions.size;i++){ //перебираем все профессии

console.log("-генерирую "+professions.get(i).name);

for (let cnt=1;cnt<= professions.get(i).pers*residents_count/100;cnt++){

x=randomIntFromInterval(1,screen_width-width);

y=randomIntFromInterval(1,screen_height-height);

resident=new People(randomIntFromInterval(0,1),randomIntFromInterval(1,100),randomIntFromInterval(1,100),professions.get(i));

graphics = new PIXI.Graphics();

graphics.beginFill(professions.get(i).color);

graphics.lineStyle(2, professions.get(i).color, 1);

graphics.beginFill(professions.get(i).color, 1);

graphics.drawCircle(0,0, 1);

graphics.position.set(x, y);

graphics.direction=randomIntFromInterval(0,360);

graphics.endFill();

graphics.resident=resident;

residents.push(graphics);

app.stage.addChild(residents[residents.length-1]);

}

Создадим сцену и запустим время:

const app = new PIXI.Application({ 
    width:screen_width,
    height:screen_height,
    background: '#1099bb' ,
    antialias: true
});
document.body.appendChild(app.view);

app.stage.hitArea = app.screen;

InitGenerateBuilding(); // генерируем здания
InitGeneratePeoples();  // генерируем жителей

let ticker = PIXI.Ticker.shared;   
ticker.autoStart = false;
ticker.maxFPS=max_FPS;
ticker.start();

const style = new PIXI.TextStyle({
    fontSize: 20 
});
FPSText = new PIXI.Text('',style);
FPSText.x = 10;
FPSText.y = 10;   
app.stage.addChild(FPSText);         
StatText = new PIXI.Text(residents.length,style);
StatText.x = 10;
StatText.y = 30;   
app.stage.addChild(StatText);         


// пусть жители оживут!
ticker.add(function (time) {     
    cur_seconds++;
    if (cur_seconds==61){
        cur_seconds=0;cur_minuts++;
        // прибавляем всем жителям по году жизни..
        for (let i = 0; i < residents.length; i++) {         
            residents[i].resident.age++;
            if (residents[i].resident.age==120){
                residents.pop(residents[i]); // в 120 лет жизненный путь завершается..
            };
            
        };
    };
    if (cur_minuts==61){cur_minuts=0;cur_hour++;};
    if (cur_hour==25){cur_hour=0;cur_day++;};    
    if (cur_day==366){cur_day=0;cur_year++;};       
    FPSText.text="С начала эпохи прошел: "+cur_minuts+" год"; // выводим FPS
    StatText.text="Жителей:"+residents.length;
    // перебираю каждого человека и двигаем его
    for (let i = 0; i < residents.length; i++) {         
        step=false;
        while (step==false){
            pre_y=residents[i].position.y+Math.sin(residents[i].direction);
            pre_x=residents[i].position.x+Math.cos(residents[i].direction);
            if ((pre_x>=0)&& (pre_x<=screen_width) && (pre_y>=0) && (pre_y<=screen_height)) {
                    step=true;
            } else {
               residents[i].direction=randomIntFromInterval(0,360); 
            };
            
        };
       residents[i].position.y=residents[i].position.y+Math.sin(residents[i].direction);
       residents[i].position.x=residents[i].position.x+Math.cos(residents[i].direction);
       // проверим, есть ли совпадение точек?
       // если возраст от 18..50
       // если полы противоположные
       // то считаем что это "лябовь" и размножаемся
        for (let j = 0; j < residents.length; j++) {   
            if (Math.round(residents[i].position.y)==Math.round(residents[j].position.y) && 
                    Math.round(residents[i].position.x)==Math.round(residents[j].position.x) && i!=j){
                      if (residents[i].resident.age>=18 && residents[i].resident.age<=50){
                        if (residents[j].resident.age>=18 && residents[j].resident.age<=50){
                            if (residents[j].resident.gender==0 && residents[i].resident.gender==1){
                                console.log("-это лябофь!");  
                                GenerateNewCitizen();
                            }
                        }                          
                      }               
            };
        };
    }
});

const app = new PIXI.Application({

width:screen_width,

height:screen_height,

background: '#1099bb' ,

antialias: true

});

document.body.appendChild(app.view);

app.stage.hitArea = app.screen;

InitGenerateBuilding(); // генерируем здания

InitGeneratePeoples(); // генерируем жителей

let ticker = PIXI.Ticker.shared;

ticker.autoStart = false;

ticker.maxFPS=max_FPS;

ticker.start();

const style = new PIXI.TextStyle({

fontSize: 20

});

FPSText = new PIXI.Text('',style);

FPSText.x = 10;

FPSText.y = 10;

app.stage.addChild(FPSText);

StatText = new PIXI.Text(residents.length,style);

StatText.x = 10;

StatText.y = 30;

app.stage.addChild(StatText);

// пусть жители оживут!

ticker.add(function (time) {

cur_seconds++;

if (cur_seconds==61){

cur_seconds=0;cur_minuts++;

// прибавляем всем жителям по году жизни..

for (let i = 0; i < residents.length; i++) {

residents[i].resident.age++;

if (residents[i].resident.age==120){

residents.pop(residents[i]); // в 120 лет жизненный путь завершается..

};

if (cur_minuts==61){cur_minuts=0;cur_hour++;};

if (cur_hour==25){cur_hour=0;cur_day++;};

if (cur_day==366){cur_day=0;cur_year++;};

FPSText.text="С начала эпохи прошел: "+cur_minuts+" год"; // выводим FPS

StatText.text="Жителей:"+residents.length;

// перебираю каждого человека и двигаем его

for (let i = 0; i < residents.length; i++) {

step=false;

while (step==false){

pre_y=residents[i].position.y+Math.sin(residents[i].direction);

pre_x=residents[i].position.x+Math.cos(residents[i].direction);

if ((pre_x>=0)&& (pre_x<=screen_width) && (pre_y>=0) && (pre_y<=screen_height)) {

step=true;

} else {

residents[i].direction=randomIntFromInterval(0,360);

};

residents[i].position.y=residents[i].position.y+Math.sin(residents[i].direction);

residents[i].position.x=residents[i].position.x+Math.cos(residents[i].direction);

// проверим, есть ли совпадение точек?

// если возраст от 18..50

// если полы противоположные

// то считаем что это "лябовь" и размножаемся

for (let j = 0; j < residents.length; j++) {

if (Math.round(residents[i].position.y)==Math.round(residents[j].position.y) &&

Math.round(residents[i].position.x)==Math.round(residents[j].position.x) && i!=j){

if (residents[i].resident.age>=18 && residents[i].resident.age<=50){

if (residents[j].resident.age>=18 && residents[j].resident.age<=50){

if (residents[j].resident.gender==0 && residents[i].resident.gender==1){

console.log("-это лябофь!");

GenerateNewCitizen();

}

};

}

});

Оставить комментарий javascript, live, pixijs, игра жизнь

1 2 3 … 10 »

Пн	Вт	Ср	Чт	Пт	Сб	Вс
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31