Добрый день. HTML 5 потрясающие возможности для реализации художественных замыслов на стыке математики, программирования и дизайна. Нельзя обойти эту технологию стороной при разработке игр, нельзя...
Итак, подумал я как-то, что здорово было бы создать программу, которая бы генерировала звёздное небо.
Звёздное небо можно нарисовать с помощью отдельных точек размером в 1 пиксел. Далее, можно было бы задать для каждой точки свой цвет. Мерцание можно эмитировать изменением размера точки на 2-3 пиксела в случайном порядке, для отдельных точек.
1.Создадим новый проект http://2l4u.ru/gamecreator.pia
2. Откроется сцена - окно игры, которую мы создаём
3. Теперь нам нужно создать два события: событие "STAGE START" и событие "Create".
В "STAGE START" можно помещать HTML - код.
В событие "Create", "Step" только Jquery / Java Script
Таким образом, в "STAGE START" мы можем разместить код HTML5.
4. Для этого, можно использовать объект контроллер - ctrl
Конечно, мы можем создать свой объект, но контроллер ctrl присутствует по умолчанию
Нажимаем на шестерёнку и вызываем окно свойств
Итак, добавляем событие STAGE START
Результатом, действием на это событие добавим "blank script"
теперь откроем blank script - чистый скрипт на редактирование...
Откроется окно Редактор событий
Теперь вставим код:
<script>
// Эта функция генерирует случайной число в заданных приделах
function getRandomInt(min, max)
{
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// размер экрана звёздного неба
var screen_width=765;
var screen_height=430;
// кол-во звёзд
var all_stars=getRandomInt(50, 1000);
// начальные координаты "звёздного неба"
var start_x=0;
var start_y=0
// массивы для хранения данных о звёздах
// эти массивы нам нужны, чтобы одновременно передвигать звёзды
// создавать иллюзию движения
stars_array_ids = new Array();
stars_array_ids_x = new Array();
stars_array_ids_y = new Array();
stars_array_ids_color = new Array();
stars_array_ids_type = new Array();
// функция для преобразования числовых данных в формат цвета
function rgb2hex(r,g,b)
{
return Number(r).toString(16).toUpperCase().replace(/^(.)$/,'0$1') +
Number(g).toString(16).toUpperCase().replace(/^(.)$/,'0$1') +
Number(b).toString(16).toUpperCase().replace(/^(.)$/,'0$1');
}
// загрузка страницы
$(document).ready(function(){
// задаем параметры элементу CANVAS с id = "canv_1"
$("#canv_1").css("width",screen_width);
$("#canv_1").css("height",screen_height);
// получаем 2d контекст на котором и будем рисовать
var canvas = document.getElementById("canv_1");
if (canvas.getContext)
{
var ctx = canvas.getContext("2d");
}
// наполняем массивы - генерируем характеристики звёзд
for(i_temp=0;i_temp<all_stars; i_temp++){
//sum += a[i];
stars_array_ids[i_temp] = '"stars_'+i_temp+'"';
stars_array_ids_y[i_temp] = getRandomInt(-1*screen_height,screen_height);
stars_array_ids_x[i_temp] = getRandomInt(0,screen_width);
stars_array_ids_color[i_temp] =('#'+rgb2hex(getRandomInt(1,255),getRandomInt(1,255),getRandomInt(1,255)));
stars_array_ids_type[i_temp] = getRandomInt(0,50);
}
// создаём функцию рисования звёздного неба
// эта функция будет вызываться через равные промежутки времени
function draw_move_stars(){
// заполняем экран чёрным фоном
ctx.fillStyle="black";
ctx.fillRect(0,0,screen_width,screen_height);
// получаем характеристики для рисования на холсте
for(i_temp=0;i_temp<stars_array_ids.length;i_temp++){
var x=stars_array_ids_x[i_temp];
var y=stars_array_ids_y[i_temp];
var color=stars_array_ids_color[i_temp];
var type= stars_array_ids_type[i_temp];
y=y+1;
if (y>screen_height){
y=-screen_height;
}
stars_array_ids_y[i_temp]=y;
ctx.shadowColor = "blue";
ctx.shadowBlur = 5;
ctx.fillStyle =color;
if (type==0){
ctx.fillStyle =('#'+rgb2hex(getRandomInt(100,255),getRandomInt(100,255),getRandomInt(100,255)));
}
var razm_x=getRandomInt(1,2);
var razm_y=getRandomInt(1,2);
if (type==0){
ctx.fillRect(x,y,razm_x,razm_y);
} else {
ctx.fillRect(x,y,1,1);
}
// после того, как мы нарисовали звёзды - сбрасываем параметры холста
ctx.restore();
}
}
var i_time=0;
// теперь создаём функцию, которая будет вызывать себя
// функцию draw_move_stars через равные промежутки времени - 50 миллисекунд
function move_stars() {
// увеличиваем значение счётчика
i_time++;
// через 1000 миллисекунд вызывает - second_passed - себя
setTimeout(move_stars, 50);
draw_move_stars();
}
move_stars();
});
</script>
</head>
<body>
<CANVAS id="canv_1" width="765" height="430"></CANVAS>
</body>
</html>
2. Нажимаем сохранить, закрываем редактор событий. Жмём Пуск
результат можно посмотреть здесь http://2l4u.ru/program_740.php
