Пишем онлайн кликер на "чистом" C#
В прошлой статье мы рассмотрели что такое DuoCode. Сегодня мы напишем простую игру кликер без Asp.Net на чистом C# который будет транслирован в чистый JS. Посмотреть на нее можно здесь. Можно считать что появление этой статьи будет началом цикла уроков по DuoCode. Сейчас мы напишем простую игру кликер в которой нужно кликакть по красному квадратику на "чистом" C#. Ну что ж начнем...
Допустим что вы уже установили расширение для Visual Studio. Если у вас нет бесплатной лицензии то качаем триал (у вас есть 30 дней что-бы сделать что-то и выложить на DuoCode(далее DC)) и да кстати Community лицензия работает только на Community версии Visual Studio. И так нажимаем новый проект, выбираем DuoCode и HelloDuoCode.
У нас создается asp.net проект. Но это не преграда так как в <solution name>\<project name>\ есть все файли сайта. Именно самое главное это: папка scripts в которой все наши C# скрипты после нажатия кнопки собрать будут появлятся там в виде JS; файл console.css; index.html. Это и есть наш готовый сайт. И да для того чтобы компилировать это можно не дожидаясь загрузки виртуального сервера и запуска експлорера а просто нажать F6. Итак в файле Program.cs стираем весь клас Greater и удаляем из класса Program все кроме функии Run(в ней тоже нужно все стереть). Также необходимо удалить в index.html все между тегами <body></body>. Итак сначала инициализируем все наши переменные.
Теперь в функции Run пишем следующее
Теперь код функции GameLoop
Теперь идет самый сложный код а именно колизии. Весь этот код будет находится в функции MouseBehavior которая будет проверять попали ли мы в квадратик и будет перерисовывать его. Необходимо как то узнать попал ли курсор координатам в квадратик. Так как математику я не особо знаю и из-за чего в GameDev идти не собираюсь этот код для меня оказался проблемным. Я даже нарисовал соответственный рисунок чтобы поскорее понять все это
И все же без копи-пастинга у меня это получилось)
У вас может быть вопрос почему вместо void dynamic? Я еще сам до конца с этим еще не разобрался, но как я понял, это нужно писать для всех event функций которые будут использоваться в addEventListener и всяких там document.onClick и т.д.
Теперь осталась последняя функция которая все перерисовывает а именно Draw
Вот такой не особо сложный код у нас получился. Исходники здесь.
Пописав на DuoCode я понял что базовое понимание JavaScripta у вас уже должно быть. Все таки без него никуда(.DuoCode имеет обертки для всех его функций а если чего то и нет то их можно доделать. На этом мы не останавливаемся, в следующей статье мы рассмотрим более интересный пример. До скорой встречи.
Допустим что вы уже установили расширение для Visual Studio. Если у вас нет бесплатной лицензии то качаем триал (у вас есть 30 дней что-бы сделать что-то и выложить на DuoCode(далее DC)) и да кстати Community лицензия работает только на Community версии Visual Studio. И так нажимаем новый проект, выбираем DuoCode и HelloDuoCode.
У нас создается asp.net проект. Но это не преграда так как в <solution name>\<project name>\ есть все файли сайта. Именно самое главное это: папка scripts в которой все наши C# скрипты после нажатия кнопки собрать будут появлятся там в виде JS; файл console.css; index.html. Это и есть наш готовый сайт. И да для того чтобы компилировать это можно не дожидаясь загрузки виртуального сервера и запуска експлорера а просто нажать F6. Итак в файле Program.cs стираем весь клас Greater и удаляем из класса Program все кроме функии Run(в ней тоже нужно все стереть). Также необходимо удалить в index.html все между тегами <body></body>. Итак сначала инициализируем все наши переменные.
static string[] MaterialColors = { "#9C27B0", "#673AB7", "#3F51B5", "#2196F3", "#009688", "#4CAF50", "#CDDC39", "#FFC107", "#FFEB3B", "#FF5722", "#FF9800","" }; /*Цвета для фона*/
static HTMLCanvasElement canvas = document.createElement<HTMLCanvasElement>("canvas");/*создаем канвас*/
static HTMLDivElement canvas_div = document.createElement<HTMLDivElement>("canvas_div");/*создаем слои для канваса*/
static CanvasRenderingContext2D ctx = canvas.getContext("2d");/*создаем объект в канвасе*/
static CanvasRenderingContext2D text = canvas.getContext("2d");
static Random rnd;/*создаем рандом*/
static int newX, newY, score = 0;/*нужные числовые переменные*/
Теперь в функции Run пишем следующее
rnd = new Random(); /*Инициализируем рандом*/Функция Run запускается при запуске страницы и объявляется в index.html в head.
canvas_div.appendChild(canvas);/*Вставляем канвас в наш слой*/
canvas.width = 640;/*Устанавливаем размеры*/
canvas.height = 480;
canvas_div.style.width = document.body.clientWidth.ToString();/*Устанавливаем выравнивание*/
canvas.style.marginLeft = "25%";
document.body.appendChild(canvas_div); /*Вставляем в документ слой и вмести с ним канвас*/
Draw(30, 30);/*делаем первую отрисовку*/
GameLoop();/*запускаем игровой цикл*/
Теперь код функции GameLoop
static void GameLoop()
{
canvas.addEventListener("click", MouseBehavior); /*Страшные выражения которые перейшли к нам от JS, аналог canvas.addEventListener('click', function(){}) на js*/
GameLoop();/*рекурсия*/
}
Теперь идет самый сложный код а именно колизии. Весь этот код будет находится в функции MouseBehavior которая будет проверять попали ли мы в квадратик и будет перерисовывать его. Необходимо как то узнать попал ли курсор координатам в квадратик. Так как математику я не особо знаю и из-за чего в GameDev идти не собираюсь этот код для меня оказался проблемным. Я даже нарисовал соответственный рисунок чтобы поскорее понять все это
И все же без копи-пастинга у меня это получилось)
static dynamic MouseBehavior(MouseEvent e/*указываем что мы отслеживаем мышь*/)
{
var x = e.x - (34+(document.body.clientWidth*25)/100);/*отслеживаем x мыши, из-за выравнивания которое очень странно влияет на положение мыши относительно canvas нужно к коефициенту 34 добавлять 25% от ширины страницы.*/
var y = e.y - 138;/*отслеживаем y мыши за коэффициентом 138. Все коэффициенты были найдены долгой и нудной отладкой*/
if (x<newX+40 && x>newX-40 && y < newY + 40 && y > newY - 40)/*колисия*/
{
Draw(30, 30);/*Перерисовуем канвас*/
score++;/*Увеличиваем очки*/
}
return true;
}
У вас может быть вопрос почему вместо void dynamic? Я еще сам до конца с этим еще не разобрался, но как я понял, это нужно писать для всех event функций которые будут использоваться в addEventListener и всяких там document.onClick и т.д.
Теперь осталась последняя функция которая все перерисовывает а именно Draw
static void Draw(int size_x, int size_y)Также вы можете что-то дописать в index.html. Типо "<p>Привет, это не-до кликер.</p>
{
canvas.style.backgroundColor = MaterialColors[rnd.Next(0,MaterialColors.Length-1)];/*Меняем цвет фона канваса*/
ctx.clearRect(0, 0, canvas.width, canvas.height);/*Очищаем канвас*/
ctx.beginPath();/*Начинаем рисовать*/
newX = rnd.Next(20, 620);/*Генерируем новые значения x, y для квадрата*/
newY = rnd.Next(20, 460);
ctx.rect(newX, newY, size_x, size_y); /*Рисуем квадрат*/
ctx.fillStyle = "#F44336"; /*Устанавливаем цвет*/
ctx.fill();/*Закрашиваем квадрат*/
text.shadowColor = "#263238";/*Устанавливаем цвет тени текста*/
text.shadowOffsetX = 5;/*Отступы тени*/
text.shadowOffsetY = 5;
text.shadowBlur = 5;/*Смягчение тени*/
text.fillStyle = "#00BCD4";/*Цвет самого текста*/
text.strokeStyle = "#263238";/*Цвет обводки, должен быть таким же для если есть тени*/
text.font = "bold 20px sans-serif";/*Устанавливаем шрифт и размер*/
text.fillText("Score "+score.ToString(), 20, 50);/*Пишем текст*/
ctx.closePath();/*Заканчиваем рисование*/
}
Вот такой не особо сложный код у нас получился. Исходники здесь.
Пописав на DuoCode я понял что базовое понимание JavaScripta у вас уже должно быть. Все таки без него никуда(.DuoCode имеет обертки для всех его функций а если чего то и нет то их можно доделать. На этом мы не останавливаемся, в следующей статье мы рассмотрим более интересный пример. До скорой встречи.
Комментарии
Отправить комментарий