Логическая игра с использованием элемента HTML5 canvas

Один из новых интересных элементов в HTML5 - <canvas>. Он позволяет разработчику рисовать все, что угодно с помощью JavaScript. В данном уроке мы создадим логическую игру на его основе.

Игра называется "Выключатель" и навеяна оригинальной версией для iPhone. Цель игры - выключить все лампочки, нажимая на них. При этом соседние лампочки переключают свое состояние. Довольно занимательная логическая головоломка.

 

HTML/CSS

Разметка для нашей игры будет весьма незатейлива. Элемент <canvas> в контейнере и простые стили.

<div id="lightcontainer">
	<canvas id="lightpanel" width="500" height="500"></canvas>
</div>
#lightcontainer { margin:20px auto; width:500px; }
#lightpanel { background-color:#002B33;
	-moz-box-shadow:0 0 5px #999; -moz-border-radius:10px;
	-webkit-box-shadow:0 0 5px #999; -webkit-border-radius:10px;
	box-shadow:0 0 5px #999; border-radius:10px;
}

 

Идея

Ниже представлено несколько рисунков, которые описывают идею игры.

Сначала нам нужно создать игровое поле.

Затем реализуется логика переключений. Красными стрелками обозначены места, в которых посетитель нажимает клавишу мыши. При этом соседние ячейки переключают свое состояние - если они были включены, то выключаются и наоборот.

В завершении создаем стартовую позицию.

 

JavаScript

Двумерный массив отлично подходит для отображения игрового поля. С ним легко работать, и он отлично представляет игровую ситуацию.

	// Двумерный массив, который представляет игровое поле
	// "x" означает "включено"
	// "o" означает "выключено"
	var lightField =
	[
		[ "x", "o", "o", "x", "x" ],
		[ "o", "o", "x", "o", "x" ],
		[ "o", "x", "o", "x", "o" ],
		[ "x", "o", "x", "o", "o" ],
		[ "x", "x", "o", "o", "x" ]
	];

Обработчик события мыши проверят, в какой ячейке произошло событие и выполняет обработку окружающих ячеек. Если посетитель уже достиг поставленной цели, то событие игнорируется.

	// Привязываем обработчик события click
	$("#lightpanel").click(function(e) {
		
		if(!userCanClick) {
			return false;	
		}
		
		// e дает нам абсолютные значения x и y, 
		// поэтому нам надо провести вычисления относительно положения элемента canvas
		var pos = $("#lightpanel").position();
		var ox = e.pageX - pos.left;
		var oy = e.pageY - pos.top;
		
		// Проверяем, какие поля надо перевернуть
		var yField = Math.floor(oy / 100);
		var xField = Math.floor(ox / 100);
		
		// Поле, на котором произошло событие click 
		lightField[yField][xField] = lightField[yField][xField] == "x" ? "o" : "x";
		
		// Поле выше
		if(yField-1 >= 0) {
			lightField[yField-1][xField] = lightField[yField-1][xField] == "x" ? "o" : "x";
		}
		
		// Поле ниже
		if(yField+1 < 5) {
			lightField[yField+1][xField] = lightField[yField+1][xField] == "x" ? "o" : "x";
		}
		
		// Поле справа
		if(xField-1 >= 0) {
			lightField[yField][xField-1] = lightField[yField][xField-1] == "x" ? "o" : "x";	
		}
		
		// Поле слева
		if(xField+1 < 5) {
			lightField[yField][xField+1] = lightField[yField][xField+1] == "x" ? "o" : "x";	
		}
		
		repaintPanel();
	});

Очень важная функция -  вывод панели.

	/*
	* Выводим панель
	*/
	function repaintPanel() {
		
		// Получаем элемент canvas
		var canvas = document.getElementById("lightpanel");
		
		// Проверяем поддержку браузером элемента <canvas>
		if (!canvas.getContext){
			alert("Для данной игры ваш браузер должен поддерживать элемент <canvas>.");
			return;
		} else {
			clear();
			
			// Получаем контекст для рисования
			var ctx = canvas.getContext("2d");
			
			// Создаем поля
			var allLightsAreOff = true;
			for(var i = 0; i < lightField.length; i++) { // Строки
				for (var j = 0; j < lightField[i].length; j++) { // Столбцы
					
					// Устанавливаем кисти
					ctx.lineWidth = 3;
					ctx.strokeStyle = "#83BD08";
					
					// Начинаем вывод
	        		ctx.beginPath();
	        		
	        		// arc( x, y, радиус, стартовый_угол, конечный_угол, против_часовой_стрелки)
			        ctx.arc(j * 100 + 50, i * 100 + 50, 40, 0, Math.PI*2, true);
			        
			        // Выводим рамку
	         		ctx.stroke();
	         		
	         		// Проверяем, нужно ли заполнять рамку
	         		if(lightField[i][j] == "x") {
	         			ctx.fillStyle = "#FFBD38";
	         			ctx.beginPath();
	         			ctx.arc(j * 100 + 50, i * 100 + 50, 38, 0, Math.PI*2, true);
	         			ctx.fill();
	         			
	         			// Так как нам нужно заполниить данное поле, то значит не все лампочки выключены
	         			allLightsAreOff = false;
	         		}
					
				}
			}
			
			// Проверка выключения всех лампочек
			if(allLightsAreOff) {
				// Пользователь больше не может нажимать на элементы
				userCanClick = false;
				
				// Выводим сообщение
				alert("Все лампочки выключены! Поздравляю с победой!");
			}
		}
	}

Так как элемент <canvas> не обновляется после перерисовки, нам придется вручную очищать его специальным методом clear:

	/*
	* Очищаем элемент canvas
	*/
	function clear() {
		var canvas = document.getElementById("lightpanel");
		var ctx = canvas.getContext("2d");
		ctx.clearRect(0, 0, 500, 500);
	}

 

Готово!

Данный урок является демонстрацией возможностей использования элемента <canvas> в веб проектах. Для создания полноценной игры требуется еще поработать над кодом: ввести дополнительные уровни, таймер, учет лучшего результата и так далее.

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/SVI7_7XALgA/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Логическая игра с использованием элемента HTML5 canvas | | 2012-06-19 12:04:34 | | Статьи Web-мастеру | | Один из новых интересных элементов в HTML5 - . Он позволяет разработчику рисовать все, что угодно с помощью JavaScript. В данном уроке мы создадим логическую игру на его основе. Игра называется | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: