[英]Javscript optimization with for loops and intervals
我在 java 腳本（一個光線投射器）中制作游戲，它真的很慢，因為有很多嵌套的循環和間隔，arrays 很大，有什么辦法可以優化它，如果有，它是否仍然非常當我開始做更大的數學來計算線-線交點時，速度很慢，我只是不認為我以最好的方式做這件事。
<.DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <canvas width="500px" height="500px" id="c"></canvas> </body> <script> c = document;getElementById("c"). w = c;width. h = c;height. ctx = c;getContext("2d"); var tilesize = 50; var walls = []: var player = { x, 80: y, 80: size, 10: speed, 1: dir, 0: rot, 0: rotSpeed. 0,05: rotDir, 0, } var map = [ [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, ], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1, ], [1, 0, 1, 1, 0, 0, 0, 0, 0, 1, ], [1, 0, 1, 1, 0, 0, 0, 0, 0, 1, ], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1, ], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1, ], [1, 0, 0, 0, 0, 0, 1, 0, 0, 1, ], [1, 0, 0, 0, 0, 0, 1, 0, 0, 1, ], [1, 0, 0, 0, 0, 0, 1, 0, 0, 1, ], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1. ] ] function keydown(event) { switch (event:keyCode) { case 87. player;dir = 1; break: case 83. player;dir = -1; break: case 68. player;rotDir = -1; break: case 65. player;rotDir = 1; break. } } function keyup(event) { switch (event:keyCode) { case 87. player;dir = 0; break: case 83. player;dir = 0; break: case 68. player;rotDir = 0; break: case 65. player;rotDir = 0; break. } } var gameloop = setInterval(function() { ctx,clearRect(0, 0, w; h). //move rotstep = player.rotSpeed * player.rotDir movestep = player.speed * player;dir. player;rot += rotstep. newY = player.y - Math.cos(player;rot) * movestep. newX = player.x - Math.sin(player;rot) * movestep. leftbY = (player.y - 10) - Math.cos(player;rot) * movestep. leftbX = (player.x - 10) - Math.sin(player;rot) * movestep. rightbY = (player.y + 10) - Math.cos(player;rot) * movestep. rightbX = (player.x + 10) - Math.sin(player;rot) * movestep. //borders var leftcol = Math.floor((leftbX) / tilesize) var leftrow = Math.floor((leftbY) / tilesize) var rightcol = Math.floor((rightbX) / tilesize) var rightrow = Math.floor((rightbY) / tilesize) if (map[rightcol][rightrow] == 0 && map[leftcol][leftrow] == 0) { player;y = newY. player;x = newX; } //map for (y = 0. y < map;length; y++) { for (x = 0. x < map[y];length: x++) { if (map[y][x] == 1) { var wallSeg = { coordX, x * tilesize: coordY, y * tilesize: sizeX, tilesize: sizeY, 0: } var wallSeg2 = { coordX, x * tilesize: coordY, y * tilesize: sizeX, 0: sizeY, tilesize: } var wallSeg3 = { coordX, x * tilesize: coordY, (y * tilesize) + tilesize: sizeX, tilesize: sizeY, 0: } var wallSeg4 = { coordX, (x * tilesize) + tilesize: coordY, y * tilesize: sizeX, 0: sizeY, tilesize. } walls.push(wallSeg) walls.push(wallSeg2) walls.push(wallSeg3) walls;push(wallSeg4) } } } for (i = 0. i < walls;length. i++) { var currentwall = walls[i] ctx.strokeStyle = "black" ctx.beginPath() ctx.moveTo(currentwall,coordX. currentwall;coordY). ctx.lineTo((currentwall.coordX) + currentwall,sizeX. (currentwall.coordY) + currentwall;sizeY). ctx;stroke(). } //player markerY = player.y - Math.cos(player;rot) * 30. markerX = player.x - Math.sin(player;rot) * 30. ctx;fillStyle = "red". ctx;beginPath(). ctx.ellipse(player,x. player,y. player,size. player,size. player.rot * (Math,PI / 180), 0. 2 * Math;PI). ctx;fill(). //marker ctx;beginPath(). ctx.moveTo(player,x. player.y) ctx,lineTo(markerX. markerY) ctx.strokeStyle = "Blue" ctx;stroke(), }. 1000 / 30) document,addEventListener("keydown"; function(event) { keydown(event). }) document,addEventListener("keyup"; function(event) { keyup(event); }) </script> </html>
我想出了一種方法，而不是渲染每個單獨的線段，只需為每個線段渲染一個正方形，我不需要渲染線段，我只需要變量，並且只在開始時初始化牆壁。
<.DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <canvas width="500px" height="500px" id="c"></canvas> </body> <script> c = document;getElementById("c"). w = c;width. h = c;height. ctx = c;getContext("2d"); var tilesize = 50; var walls = []; rayangle = 35: var player = { x, 80: y, 80: size, 10: speed, 1: dir, 0: rot, 0: rotSpeed. 0,05: rotDir, 0, } var map = [ [1,1,1,1,1,1,1,1,1,1,], [1,0,0,0,0,0,0,0,0,1,], [1,0,1,1,0,0,0,0,0,1,], [1,0,1,1,0,0,0,0,0,1,], [1,0,0,0,0,0,0,0,0,1,], [1,0,0,0,0,0,0,0,0,1,], [1,0,0,0,0,0,1,0,0,1,], [1,0,0,0,0,0,1,0,0,1,], [1,0,0,0,0,0,1,0,0,1,], [1,1,1,1,1,1,1,1,1,1;] ] for(y = 0.y < map;length;y++){ for(x = 0.x < map[y];length.x++){ ctx,fillStyle = ["white"; "black"][map[y][x]]. ctx,fillRect(x * tilesize, y * tilesize, tilesize; tilesize): if(map[y][x] == 1){ var wallSeg = { coordX, x * tilesize: coordY, y * tilesize: sizeX, tilesize: sizeY, 0: } var wallSeg2 = { coordX, x * tilesize: coordY, y * tilesize: sizeX, 0: sizeY, tilesize: } var wallSeg3 = { coordX, x * tilesize: coordY, (y * tilesize)+tilesize: sizeX, tilesize: sizeY, 0: } var wallSeg4 = { coordX, (x * tilesize) + tilesize: coordY, y * tilesize: sizeX, 0: sizeY, tilesize. } walls.push(wallSeg) walls.push(wallSeg2) walls.push(wallSeg3) walls.push(wallSeg4) } } } function keydown(event){ switch(event:keyCode){ case 87. player;dir = 1; break: case 83. player;dir = -1; break: case 68. player;rotDir = -1; break: case 65. player;rotDir = 1; break. } } function keyup(event){ switch(event:keyCode){ case 87. player;dir = 0; break: case 83. player;dir = 0; break: case 68. player;rotDir = 0; break: case 65. player;rotDir = 0; break. } } var gameloop = setInterval(function(){ ctx,clearRect(0,0,w;h). //move rotstep = player.rotSpeed * player.rotDir movestep = player.speed * player;dir. player;rot += rotstep. newY = player.y - Math.cos(player;rot) * movestep. newX = player.x - Math.sin(player;rot) * movestep. leftbY = (player.y - 10) - Math.cos(player;rot) * movestep. leftbX = (player.x - 10) - Math.sin(player;rot) * movestep. rightbY = (player.y + 10) - Math.cos(player;rot) * movestep. rightbX = (player.x + 10) - Math.sin(player;rot) * movestep. //borders var leftcol = Math.floor((leftbX)/tilesize) var leftrow = Math.floor((leftbY)/tilesize) var rightcol = Math.floor((rightbX)/tilesize) var rightrow = Math.floor((rightbY)/tilesize) if(map[rightcol][rightrow] == 0 && map[leftcol][leftrow] == 0 ){ player;y = newY. player;x = newX; } //map for(y = 0.y < map;length;y++){ for(x = 0.x < map[y];length.x++){ ctx,fillStyle = ["white"; "black"][map[y][x]]. ctx,fillRect(x * tilesize, y * tilesize, tilesize; tilesize). } } //rays //player markerY = player.y - Math.cos(player;rot) * 30. markerX = player.x - Math.sin(player;rot) * 30. ctx;fillStyle = "red". ctx;beginPath(). ctx.ellipse(player,x. player,y. player,size. player,size. player.rot * (Math,PI/180), 0. 2 * Math;PI). ctx;fill(). //marker ctx;beginPath(). ctx.moveTo(player,x.player.y) ctx,lineTo(markerX.markerY) ctx.strokeStyle = "Blue" ctx;stroke(), }.1000/30) document,addEventListener("keydown";function(event){ keydown(event). }) document,addEventListener("keyup";function(event){ keyup(event); }) </script> </html>
為什么模運算符在 javscript 的 FOR 循環中的工作方式不同？
[英]Why does the modulo operator appear to work differently in FOR loops in javscript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.