Añadidos lander, outrun1 y outrun2

2023-01-27 08:14:08 +01:00
commit 1a85d80716
3 changed files with 715 additions and 0 deletions
--- a/outrun1.html
+++ b/outrun1.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title></title>
+    <style type="text/css">
+		body {
+			background-color: black;
+		}
+		canvas {
+			display: block;
+			width: 640px;
+			height: 480px;
+			margin: 50px auto;
+			image-rendering: pixelated;
+		}
+		div { color: white; }
+    </style>
+</head>
+<body">
+	<div><span id="fps">0</span>&nbsp;<span id="look">0</span>&nbsp;<span id="altura">0</span></div>
+	<canvas id="canvas" width="320" height="240"></canvas>
+
+<script type="text/javascript">
+
+	// variables generals
+	var delta = 0;
+	var lastRender = Date.now();
+	var canvas = document.getElementById("canvas");
+    var canvasWidth  = canvas.width;
+    var canvasHeight = canvas.height;
+    var ctx = canvas.getContext('2d');
+    var imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
+
+    var buf = new ArrayBuffer(imageData.data.length);
+    var buf8 = new Uint8ClampedArray(buf);
+    var data = new Uint32Array(buf);
+
+	var leftPressed = false;
+	var upPressed = false;
+	var rightPressed = false;
+	var downPressed = false;
+	
+    var width         = 320;                    // logical canvas width
+    var height        = 240;                     // logical canvas height
+
+	var nowTime = Date.now();
+	var lastTime = nowTime;
+	var dt = 0;
+	
+	// capturem els events de teclat
+	document.addEventListener('keydown', function(event) {
+		if (event.keyCode == 37) { leftPressed = true; event.preventDefault(); }
+		else if (event.keyCode == 38)  { upPressed = true; event.preventDefault(); }
+		else if (event.keyCode == 39)  { rightPressed = true; event.preventDefault(); }
+		else if (event.keyCode == 40)  { downPressed = true; event.preventDefault(); }
+	});
+	document.addEventListener('keyup', function(event) {
+		if (event.keyCode == 37) { leftPressed = false; event.preventDefault(); }
+		else if (event.keyCode == 38)  { upPressed = false; event.preventDefault(); }
+		else if (event.keyCode == 39)  { rightPressed = false; event.preventDefault(); }
+		else if (event.keyCode == 40)  { downPressed = false; event.preventDefault(); }
+	});
+	
+	// variables especifiques del joc
+	var dw = 0;
+	var w;
+	var cw;
+	var center;
+	var line;
+	var effect;
+	var carX = 0;
+
+	render();
+	
+	// Bucle del joc
+	function render() {
+	
+		// Pinta el fondo
+		for (var i = 0; i < 160*canvasWidth; ++i) { data[i] = 0xfffd8a00; }
+
+		// Pinta la carretera
+		cw = 0;
+		w = 240;
+		for (var y = 240; y >= 160; --y) {
+			line = 80 - 240 + y;
+			effect = line / 80;
+			center = 160 + (carX*effect);
+			dw += 0.01;
+			cw = dw + 240 / (y - 160);
+			w -= 2.88;
+			if (w > 0 ) {
+				var start = Math.floor(center-w);
+				var end = Math.floor(center+w);
+				for (var x = 0; x < 320; ++x) {
+					if ((x < start) || (x > end)) {
+						data[y * canvasWidth + x] = (cw % 8 > 4) ? 0xffcad8ee : 0xffc0cee0;
+					} else {
+						var coef = (x-start)/(w*2);
+						if ((coef < 0.05) ||
+							(coef > 0.95) ||
+							((coef > 0.33) && (coef < 0.35)) ||
+							((coef > 0.64) && (coef < 0.66))) {
+							data[y * canvasWidth + x] = (cw % 8 > 4) ? 0xffffffff : 0xff989898;
+						} else {
+							data[y * canvasWidth + x] = (cw % 8 > 4) ? 0xff909090 : 0xff989898;
+						}
+					}
+				}
+			}
+		}
+
+		// Volcar el array de pixels al canvas
+		imageData.data.set(buf8);
+		ctx.putImageData(imageData, 0, 0);
+		requestAnimationFrame(render);
+
+		// updatar els fps
+		delta++;
+		if (Date.now() - lastRender >= 1000) {
+			lastRender = Date.now();
+			document.getElementById("fps").innerHTML = delta + " fps";
+			delta = 0;
+		}
+		
+		// updatar el delta time
+		lastTime = nowTime;
+		nowTime = Date.now();
+		dt = nowTime - lastTime;
+
+		// si s'han pulsat tecles, fem coses
+		if (leftPressed) { carX += 10;}
+		if (rightPressed) { carX -= 10;}
+
+		if (upPressed) {}
+		if (downPressed) {}
+	}
+</script>
+</body>
+</html>