生活 – 蔡海斌

http://www.php100.com/html/it/mobile/2014/0612/6971.html

玩才是学习的动力

背景分析

001//一个圆圈弧度
002//用来识别用户可视弧度 等等，绘制skybox时做图片截取处理.
003var CIRCLE = Math.PI * 2;
004var MOBILE = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i
005        .test(navigator.userAgent)
006function Controls() {
007    this.codes = {
008        37 : 'left',
009        39 : 'right',
010        38 : 'forward',
011        40 : 'backward'
012    };
013    this.states = {
014        'left' : false,
015        'right' : false,
016        'forward' : false,
017        'backward' : false
018    };
019    document.addEventListener('keydown', this.onKey.bind(this, true), false);
020    document.addEventListener('keyup', this.onKey.bind(this, false), false);
021    document.addEventListener('touchstart', this.onTouch.bind(this), false);
022    document.addEventListener('touchmove', this.onTouch.bind(this), false);
023    document.addEventListener('touchend', this.onTouchEnd.bind(this), false);
024}
025 
026Controls.prototype.onTouch = function(e) {
027    var t = e.touches[0];
028    this.onTouchEnd(e);
029    if (t.pageY < window.innerHeight * 0.5)
030        this.onKey(true, {
031            keyCode : 38
032        });
033    else if (t.pageX < window.innerWidth * 0.5)
034        this.onKey(true, {
035            keyCode : 37
036        });
037    else if (t.pageY > window.innerWidth * 0.5)
038        this.onKey(true, {
039            keyCode : 39
040        });
041};
042 
043Controls.prototype.onTouchEnd = function(e) {
044    this.states = {
045        'left' : false,
046        'right' : false,
047        'forward' : false,
048        'backward' : false
049    };
050    // 关闭默认事件
051    e.preventDefault();
052    // 关闭事件传递
053    e.stopPropagation();
054};
055 
056Controls.prototype.onKey = function(val, e) {
057    var state = this.codes[e.keyCode];
058    if (typeof state === 'undefined')
059        return;
060    this.states[state] = val;
061    e.preventDefault && e.preventDefault();
062    e.stopPropagation && e.stopPropagation();
063};
064 
065function Bitmap(src, width, height) {
066    this.image = new Image();
067    this.image.src = src;
068    this.width = width;
069    this.height = height;
070}
071/**
072 * 
073 * @param x
074 *            坐标
075 * @param y
076 *            坐标
077 * @param direction
078 *            方向
079 * @returns {Player}
080 */
081function Player(x, y, direction) {
082    this.x = x;
083    this.y = y;
084    this.direction = direction;
085    // 武器
086    this.weapon = new Bitmap('knife_hand.png', 319, 320);
087    this.paces = 0;
088}
089 
090/**
091 * 旋转
092 * 
093 * @param angle
094 *            角度
095 */
096Player.prototype.rotate = function(angle) {
097    // 方向
098    this.direction = (this.direction + angle + CIRCLE) % (CIRCLE);
099};
100/**
101 * @param distance
102 *            距离
103 */
104Player.prototype.walk = function(distance, map) {
105    var dx = Math.cos(this.direction) * distance;
106    var dy = Math.sin(this.direction) * distance;
107    if (map.get(this.x + dx, this.y) <= 0)
108        this.x += dx;
109    if (map.get(this.x, this.y + dy) <= 0)
110        this.y += dy;
111    this.paces += distance;
112};
113 
114Player.prototype.update = function(controls, map, seconds) {
115    if (controls.left)
116        this.rotate(-Math.PI * seconds);
117    if (controls.right)
118        this.rotate(Math.PI * seconds);
119    if (controls.forward)
120        this.walk(3 * seconds, map);
121    if (controls.backward)
122        this.walk(-3 * seconds, map);
123};
124 
125function Map(size) {
126    // 地区大小
127    this.size = size;
128    // 地区网格大小
129    this.wallGrid = new Uint8Array(size * size);
130    // 天空画布大小
131    this.skybox = new Bitmap('deathvalley_panorama_sky.jpg', 4000, 1290);
132    // 墙体画布大小
133    this.wallTexture = new Bitmap('wall_texture.jpg', 1024, 1024);
134    this.light = 0;
135}
136 
137Map.prototype.get = function(x, y) {
138    x = Math.floor(x);
139    y = Math.floor(y);
140    if (x < 0 || x > this.size - 1 || y < 0 || y > this.size - 1)
141        return -1;
142    return this.wallGrid[y * this.size + x];
143};
144 
145Map.prototype.randomize = function() {
146    for ( var i = 0; i < this.size * this.size; i++) {
147        this.wallGrid[i] = Math.random() < 0.3 ? 1 : 0;
148    }
149};
150/**
151 * @point
152 * @angle
153 * @range 范围
154 */
155Map.prototype.cast = function(point, angle, range) {
156    var self = this;
157    var sin = Math.sin(angle);
158    var cos = Math.cos(angle);
159    var noWall = {
160        length2 : Infinity
161    };
162 
163    return ray({
164        x : point.x,
165        y : point.y,
166        height : 0,
167        distance : 0
168    });
169 
170    function ray(origin) {
171        var stepX = step(sin, cos, origin.x, origin.y);
172        var stepY = step(cos, sin, origin.y, origin.x, true);
173        var nextStep = stepX.length2 < stepY.length2 ? inspect(stepX, 1, 0,
174                origin.distance, stepX.y) : inspect(stepY, 0, 1,
175                origin.distance, stepY.x);
176 
177        if (nextStep.distance > range)
178            return [ origin ];
179        return [ origin ].concat(ray(nextStep));
180    }
181 
182    function step(rise, run, x, y, inverted) {
183        if (run === 0)
184            return noWall;
185        var dx = run > 0 ? Math.floor(x + 1) - x : Math.ceil(x - 1) - x;
186        var dy = dx * (rise / run);
187        return {
188            x : inverted ? y + dy : x + dx,
189            y : inverted ? x + dx : y + dy,
190            length2 : dx * dx + dy * dy
191        };
192    }
193 
194    function inspect(step, shiftX, shiftY, distance, offset) {
195        var dx = cos < 0 ? shiftX : 0;
196        var dy = sin < 0 ? shiftY : 0;
197        step.height = self.get(step.x - dx, step.y - dy);
198        step.distance = distance + Math.sqrt(step.length2);
199        if (shiftX)
200            step.shading = cos < 0 ? 2 : 0;
201        else
202            step.shading = sin < 0 ? 2 : 1;
203        step.offset = offset - Math.floor(offset);
204        return step;
205    }
206};
207 
208/**
209 * 模拟闪电的时间间隔 this.light 为当前地区的亮度值
210 */
211Map.prototype.update = function(seconds) {
212    return;
213    if (this.light > 0)// 按时间把亮度调低.当为最暗时，用0表示
214        this.light = Math.max(this.light - 10 * seconds, 0);
215    else if (Math.random() * 5 < seconds)
216        this.light = 2;// 按某概率 出现闪电
217};
218 
219function Camera(canvas, resolution, fov) {
220    // 画布
221    this.ctx = canvas.getContext('2d');
222    // 通过style 将 画面强制放大,填充屏幕。画面越精细，速度越慢，反之则画面模糊，但是速度快。默认大小为0.5
223    this.width = canvas.width = window.innerWidth * 0.5;
224    this.height = canvas.height = window.innerHeight * 0.5;
225 
226    this.resolution = resolution;
227    this.spacing = this.width / resolution;
228    // 视角 为固定 0.4*pi
229    this.fov = fov;
230    this.range = MOBILE ? 8 : 14;
231    this.lightRange = 5;
232    //
233    this.scale = (this.width + this.height) / 1200;
234}
235 
236Camera.prototype.render = function(player, map) {
237    // 单纯只是计算出闭合后。图片的相关特征，做背景
238    this.drawSky(player.direction, map.skybox, map.light);
239    // 重点计算
240    // this.drawColumns(player, map);
241    // 玩家武器图，只是 一张晃动的图
242    // this.drawWeapon(player.weapon, player.paces);
243};
244/**
245 * direction 方向 (摄像头[用户角度方向]) sky 天空元素 (闭合状态下[图，首尾相连，形成的一圈为360度，即2*pi=CIRCLE ]。)
246 * ambient 环境 (遮罩层，用来降低光线)
247 */
248Camera.prototype.drawSky = function(direction, sky, ambient) {
249    // 计算出当前背景图的可视范围 this.fov(可视范围)
250    // 不清楚这里的计算原理。
251    var width = this.width * (CIRCLE / this.fov); // 2/0.4
252    // 旋转偏角 图片左边的部分偏移
253    // 宽度 direction 为当前视角弧度
254    var left = -width * direction / CIRCLE;
255    this.ctx.save();
256    this.ctx.drawImage(sky.image, left, 0, width, this.height);
257    if (left < width - this.width) {
258        // console.log(left,direction / CIRCLE);
259        this.ctx.drawImage(sky.image, left + width, 0, width, this.height);
260    }
261    // 一个遮罩层。让背景变亮或暗 ， 即 map.ligth 配合闪电，做地面的渲染处理
262    if (ambient > 0) {
263        this.ctx.fillStyle = '#ffffff';
264        this.ctx.globalAlpha = ambient * 0.1;
265        this.ctx.fillRect(0, this.height * 0.5, this.width, this.height * 0.5);
266    }
267    this.ctx.restore();
268};
269 
270Camera.prototype.drawColumns = function(player, map) {
271    this.ctx.save();
272    for ( var column = 0; column < this.resolution; column++) {
273        var angle = this.fov * (column / this.resolution - 0.5);
274        var ray = map.cast(player, player.direction + angle, this.range);
275        this.drawColumn(column, ray, angle, map);
276    }
277    this.ctx.restore();
278};
279 
280Camera.prototype.drawWeapon = function(weapon, paces) {
281    var bobX = Math.cos(paces * 2) * this.scale * 6;
282    var bobY = Math.sin(paces * 4) * this.scale * 6;
283    var left = this.width * 0.66 + bobX;
284    var top = this.height * 0.6 + bobY;
285    this.ctx.drawImage(weapon.image, left, top, weapon.width * this.scale,
286            weapon.height * this.scale);
287};
288 
289Camera.prototype.drawColumn = function(column, ray, angle, map) {
290    var ctx = this.ctx;
291    var texture = map.wallTexture;
292    var left = Math.floor(column * this.spacing);
293    var width = Math.ceil(this.spacing);
294    var hit = -1;
295 
296    while (++hit < ray.length && ray[hit].height <= 0)
297        ;
298 
299    for ( var s = ray.length - 1; s >= 0; s--) {
300        var step = ray[s];
301        var rainDrops = Math.pow(Math.random(), 3) * s;
302        var rain = (rainDrops > 0) && this.project(0.1, angle, step.distance);
303 
304        if (s === hit) {
305            var textureX = Math.floor(texture.width * step.offset);
306            var wall = this.project(step.height, angle, step.distance);
307 
308            ctx.globalAlpha = 1;
309            ctx.drawImage(texture.image, textureX, 0, 1, texture.height, left,
310                    wall.top, width, wall.height);
311 
312            ctx.fillStyle = '#000000';
313            ctx.globalAlpha = Math.max((step.distance + step.shading)
314                    / this.lightRange - map.light, 0);
315            ctx.fillRect(left, wall.top, width, wall.height);
316        }
317 
318        ctx.fillStyle = '#ffffff';
319        ctx.globalAlpha = 0.15;
320        while (--rainDrops > 0)
321            ctx.fillRect(left, Math.random() * rain.top, 1, rain.height);
322    }
323};
324 
325Camera.prototype.project = function(height, angle, distance) {
326    var z = distance * Math.cos(angle);
327    var wallHeight = this.height * height / z;
328    var bottom = this.height / 2 * (1 + 1 / z);
329    return {
330        top : bottom - wallHeight,
331        height : wallHeight
332    };
333};
334 
335function GameLoop() {
336    this.frame = this.frame.bind(this);
337    this.lastTime = 0;
338    this.callback = function() {
339    };
340}
341 
342GameLoop.prototype.start = function(callback) {
343    this.callback = callback;
344    requestAnimationFrame(this.frame);
345};
346 
347GameLoop.prototype.frame = function(time) {
348    var seconds = (time - this.lastTime) / 1000;
349    this.lastTime = time;
350    if (seconds < 0.2)
351        this.callback(seconds);
352    requestAnimationFrame(this.frame);
353};
354 
355var display = document.getElementById('display');
356var player = new Player(15.3, -1.2, Math.PI * 0.3);
357var map = new Map(32);
358var controls = new Controls();
359var camera = new Camera(display, MOBILE ? 160 : 320, Math.PI * 0.4);
360var loop = new GameLoop();
361 
362map.randomize();
363// 系统自动循环时，自动调整时间 seconds 时间间隔长度 .
364loop.start(function frame(seconds) {
365    map.update(seconds);
366    player.update(controls.states, map, seconds);
367    camera.render(player, map);
368});

