Начиная с этого дня на моем блоге будут публиковаться уроки HTML5, в которых будет рассмотрен процесс разработки игр. На первом уроке мы рассмотрим основы — работу с холстом(canvas), научимся создавать простые объекты и связывать с ними события мыши. Обратите внимание, что в начале, мы будем изучать основы, а работать в 3D с WebGL будем чуть позже.
В каждом новом уроке мы будем делать что-нибудь новое. На 1 уроке мы создадим геометричекую фигуру, у которой будет 7 вершин, в этих вершинах будут отрисовываться окружности, мы сможем менять положение вершин, перетаскивая их мышью. Также, мы заполним нашу фигуру полупрозрачным цветом. Для начала этого будет достаточно.
Вот наши демо и архив с исходниками:
Шаг 1. HTML
index.html
<!DOCTYPE html> <html lang="ru" > <head> <meta charset="utf-8" /> <title>Создаем свою первую игру на HTML5 – Урок 1 | officialplat-tt.ru</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="js/script.js"></script> </head> <body> <div class="container"> <canvas id="scene" width="800" height="600"></canvas> </div> <footer> <h2>Создаем свою первую игру на HTML5 – Урок 1</h2> <a href="http://officialplat-tt.ru/?p=1536" class="stuts">Вернуться на <span>officialplat-tt.ru</span></a> </footer> </body> </html>
Шаг 2. CSS
css/main.css
/* общие стили */ *{ margin:0; padding:0; } body { background-color:#bababa; background-image: -webkit-radial-gradient(600px 300px, circle, #ffffff, #bababa 60%); background-image: -moz-radial-gradient(600px 300px, circle, #ffffff, #bababa 60%); background-image: -o-radial-gradient(600px 300px, circle, #ffffff, #bababa 60%); background-image: radial-gradient(600px 300px, circle, #ffffff, #bababa 60%); color:#fff; font:14px/1.3 Arial,sans-serif; min-height:1000px; } .container { width:100%; } .container > * { display:block; margin:50px auto; } footer { background-color:#212121; bottom:0; box-shadow: 0 -1px 2px #111111; display:block; height:70px; left:0; position:fixed; width:100%; z-index:100; } footer h2{ font-size:22px; font-weight:normal; left:50%; margin-left:-400px; padding:22px 0; position:absolute; width:540px; } footer a.stuts,a.stuts:visited{ border:none; text-decoration:none; color:#fcfcfc; font-size:14px; left:50%; line-height:31px; margin:23px 0 0 110px; position:absolute; top:0; } footer .stuts span { font-size:22px; font-weight:bold; margin-left:5px; } h3 { text-align:center; } /* стили урока */ #scene { background-image:url(../images/01.jpg); position:relative; }
Шаг 3. JS
js/jquery-1.5.2.min.js
В примере мы будем использовать jQuery. Так будет проще обрабатывать различные события. Следующий файл самый важный, так как он работает с графикой.
js/script.js
var canvas, ctx; var circles = []; var selectedCircle; var hoveredCircle; // ------------------------------------------------------------- // объекты : function Circle(x, y, radius){ this.x = x; this.y = y; this.radius = radius; } // ------------------------------------------------------------- // функции отрисовки : function clear() { // функция очищает canvas ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); } function drawCircle(ctx, x, y, radius) { // функция рисует окружность ctx.fillStyle = 'rgba(255, 35, 55, 1.0)'; ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); } function drawScene() { // главная функция отрисовки clear(); // очистить canvas ctx.beginPath(); // начало фигуры ctx.fillStyle = 'rgba(255, 110, 110, 0.5)'; ctx.moveTo(circles[0].x, circles[0].y); for (var i=0; i<circles.length; i++) { ctx.lineTo(circles[i].x, circles[i].y); } ctx.closePath(); // конец фигуры ctx.fill(); // заполнение фигуры ctx.lineWidth = 5; ctx.strokeStyle = 'rgba(0, 0, 255, 0.5)'; ctx.stroke(); // отрисовка границы for (var i=0; i<circles.length; i++) { // отобразить все окружности drawCircle(ctx, circles[i].x, circles[i].y, (hoveredCircle == i) ? 25 : 15); } } // ------------------------------------------------------------- // инициализация $(function(){ canvas = document.getElementById('scene'); ctx = canvas.getContext('2d'); var circleRadius = 15; var width = canvas.width; var height = canvas.height; var circlesCount = 7; // мы нарисуем 7 окружностей for (var i=0; i<circlesCount; i++) { var x = Math.random()*width; var y = Math.random()*height; circles.push(new Circle(x,y,circleRadius)); } // привязываем событие нажатия мыши (для перетаскивания) $('#scene').mousedown(function(e) { var canvasPosition = $(this).offset(); var mouseX = e.layerX || 0; var mouseY = e.layerY || 0; for (var i=0; i<circles.length; i++) { // проверка всех окружностей - клавиша мыши нажата внутри окружности или нет var circleX = circles[i].x; var circleY = circles[i].y; var radius = circles[i].radius; if (Math.pow(mouseX-circleX,2) + Math.pow(mouseY-circleY,2) < Math.pow(radius,2)) { selectedCircle = i; break; } } }); $('#scene').mousemove(function(e) { // привязываем событие движения мыши для перетаскивания выбранной окружности var mouseX = e.layerX || 0; var mouseY = e.layerY || 0; if (selectedCircle != undefined) { var canvasPosition = $(this).offset(); var radius = circles[selectedCircle].radius; circles[selectedCircle] = new Circle(mouseX, mouseY,radius); // изменяем позицию выбранной окружности } hoveredCircle = undefined; for (var i=0; i<circles.length; i++) { // проверка всех окружностей - клавиша мыши нажата внутри окружности или нет var circleX = circles[i].x; var circleY = circles[i].y; var radius = circles[i].radius; if (Math.pow(mouseX-circleX,2) + Math.pow(mouseY-circleY,2) < Math.pow(radius,2)) { hoveredCircle = i; break; } } }); $('#scene').mouseup(function(e) { // событие mouseup - очистка выбранной окружности selectedCircle = undefined; }); setInterval(drawScene, 30); // скорость отрисовки });
Я оставил комментарии в тех местах, где могут возникнуть вопросы.
Круто, не так ли? Я буду рад , если Вы оставите комментарий и поделитесь ссылкой с друзьями. Удачи!
Получайте новые статьи блога прямо себе на почту
для меня это темный лес пока!
Надо будет попробовать…
Это хрень полное
Аргументируйте свое утверждение
это не хрень, но если можно, оставляйте чуть больше комментариев в js-скрипте
Ой … не «чуть» больше, а… НАМНОГО больше.
circles[selectedCircle] = new Circle(mouseX, mouseY,radius);
// изменяем позицию выбранной окружности
оригинально ._.