Sim Posted March 17 Share Posted March 17 ;(function() { fps = 0 requestTime = 0 canvas = document.getElementById('gameCanvas') ctx = canvas.getContext('2d') gridWidth = 10 gridHeight = 10 xOffset = 0 yOffset = 0 grid = createGrid(gridWidth, gridHeight) initialize() window.addEventListener('resize', resizeCanvas) canvas.addEventListener('click', canvasClick ) window.requestAnimationFrame(gameLoop) gameLoop() //gameLoop() function gameLoop() { drawGrid() //setTimeout(gameLoop, 1000) window.requestAnimationFrame(gameLoop) } function drawX() { for(x = 0; x < gridWidth - 1; x++) { for(y = 0; y < gridHeight; y++) { if(grid[x][y] == "X") { xOffset = window.innerWidth / gridWidth xPOS = x * xOffset yOffset = window.innerHeight / gridHeight yPOS = y * yOffset ctx.moveTo(xPOS, yPOS) ctx.moveTo(xPOS + xOffset, yPOS + yOffset) ctx.moveTo(xPOS + xPOS, yPOS) ctx.moveTo(xPOS, yPOS + yOffset) ctx.stroke() } } } } function drawGrid() { ctx.save() ctx.strokeStyle = 'black' ctx.lineWidth = .05 for(x = 1; x < gridWidth; x++) { for(y = 1; y < gridHeight; y++) { ctx.moveTo(x * xOffset, 0) ctx.lineTo(x * xOffset, window.innerHeight) ctx.stroke() ctx.moveTo(0, y * yOffset) ctx.lineTo(window.innerWidth, y * yOffset) ctx.stroke() if(grid[x-1][y-1] == "X") { ctx.strokeStyle = 'blue' ctx.lineWidth = .75 //alert(grid[x-1][y-1] + x + ';' + y) xPOS = (x -1) * xOffset yPOS = (y - 1) * yOffset ctx.moveTo(xPOS, yPOS) ctx.lineTo(xPOS + xOffset, yPOS + yOffset) ctx.stroke() ctx.moveTo(xPOS + xOffset, yPOS) ctx.lineTo(xPOS, yPOS + yOffset) ctx.stroke() ctx.strokeStyle = 'black' ctx.lineWidth = .05 } } } ctx.restore() } function checkDiagnolBackwards(rows, columns, piece, gWidth, gHeight, count) { } function checkDiagnolForward(rows, columns, piece, gWidth, gHeight, count) { } function checkColumns(rows, columns, piece, gWidth, gHeight, count) { } function checkRows(rows, columns, piece, gWidth, gHeight, count) { } function createGrid(gWidth, gHeight) { g = new Array() for(i = 0; i < gWidth; i++) { g[i] = new Array(gHeight).fill(3) } return g } function initialize() { resizeCanvas() } function redrawBoarder() { ctx.strokeStyle = 'blue' ctx.lineWidth = '5' ctx.strokeRect(0, 0, window.innerWidth, window.innerHeight) } function resizeCanvas() { canvas.width = window.innerWidth canvas.height = window.innerHeight xOffset = window.innerWidth / gridWidth yOffset = window.innerHeight / gridHeight //redrawBoarder(); } function canvasClick(e) { xClick = window.innerWidth / gridWidth xClick = Math.ceil(e.pageX / xClick) yClick = window.innerHeight / gridHeight yClick = Math.ceil(e.pageY / yClick) grid[xClick-1][yClick-1] = "X" } })(); So I been playing around with a little JS project just took get my mind back into full coding mind. The problem is, my game loop is ruining extremity slow. Ex: when a grid is CLICKED it takes second to draw the new X. Does anyone have any ideas? Quote Link to comment Share on other sites More sharing options...
Sim Posted March 19 Author Share Posted March 19 ;(function() { fps = 0 requestTime = 0 canvas = document.getElementById('gameCanvas') ctx = canvas.getContext('2d') gridWidth = 10 gridHeight = 10 xOffset = 0 yOffset = 0 grid = createGrid(gridWidth, gridHeight) initialize() window.requestAnimationFrame(gameLoop) canvas.addEventListener('click', canvasClick ) resizeCanvas() function gameLoop() { // ctx.clearRect(0,0,gridWidth, gridHeight) // ctx.save() drawGrid() drawPieces() // ctx.restore() //setTimeout(gameLoop, 1000) window.requestAnimationFrame(gameLoop) } function drawPieces() { for(x = 0; x < gridWidth - 1; x++) { for(y = 0; y < gridHeight - 1; y++) { if(grid[x][y] == "X") { drawX(x, y) } } } } function drawX(x, y) { yPOS = y * yOffset xPOS = x * xOffset ctx.moveTo(xPOS, yPOS) ctx.lineTo(xPOS + xOffset, yPOS + yOffset) ctx.stroke() ctx.moveTo(xPOS + xOffset, yPOS) ctx.lineTo(xPOS, yPOS + yOffset) ctx.stroke() } function drawGrid() { ctx.strokeStyle = 'black' ctx.lineWidth = .05 for(i = 0; i < gridWidth; i++) { ctx.moveTo(i * xOffset, 0) ctx.lineTo(i * xOffset, window.innerHeight) ctx.stroke() ctx.moveTo(0, i * yOffset) ctx.lineTo(window.innerWidth, i * yOffset) ctx.stroke() } } function checkDiagnolBackwards(rows, columns, piece, gWidth, gHeight, count) { } function checkDiagnolForward(rows, columns, piece, gWidth, gHeight, count) { } function checkColumns(rows, columns, piece, gWidth, gHeight, count) { } function checkRows(rows, columns, piece, gWidth, gHeight, count) { } function createGrid(gWidth, gHeight) { g = new Array() for(i = 0; i < gWidth; i++) { g[i] = new Array(gHeight).fill(3) } return g } function initialize() { resizeCanvas() } function redrawBoarder() { ctx.strokeStyle = 'blue' ctx.lineWidth = '5' ctx.strokeRect(0, 0, window.innerWidth, window.innerHeight) } function resizeCanvas() { canvas.width = window.innerWidth canvas.height = window.innerHeight xOffset = window.innerWidth / gridWidth yOffset = window.innerHeight / gridHeight //redrawBoarder(); } function canvasClick(e) { xClick = Math.ceil(e.pageX / xOffset) yClick = Math.ceil(e.pageY / yOffset) grid[xClick-1][yClick-1] = "X" } })(); I found my problem. I was running to manyy calculations that wasn't needed at the time. That's from taking a break does to people after awhile. Quote Link to comment Share on other sites More sharing options...
Dave Posted March 21 Share Posted March 21 Sounds like you found the optimizations you needed, always be mindful of what operations you complete inside of for or foreach loops. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.