Главная Обзор Помощь
Войти
lu
/
lp
зеркало из git://github.com/heyLu/lp
Следить 1
В избранное 0
Ответвить 0
Код Обсуждения 0 Коммиты 51 Релизы 1 Вики
Просмотр исходного кода

hello, pixl.

Lucas Stadler лет назад: 12
Родитель
a437349cf0
Сommit
f637fe44bf
1 измененных файлов с 143 добавлено и 0 удалено
Разделённый вид Показать статистику Diff
  1. 143 0
      js/pixl/index.html

+ 143 - 0
js/pixl/index.html
Просмотреть файл 

@ -0,0 +1,143 @@
1 
<!doctype html>
2 
<html>
3 
<head>
4 
	<title>.pixl</title>
5 
	<meta charset="utf-8" />
6 
	<style type="text/css">
7 
		body { overflow: hidden; }
8
9 
		canvas {
10 
			position: absolute;
11 
			top: 0;
12 
			left: 0;
13 
		}
14 
	</style>
15 
</head>
16
17 
<body>
18 
	<canvas id="stage"></canvas>
19 
	<script>
20 
		window.polyfill = {};
21
22 
		polyfill.movement = function(ev) {
23 
			ev.movementX = ev.movementX || ev.mozMovementX || ev.webkitMovementX;
24 
			ev.movementY = ev.movementY || ev.mozMovementY || ev.webkitMovementY;
25 
			return ev;
26 
		};
27 
	</script>
28 
	<script>
29 
		window.pixl = {};
30 
		pixl.stage = document.querySelector("#stage");
31 
		pixl.ctx = stage.getContext("2d");
32 
		pixl.window = {w: window.innerWidth, h: window.innerHeight};
33 
		pixl.world = {"0,0": {}, "-1,0": {}};
34 
		pixl.pos = {x: 0, y: 0};
35 
		pixl.size = 20;
36
37 
		pixl.stage.width = pixl.window.w;
38 
		pixl.stage.height = pixl.window.h;
39
40 
		pixl.to_world = function(screen_pos) {
41 
			return {x: Math.floor((screen_pos.x - pixl.window.w / 2 + pixl.pos.x * pixl.size) / pixl.size),
42 
					y: Math.floor((screen_pos.y - pixl.window.h / 2 + pixl.pos.y * pixl.size) / pixl.size)};
43 
		}
44
45 
		pixl.to_screen = function(world_pos) {
46 
			return {x: pixl.window.w / 2 + (world_pos.x - pixl.pos.x) * pixl.size,
47 
					y: pixl.window.h / 2 + (world_pos.y - pixl.pos.y) * pixl.size};
48 
		}
49
50 
		pixl.draw_pixl = function(pos, color) {
51 
			pixl.ctx.fillStyle = color || "black";
52 
			var screen_pos = pixl.to_screen(pos);
53 
			pixl.ctx.fillRect(screen_pos.x, screen_pos.y, pixl.size, pixl.size);
54 
			pixl.world[pos.x + "," + pos.y] = {};
55 
		}
56
57 
		pixl.redraw = function() {
58 
			pixl.ctx.clearRect(0, 0, pixl.window.w, pixl.window.h);
59
60 
			var w2 = Math.round(pixl.window.w / pixl.size / 2);
61 
			var h2 = Math.round(pixl.window.h / pixl.size / 2);
62
63 
			pixl.ctx.fillStyle = "black";
64 
			for (var x = -w2; x < w2; x++) {
65 
				for (var y = -h2; y < h2; y++) {
66 
					var pt = pixl.world[[x, y]];
67 
					if (pt !== undefined) {
68 
						pixl.draw_pixl({x: x, y: y}, pt.color);
69 
					}
70 
				}
71 
			}
72 
		}
73
74 
		pixl.redraw();
75
76 
		pixl.stage.addEventListener("wheel", function(ev) {
77 
			ev.preventDefault();
78 
			pixl.size += (pixl.size / 10) * Math.sign(ev.deltaY);
79 
			if (pixl.size < 5) {
80 
				pixl.size = 5;
81 
			} else if (pixl.size > pixl.window.w / 2) {
82 
				pixl.size = Math.round(pixl.window.w / 2);
83 
			}
84 
			pixl.redraw();
85 
		});
86
87 
		window.addEventListener("resize", function(ev) {
88 
			pixl.window.w = window.innerWidth;
89 
			pixl.window.h = window.innerHeight;
90 
			pixl.stage.width = pixl.window.w;
91 
			pixl.stage.height = pixl.window.h;
92 
			pixl.redraw();
93 
		});
94
95 
		pixl.drag = {start: undefined, current: undefined};
96 
		pixl.stage.addEventListener("mousedown", function(ev) {
97 
			/*if (document.mozPointerLockElement === null) {
98 
				document.addEventListener("mozpointerlockerror", console.log.bind(console));
99 
				pixl.stage.mozRequestPointerLock();
100 
			}*/
101
102 
			pixl.drag.start = {x: ev.clientX, y: ev.clientY};
103 
			pixl.drag.pos = pixl.pos;
104 
		});
105
106 
		pixl.stage.addEventListener("mousemove", function(ev) {
107 
			if (pixl.drag.start !== undefined) {
108 
				pixl.drag.current = {x: ev.clientX, y: ev.clientY};
109 
			}
110 
		});
111
112 
		pixl.stage.addEventListener("mouseup", function(ev) {
113 
			if (pixl.drag.current === undefined) {
114 
				var ev = polyfill.movement(ev);
115 
				pixl.draw_pixl(pixl.to_world({x: ev.clientX, y: ev.clientY}));
116 
			} else {
117 
				console.error("drag not implemented");
118 
			}
119 
			pixl.drag = {};
120 
		});
121
122 
		document.addEventListener("keydown", function(ev) {
123 
			if (ev.keyCode >= 37 && ev.keyCode <= 40) {
124 
				switch (ev.keyCode) {
125 
					case 37: // left
126 
						pixl.pos.x -= 1;
127 
						break;
128 
					case 38: // up
129 
						pixl.pos.y -= 1;
130 
						break;
131 
					case 39: // right
132 
						pixl.pos.x += 1;
133 
						break;
134 
					case 40: // down
135 
						pixl.pos.y += 1;
136 
						break;
137 
				}
138 
				pixl.redraw();
139 
			}
140 
		});
141 
	</script>
142 
</body>
143 
</html>