武器分析

001//一个圆圈弧度
002//用来识别用户可视弧度 等等，绘制skybox时做图片截取处理.
003var CIRCLE = Math.PI * 2;
004var MOBILE = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i
005        .test(navigator.userAgent)
006function Controls() {
007    this.codes = {
008        37 : 'left',
009        39 : 'right',
010        38 : 'forward',
011        40 : 'backward'
012    };
013    this.states = {
014        'left' : false,
015        'right' : false,
016        'forward' : false,
017        'backward' : false
018    };
019    document.addEventListener('keydown', this.onKey.bind(this, true), false);
020    document.addEventListener('keyup', this.onKey.bind(this, false), false);
021    document.addEventListener('touchstart', this.onTouch.bind(this), false);
022    document.addEventListener('touchmove', this.onTouch.bind(this), false);
023    document.addEventListener('touchend', this.onTouchEnd.bind(this), false);
024}
025 
026Controls.prototype.onTouch = function(e) {
027    var t = e.touches[0];
028    this.onTouchEnd(e);
029    if (t.pageY < window.innerHeight * 0.5)
030        this.onKey(true, {
031            keyCode : 38
032        });
033    else if (t.pageX < window.innerWidth * 0.5)
034        this.onKey(true, {
035            keyCode : 37
036        });
037    else if (t.pageY > window.innerWidth * 0.5)
038        this.onKey(true, {
039            keyCode : 39
040        });
041};
042 
043Controls.prototype.onTouchEnd = function(e) {
044    this.states = {
045        'left' : false,
046        'right' : false,
047        'forward' : false,
048        'backward' : false
049    };
050    // 关闭默认事件
051    e.preventDefault();
052    // 关闭事件传递
053    e.stopPropagation();
054};
055 
056Controls.prototype.onKey = function(val, e) {
057    var state = this.codes[e.keyCode];
058    if (typeof state === 'undefined')
059        return;
060    this.states[state] = val;
061    e.preventDefault && e.preventDefault();
062    e.stopPropagation && e.stopPropagation();
063};
064 
065function Bitmap(src, width, height) {
066    this.image = new Image();
067    this.image.src = src;
068    this.width = width;
069    this.height = height;
070}
071/**
072 * 
073 * @param x
074 *            坐标
075 * @param y
076 *            坐标
077 * @param direction
078 *            方向
079 * @returns {Player}
080 */
081function Player(x, y, direction) {
082    this.x = x;
083    this.y = y;
084    this.direction = direction;
085    // 武器
086    this.weapon = new Bitmap('knife_hand.png', 319, 320);
087    this.paces = 0;
088}
089 
090/**
091 * 旋转
092 * 
093 * @param angle
094 *            角度
095 */
096Player.prototype.rotate = function(angle) {
097    // 方向
098    this.direction = (this.direction + angle + CIRCLE) % (CIRCLE);
099};
100/**
101 * @param distance
102 *            距离
103 */
104Player.prototype.walk = function(distance, map) {
105    var dx = Math.cos(this.direction) * distance;
106    var dy = Math.sin(this.direction) * distance;
107    if (map.get(this.x + dx, this.y) <= 0)
108        this.x += dx;
109    if (map.get(this.x, this.y + dy) <= 0)
110        this.y += dy;
111    //前进的距离。步数
112    //旋转不算
113    this.paces += distance;
114};
115 
116Player.prototype.update = function(controls, map, seconds) {
117    if (controls.left)
118        this.rotate(-Math.PI * seconds);
119    if (controls.right)
120        this.rotate(Math.PI * seconds);
121    if (controls.forward)
122        this.walk(3 * seconds, map);
123    if (controls.backward)
124        this.walk(-3 * seconds, map);
125};
126 
127function Map(size) {
128    // 地区大小
129    this.size = size;
130    // 地区网格大小
131    this.wallGrid = new Uint8Array(size * size);
132    // 天空画布大小
133    this.skybox = new Bitmap('deathvalley_panorama.jpg', 4000, 1290);
134    // 墙体画布大小
135    this.wallTexture = new Bitmap('wall_texture.jpg', 1024, 1024);
136    this.light = 0;
137}
138 
139Map.prototype.get = function(x, y) {
140    x = Math.floor(x);
141    y = Math.floor(y);
142    if (x < 0 || x > this.size - 1 || y < 0 || y > this.size - 1)
143        return -1;
144    return this.wallGrid[y * this.size + x];
145};
146 
147Map.prototype.randomize = function() {
148    for ( var i = 0; i < this.size * this.size; i++) {
149        this.wallGrid[i] = Math.random() < 0.3 ? 1 : 0;
150    }
151};
152/**
153 * @point
154 * @angle
155 * @range 范围
156 */
157Map.prototype.cast = function(point, angle, range) {
158    var self = this;
159    var sin = Math.sin(angle);
160    var cos = Math.cos(angle);
161    var noWall = {
162        length2 : Infinity
163    };
164 
165    return ray({
166        x : point.x,
167        y : point.y,
168        height : 0,
169        distance : 0
170    });
171 
172    function ray(origin) {
173        var stepX = step(sin, cos, origin.x, origin.y);
174        var stepY = step(cos, sin, origin.y, origin.x, true);
175        var nextStep = stepX.length2 < stepY.length2 ? inspect(stepX, 1, 0,
176                origin.distance, stepX.y) : inspect(stepY, 0, 1,
177                origin.distance, stepY.x);
178 
179        if (nextStep.distance > range)
180            return [ origin ];
181        return [ origin ].concat(ray(nextStep));
182    }
183 
184    function step(rise, run, x, y, inverted) {
185        if (run === 0)
186            return noWall;
187        var dx = run > 0 ? Math.floor(x + 1) - x : Math.ceil(x - 1) - x;
188        var dy = dx * (rise / run);
189        return {
190            x : inverted ? y + dy : x + dx,
191            y : inverted ? x + dx : y + dy,
192            length2 : dx * dx + dy * dy
193        };
194    }
195 
196    function inspect(step, shiftX, shiftY, distance, offset) {
197        var dx = cos < 0 ? shiftX : 0;
198        var dy = sin < 0 ? shiftY : 0;
199        step.height = self.get(step.x - dx, step.y - dy);
200        step.distance = distance + Math.sqrt(step.length2);
201        if (shiftX)
202            step.shading = cos < 0 ? 2 : 0;
203        else
204            step.shading = sin < 0 ? 2 : 1;
205        step.offset = offset - Math.floor(offset);
206        return step;
207    }
208};
209 
210/**
211 * 模拟闪电的时间间隔
212 * this.light 为当前地区的亮度值
213 */
214Map.prototype.update = function(seconds) {
215    if (this.light > 0)//按时间把亮度调低.当为最暗时，用0表示 
216        this.light = Math.max(this.light - 10 * seconds, 0);
217    else if (Math.random() * 5 < seconds)
218        this.light = 2;//按某概率 出现闪电
219};
220 
221function Camera(canvas, resolution, fov) {
222    // 画布
223    this.ctx = canvas.getContext('2d');
224    // 通过style 将 画面强制放大,填充屏幕。画面越精细，速度越慢，反之则画面模糊，但是速度快。默认大小为0.5
225    this.width = canvas.width = window.innerWidth * 0.5;
226    this.height = canvas.height = window.innerHeight * 0.5;
227 
228    //分辨率
229    this.resolution = resolution;
230    this.spacing = this.width / resolution;
231    // 视角 为固定 0.4*pi
232    this.fov = fov;
233    this.range = MOBILE ? 8 : 14;
234    this.lightRange = 5;
235    //只用来识别武器的分变率。或者说，大小
236    this.scale = (this.width + this.height) / 1200;
237}
238 
239Camera.prototype.render = function(player, map) {
240    // 单纯只是计算出闭合后。图片的相关特征，做背景
241    this.drawSky(player.direction, map.skybox, map.light);
242    // 重点计算
243    this.drawColumns(player, map);
244    // 玩家武器图，只是 一张晃动的图
245    //旋转时不晃动。晃动的幅度根据当前前进的步数或者后腿时的步数
246    this.drawWeapon(player.weapon, player.paces);
247};
248/**
249 * direction 方向 (摄像头[用户角度方向]) sky 天空元素 (闭合状态下[图，首尾相连，形成的一圈为360度，即2*pi=CIRCLE ]。)
250 * ambient 环境 (遮罩层，用来降低光线)
251 */
252Camera.prototype.drawSky = function(direction, sky, ambient) {
253    // 计算出当前背景图的可视范围 this.fov(可视范围)
254    //不清楚这里的计算原理。
255    var width = this.width * (CIRCLE / this.fov);  // 2/0.4
256    // 旋转偏角 图片左边的部分偏移
257    // 宽度  direction 为当前视角弧度
258    var left = -width * direction / CIRCLE;
259    this.ctx.save();
260    this.ctx.drawImage(sky.image, left, 0, width, this.height);
261    if (left < width - this.width) {
262        //console.log(left,direction / CIRCLE);
263        this.ctx.drawImage(sky.image, left + width, 0, width, this.height);
264    }
265    if (ambient > 0) {
266        this.ctx.fillStyle = '#ffffff';
267        this.ctx.globalAlpha = ambient * 0.1;
268        this.ctx.fillRect(0, this.height * 0.5, this.width, this.height * 0.5);
269    }
270    this.ctx.restore();
271};
272 
273Camera.prototype.drawColumns = function(player, map) {
274    this.ctx.save();
275    for ( var column = 0; column < this.resolution; column++) {
276        var angle = this.fov * (column / this.resolution - 0.5);
277        var ray = map.cast(player, player.direction + angle, this.range);
278        this.drawColumn(column, ray, angle, map);
279    }
280    this.ctx.restore();
281};
282 
283Camera.prototype.drawWeapon = function(weapon, paces) {
284    //利用cos 的正弦和余弦的波动范围为1至-1，加上对应的识别大小做抖动
285    //模拟人走动时，摆动的弧度.曲线.
286    var bobX = Math.cos(paces * 2) * this.scale * 6;
287    var bobY = Math.sin(paces * 4) * this.scale * 6;
288    var left = this.width * 0.66 + bobX;
289    var top = this.height * 0.6 + bobY;
290    this.ctx.drawImage(weapon.image, left, top, weapon.width * this.scale,
291            weapon.height * this.scale);
292};
293 
294Camera.prototype.drawColumn = function(column, ray, angle, map) {
295    var ctx = this.ctx;
296    var texture = map.wallTexture;
297    var left = Math.floor(column * this.spacing);
298    var width = Math.ceil(this.spacing);
299    var hit = -1;
300 
301    while (++hit < ray.length && ray[hit].height <= 0)
302        ;
303 
304    for ( var s = ray.length - 1; s >= 0; s--) {
305        var step = ray[s];
306        var rainDrops = Math.pow(Math.random(), 3) * s;
307        var rain = (rainDrops > 0) && this.project(0.1, angle, step.distance);
308 
309        if (s === hit) {
310            var textureX = Math.floor(texture.width * step.offset);
311            var wall = this.project(step.height, angle, step.distance);
312 
313            ctx.globalAlpha = 1;
314            ctx.drawImage(texture.image, textureX, 0, 1, texture.height, left,
315                    wall.top, width, wall.height);
316 
317            ctx.fillStyle = '#000000';
318            ctx.globalAlpha = Math.max((step.distance + step.shading)
319                    / this.lightRange - map.light, 0);
320            ctx.fillRect(left, wall.top, width, wall.height);
321        }
322 
323        ctx.fillStyle = '#ffffff';
324        ctx.globalAlpha = 0.15;
325        while (--rainDrops > 0)
326            ctx.fillRect(left, Math.random() * rain.top, 1, rain.height);
327    }
328};
329 
330Camera.prototype.project = function(height, angle, distance) {
331    var z = distance * Math.cos(angle);
332    var wallHeight = this.height * height / z;
333    var bottom = this.height / 2 * (1 + 1 / z);
334    return {
335        top : bottom - wallHeight,
336        height : wallHeight
337    };
338};
339 
340function GameLoop() {
341    this.frame = this.frame.bind(this);
342    this.lastTime = 0;
343    this.callback = function() {
344    };
345}
346 
347GameLoop.prototype.start = function(callback) {
348    this.callback = callback;
349    requestAnimationFrame(this.frame);
350};
351 
352GameLoop.prototype.frame = function(time) {
353    var seconds = (time - this.lastTime) / 1000;
354    this.lastTime = time;
355    if (seconds < 0.2)
356        this.callback(seconds);
357    requestAnimationFrame(this.frame);
358};
359 
360var display = document.getElementById('display');
361var player = new Player(15.3, -1.2, Math.PI * 0.3);
362var map = new Map(32);
363var controls = new Controls();
364var camera = new Camera(display, MOBILE ? 160 : 320, Math.PI * 0.4);
365var loop = new GameLoop();
366 
367map.randomize();
368//系统自动循环时，自动调整时间 seconds 时间间隔长度 .
369loop.start(function frame(seconds) {
370    map.update(seconds);
371    player.update(controls.states, map, seconds);
372    camera.render(player, map);
373});

分类：生活

【转】265行代码实现第一人称游戏引擎 + 个人详细注解

夏新N828 解决安装谷歌市场(这篇是玩滴~)

我甲沟炎的日子 G( ￣(工)￣ )P