Skip to main content

Visit Mozilla.org

Un raycaster basique:RayCaster.html

Un article de MDC.


[modifier] Présentation

Ceci est le fichier principal qui assemble tous les autres, définit les dimensions du canvas et la résolution du raycaster, et spécifie la carte du niveau et la vitesse de rafraichissement. Les couleurs associées à chacun des symboles de murs (@, #, % et &) sont spécifiées dans Level.js

[modifier] Code source 

<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('carte chargée correctement.');
				trace("traçage des rayons...");
				trace("  \'a\' - tourner à gauche");
				trace("  \'d\' - tourner à droite");
				trace("  \'w\' - avancer");
				trace("  \'s\' - reculer");
				trace("  \'q\' - arrêter le raycaster");
				updateInterval = window.setInterval("update()", mspf);
			}
			else {
				trace("impossible de charger la carte");
			}
		}
		
		else {
			trace('désolés.. vous avez besoin d\'un navigateur pouvant gérer la balise canvas,');
			trace('comme Safari ou Firefox 1.5+ pour voir cette démo.');
		}
	}
	
	function initializeCanvas(c) {
			C2D = c.getContext('2d');
			C2D.lineWidth = 1;
			C2D.globalAlpha = 1;
			C2D.globalCompositeOperation = 'source-over';
			W = c.width;
			H = c.height;
			trace('canevas initialisé');
	}
	
	function initializeLevel() {
		var mapCells_x = 16;
		var mapCells_y = 16;
		var M = '' +
			'################' +
			'#  @@@@@       #' +
			'#  @   @ % # % #' +
			'#  @       #   #' +
			'#  @  @@       #' +
			'#    &         #' +
			'#   &   P      #' +
			'#  &      &&   #' +
			'#              #' +
			'#  ##  #@%#@%  #' +
			'#  #        #  #' +
			'#  ###      #  #' +
			'#  #        #  #' +
			'#  ######## #  #' +
			'#              #' +
			'################';
		
		trace('construction de la carte...');
		return RC.loadMap(M, mapCells_x, mapCells_y);
	}
	
	function update() {
		if (input.quit) {
			input.quit = false;
			window.clearInterval(updateInterval);
			trace('raycaster arrêté.');
		}
		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>


Un raycaster basique
input.js | Level.js | Player.js | RayCaster.html | RayCaster.js | trace.css | trace.js

Récupérée de « http://developer.mozilla.org/fr/docs/Un_raycaster_basique:RayCaster.html »