Skip to main content

Visit Mozilla.org

Prosty RayCaster:RayCaster.html

z Mozilla Developer Center, polskiego centrum programistów Mozilli.

[edytuj] Ogólny przegląd

Jest to główny plik, który łączy w sobie wszystkie inne, a następnie ustawia wymiary elementu canvas i rozdzielczość raycaster. Określa również poziom mapy i prędkość animacji. Kolory powiązane z konkretnymi symbolami ściany (@, #, %, &) są określone w pliku Level.js

[edytuj] Źródło 

<html>

<head>
<title>raycaster</title>
<script type="text/javascript" src="trace.js"></script>
<link rel="stylesheet" type="text/css" href="trace.css" />
<script type="text/javascript" src="input.js"></script>
<script type="text/javascript" src="Player.js"></script>
<script type="text/javascript" src="Level.js"></script>
<script type="text/javascript" src="RayCaster.js"></script>

<script type="text/javascript">
	var C2D, W, H, RC;
	var fps = 24;
	var mspf = 1000 / fps;
	var updateInterval;
	var quit = false;
	
	function main() {
		var c = document.getElementById('canvas');
		if (c.getContext) {
			initializeCanvas(c);
			var P = new Player(8);
			var L = new Level();
			RC = new RayCaster(C2D, W, H, 4, L, P, input);
			if (initializeLevel()) {
				trace('mapa pomyślnie załadowana.');
				trace("trwa rzutowanie...");
				trace("  \'a\' - obrót w lewo");
				trace("  \'d\' - obrót w prawo");
				trace("  \'w\' - krok naprzód");
				trace("  \'s\' - krok wstecz");
				trace("  \'q\' - zatrzymaj rzutowanie");
				updateInterval = window.setInterval("update()", mspf);
			}
			else {
				trace("nie udało się załadować mapy");
			}
		}
		
		else {
			trace('przykro mi, ale potrzebujesz przeglądarki obsługującej znacznik canvas,');
			trace('takiej jak Safari lub Firefox 1.5+, aby obejrzeć demo.');
		}
	}
	
	function initializeCanvas(c) {
			C2D = c.getContext('2d');
			C2D.lineWidth = 1;
			C2D.globalAlpha = 1;
			C2D.globalCompositeOperation = 'source-over';
			W = c.width;
			H = c.height;
			trace('canvas initialized');
	}
	
	function initializeLevel() {
		var mapCells_x = 16;
		var mapCells_y = 16;
		var M = '' +
			'################' +
			'#  @@@@@       #' +
			'#  @   @ % # % #' +
			'#  @       #   #' +
			'#  @  @@       #' +
			'#    &         #' +
			'#   &   P      #' +
			'#  &      &&   #' +
			'#              #' +
			'#  ##  #@%#@%  #' +
			'#  #        #  #' +
			'#  ###      #  #' +
			'#  #        #  #' +
			'#  ######## #  #' +
			'#              #' +
			'################';
		
		trace('wysyłanie mapy...');
		return RC.loadMap(M, mapCells_x, mapCells_y);
	}
	
	function update() {
		if (input.quit) {
			input.quit = false;
			window.clearInterval(updateInterval);
			trace('raycaster halted.');
		}
		else {
			RC.update();
		}
	}
</script>

<style type="text/css">
canvas {
	border: 2px solid #000;
	position: absolute;
	left: 33%;
	margin-left: 10px;
}
</style>
</head>

<body onload="main();" onkeydown="press(event);" onkeyup="release(event);">
<div id="trace" class="window"><ul><li>RayCaster v.0.0.1</li></ul></div>
<canvas id="canvas" width="320" height="240"></canvas>
</body>

</html>


Prosty RayCaster
input.js | Level.js | Player.js | RayCaster.html | RayCaster.js | trace.css | trace.js

Źródło: "http://developer.mozilla.org/pl/docs/Prosty_RayCaster:RayCaster.html"