Auf Thema antworten 2026

Beitrag

<blockquote data-quote="keul3" data-source="post: 2511226" data-attributes="member: 53523">Hi,ich habe jetzt endlich mein erstes JS geschrieben. Da ich mich erstmal mit der Sprache vertraut machen wollte, ist etwas kleineres geworden, eine Adaption von meiner <a href="https://www.psd-tutorials.de/forum/threads/keules-flash-ecke.134309/page-4#post-2489676" target="_blank">FlashVersion</a>Es ist soweit spielbar, aber Luxusfunktionen wie Schwierigkeitsgrad oder ein HUD fehlen. Auch ist das ganze nicht wirklich fancy<a href="http://keul3.com/minesweeper.html" target="_blank">zum Spiel</a>Da das für mich alles noch neu ist, hätte ich eine Bitte und zwar: könntet ihr bitte den Code einmal überfliegen und mir grundlegende Fehler (Peformancefresser) aufzeigen?<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":)" title="Smile&nbsp; &nbsp; :)" loading="lazy" data-shortname=":)" />Auf anonyme Funktionen habe ich komplett verzichtet. Ich habe jede Variable innerhalb von Funktionen und Schleifen declariert, was afaik nicht unbedingt nötig ist, aber da ich mit einer rekursiven Funktion inkl. nicht deklarierter Variabel ziemlich aufs Maul geflogen bin, bin ich danach auf Nummer sicher gegangen<img src="/styles/default/xenforo/smilies/biggrin.gif"&nbsp; class="smilie" loading="lazy" alt=":D" title="Big Grin&nbsp; &nbsp; :D" data-shortname=":D" />das JS hab ich erstmal als ganzes gelassen, würde es aber normalerweise aufteilen, so das z.B. alle drawFunktionen ausgelagert werden.Danke schonmal für eure Hilfe<img src="/styles/default/xenforo/smilies/zwinker.gif"&nbsp; class="smilie" loading="lazy" alt=";)" title="Wink&nbsp; &nbsp; ;)" data-shortname=";)" />[code=JavaScript]// JavaScript Document//Minesweepervar xCount = 30;var yCount = 15;var cellSize = 30;var mineRatio = .2;var canvasRect;var canvas;var cells;var oldCell;var markerKeyDown;var gameOver;var cellsToClear;function init(){&nbsp; &nbsp; createCanvas();&nbsp; &nbsp; window.addEventListener(&quot;keydown&quot;, keyDownHandler);&nbsp; &nbsp; window.addEventListener(&quot;keyup&quot;, keyUpHandler);&nbsp; &nbsp; window.addEventListener(&quot;resize&quot;, resizeHandler);&nbsp; &nbsp; createField()}function createField(){&nbsp; &nbsp; markerKeyDown = false;&nbsp; &nbsp; gameOver = false;&nbsp; &nbsp; cells = createCells(xCount, yCount); //[x][y]&nbsp; &nbsp; if (mineRatio &gt; 1) mineRatio = 1;&nbsp; &nbsp; if (mineRatio &lt; 0) mineRatio = 0;&nbsp; &nbsp; var cellCount = xCount * yCount;&nbsp; &nbsp; var mineCount = Math.ceil(cellCount * mineRatio);&nbsp; &nbsp; cellsToClear = cellCount - mineCount;&nbsp; &nbsp; var mines = getMines(cellCount, mineCount);&nbsp; &nbsp; assignMinesToCells(mines, cells);&nbsp; &nbsp; countSurroundingMines(cells);&nbsp; &nbsp; for (var i = 0; i &lt; cells.length; i++)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; for (var j = 0; j &lt; cells[i].length; j++) drawCover(cells[i][j]);&nbsp; &nbsp; }}function createCells(xC, yC){&nbsp; &nbsp; var cells = new Array();&nbsp; &nbsp; for (var i = 0; i &lt; xCount; i++)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; var temp = new Array();&nbsp; &nbsp; &nbsp; &nbsp; for (j = 0; j &lt; yCount; j++)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var cell = new Object();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cell.idX = i;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cell.idY = j;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cell.x = i * cellSize;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cell.y = j * cellSize;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cell.revealed = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cell.revealedSurroundings = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cell.marked = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; temp.push(cell);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; cells.push(temp);&nbsp; &nbsp; }&nbsp; &nbsp; return cells;}function getMines(cellCount, mineCount){&nbsp; &nbsp; var numbers = new Array();&nbsp; &nbsp; var mines = new Array();&nbsp; &nbsp; for (var i = 0; i &lt; cellCount; i++)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; numbers.push(i);&nbsp; &nbsp; &nbsp; &nbsp; mines.push(false);&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; for (var j = 0; j &lt; mineCount; j++)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; var rn = Math.floor( Math.random() * numbers.length ); //randomNumber&nbsp; &nbsp; &nbsp; &nbsp; mines[ numbers[rn] ] = true;&nbsp; &nbsp; &nbsp; &nbsp; numbers.splice(rn, 1);&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return mines;}function assignMinesToCells(m, c){&nbsp; &nbsp; var a = 0;&nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i &lt; c.length; i++)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; for (var j = 0; j &lt; c[i].length; j++)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c[i][j].mine = m[a];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; a++;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}function countSurroundingMines(c){&nbsp; &nbsp; for (var i = 0; i &lt; c.length; i++)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; for (var j = 0; j &lt; c[i].length; j++)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var a = 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var sCells =&nbsp; &nbsp;&nbsp; [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [i - 1, j - 1], //top-left&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [i&nbsp; &nbsp; , j - 1], //top&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [i + 1, j - 1], //top-right&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [i - 1, j&nbsp; &nbsp; ], //left&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [i + 1, j&nbsp; &nbsp; ], //right&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [i - 1, j + 1], //bottom-left&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [i&nbsp; &nbsp; , j + 1], //bottom&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [i + 1, j + 1]&nbsp; //bottom-right&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (var k = 0; k &lt; sCells.length; k++)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ( hasMine(sCells[k][0], sCells[k][1], c) ) a++;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c[i][j].minesAround = a;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}function hasMine(x, y, c){&nbsp; &nbsp; var b = false;&nbsp; &nbsp; &nbsp; &nbsp; if (x &gt;= 0 &amp;&amp; x &lt; xCount &amp;&amp; y &gt;= 0 &amp;&amp; y &lt; yCount) b = c[x][y].mine;&nbsp; &nbsp; &nbsp; &nbsp; return b;}function createCanvas(){&nbsp; &nbsp; var w = xCount * cellSize;&nbsp; &nbsp; var h = yCount * cellSize;&nbsp; &nbsp; canvas = document.createElement(&quot;CANVAS&quot;);&nbsp; &nbsp; var attWidth = document.createAttribute(&quot;width&quot;);&nbsp; &nbsp; attWidth.value = w.toString();&nbsp; &nbsp; canvas.setAttributeNode(attWidth);&nbsp; &nbsp; var attHeight = document.createAttribute(&quot;height&quot;);&nbsp; &nbsp; attHeight.value = h.toString();&nbsp; &nbsp; canvas.setAttributeNode(attHeight);&nbsp; &nbsp; document.body.appendChild(canvas);&nbsp; &nbsp; canvas.addEventListener(&quot;click&quot;, clickHandler);&nbsp; &nbsp; canvas.addEventListener(&quot;mousemove&quot;, mouseMoveHandler);&nbsp; &nbsp; elementToCenterOfWindow(canvas);&nbsp; &nbsp; canvasRect = canvas.getBoundingClientRect();}function elementToCenterOfWindow(element){&nbsp; &nbsp; element.style.position = &quot;absolute&quot;&nbsp; &nbsp; element.style.left = (window.innerWidth - element.width)/2 + &quot;px&quot;;&nbsp; &nbsp; element.style.top = (window.innerHeight - element.height)/2 + &quot;px&quot;;}function drawCover(cell){&nbsp; &nbsp; var lineWidth = 2;&nbsp; &nbsp; var ctx = canvas.getContext(&quot;2d&quot;);&nbsp; &nbsp; ctx.beginPath();&nbsp; &nbsp; ctx.rect(cell.x + lineWidth/2, cell.y + lineWidth/2, cellSize - lineWidth, cellSize - lineWidth);&nbsp; &nbsp; ctx.fillStyle = &quot;#009900&quot;;&nbsp; &nbsp; ctx.fill();&nbsp; &nbsp; ctx.lineWidth = lineWidth;&nbsp; &nbsp; ctx.strokeStyle = &quot;#006600&quot;;&nbsp; &nbsp; ctx.stroke();&nbsp; &nbsp; ctx.closePath();}function drawCoverHighlight(cell){&nbsp; &nbsp; var lineWidth = 2;&nbsp; &nbsp; var ctx = canvas.getContext(&quot;2d&quot;);&nbsp; &nbsp; ctx.beginPath();&nbsp; &nbsp; ctx.rect(cell.x + lineWidth/2, cell.y + lineWidth/2, cellSize - lineWidth, cellSize - lineWidth);&nbsp; &nbsp; ctx.fillStyle = &quot;#00bb00&quot;;&nbsp; &nbsp; ctx.fill();&nbsp; &nbsp; ctx.lineWidth = lineWidth;&nbsp; &nbsp; ctx.strokeStyle = &quot;#009900&quot;;&nbsp; &nbsp; ctx.stroke();&nbsp; &nbsp; ctx.closePath();}function drawCell(cell){&nbsp; &nbsp; var lineWidth = 2;&nbsp; &nbsp; var ctx = canvas.getContext(&quot;2d&quot;);&nbsp; &nbsp; ctx.beginPath();&nbsp; &nbsp; ctx.rect(cell.x + lineWidth/2, cell.y + lineWidth/2, cellSize - lineWidth, cellSize - lineWidth);&nbsp; &nbsp; ctx.fillStyle = &quot;#ffff00&quot;;&nbsp; &nbsp; ctx.fill();&nbsp; &nbsp; ctx.lineWidth = lineWidth;&nbsp; &nbsp; ctx.strokeStyle = &quot;#aaaa00&quot;;&nbsp; &nbsp; ctx.stroke();&nbsp; &nbsp; ctx.closePath();&nbsp; &nbsp; if (cell.mine)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; var xCenter = cell.x + cellSize/2;&nbsp; &nbsp; &nbsp; &nbsp; var yCenter = cell.y + cellSize/2;&nbsp; &nbsp; &nbsp; &nbsp; var radius = cellSize/2 * .6;&nbsp; &nbsp; &nbsp; &nbsp; ctx.beginPath();&nbsp; &nbsp; &nbsp; &nbsp; ctx.arc(xCenter, yCenter, radius, 0, 2 * Math.PI, false);&nbsp; &nbsp; &nbsp; &nbsp; ctx.fillStyle = &quot;#000000&quot;;&nbsp; &nbsp; &nbsp; &nbsp; ctx.fill();&nbsp; &nbsp; &nbsp; &nbsp; ctx.closePath();&nbsp; &nbsp; }&nbsp; &nbsp; else if (cell.minesAround)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; var fontSize = cellSize * .4;&nbsp; &nbsp; &nbsp; &nbsp; var text = cell.minesAround.toString();&nbsp; &nbsp; &nbsp; &nbsp; ctx.font = fontSize.toString() + &quot;pt Calibri&quot;;&nbsp; &nbsp; &nbsp; &nbsp; ctx.textAlign = &quot;center&quot;;&nbsp; &nbsp; &nbsp; &nbsp; ctx.fillStyle = &quot;#000000&quot;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; textWidth = ctx.measureText(text).width;&nbsp; &nbsp; &nbsp; &nbsp; var d = (cellSize - fontSize)/2;&nbsp; &nbsp; &nbsp; &nbsp; var x = cell.x + cellSize/2;&nbsp; &nbsp; &nbsp; &nbsp; var y = cell.y + cellSize - d;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.fillText(text, x, y);&nbsp; &nbsp; }}function drawMarker(cell){&nbsp; &nbsp; var ctx = canvas.getContext(&quot;2d&quot;);&nbsp; &nbsp; var xCenter = cell.x + cellSize/2;&nbsp; &nbsp; var yCenter = cell.y + cellSize/2;&nbsp; &nbsp; var radius = cellSize/2 * .8;&nbsp; &nbsp; ctx.beginPath();&nbsp; &nbsp; ctx.arc(xCenter, yCenter, radius, 0, 2 * Math.PI, false);&nbsp; &nbsp; ctx.fillStyle = &quot;#ff0000&quot;;&nbsp; &nbsp; ctx.fill();&nbsp; &nbsp; ctx.closePath();}function clickHandler(event){&nbsp; &nbsp; if (!gameOver)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; var cell = getCellByMouse(event);&nbsp; &nbsp; &nbsp; &nbsp; if (!cell.revealed)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (markerKeyDown) markCell(cell)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else revealCell(cell);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; else restart();}function markCell(cell){&nbsp; &nbsp; if (cell.marked)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; drawCover(cell);&nbsp; &nbsp; &nbsp; &nbsp; cell.marked = false;&nbsp; &nbsp; }&nbsp; &nbsp; else&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; drawCover(cell);&nbsp; &nbsp; &nbsp; &nbsp; drawMarker(cell);&nbsp; &nbsp; &nbsp; &nbsp; cell.marked = true;&nbsp; &nbsp; }}function getCellByMouse(e){&nbsp; &nbsp; var x = e.clientX - canvasRect.left;&nbsp; &nbsp; var y = e.clientY - canvasRect.top;&nbsp; &nbsp; x = Math.floor(x / cellSize);&nbsp; &nbsp; y = Math.floor(y / cellSize);&nbsp; &nbsp; var cell = cells[x][y];&nbsp; &nbsp; return cell;}function revealCell(cell){&nbsp; &nbsp; if (!cell.marked)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; cell.revealed = true;&nbsp; &nbsp; &nbsp; &nbsp; drawCell(cell);&nbsp; &nbsp; &nbsp; &nbsp; cellsToClear --;&nbsp; &nbsp; &nbsp; &nbsp; if (!cellsToClear) won();&nbsp; &nbsp; &nbsp; &nbsp; if (!cell.minesAround) revealZeroSurroundings( cell );&nbsp; &nbsp; &nbsp; &nbsp; if (cell.mine) boom();&nbsp; &nbsp; }}function revealZeroSurroundings(c){&nbsp; &nbsp; var sCells =&nbsp; &nbsp;&nbsp; [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [c.idX - 1, c.idY - 1], //top-left&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [c.idX&nbsp; &nbsp; , c.idY - 1], //top&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [c.idX + 1, c.idY - 1], //top-right&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [c.idX - 1, c.idY&nbsp; &nbsp; ], //left&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [c.idX + 1, c.idY&nbsp; &nbsp; ], //right&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [c.idX - 1, c.idY + 1], //bottom-left&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [c.idX&nbsp; &nbsp; , c.idY + 1], //bottom&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [c.idX + 1, c.idY + 1]&nbsp; //bottom-right&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ];&nbsp; &nbsp; for (var i = 0; i &lt; sCells.length; i++)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; var x = sCells[i][0];&nbsp; &nbsp; &nbsp; &nbsp; var y = sCells[i][1];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (x &gt;= 0 &amp;&amp; x &lt; xCount &amp;&amp; y &gt;= 0 &amp;&amp; y &lt; yCount)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (!cells[x][y].revealed) revealCell(cells[x][y])&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (!cells[x][y].minesAround &amp;&amp; !cells[x][y].revealedSurroundings)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cells[x][y].revealedSurroundings = true;//um einen Stapelüberlauf zu verhindern&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; revealZeroSurroundings( cells[x][y] )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}function mouseMoveHandler(event){&nbsp; &nbsp; if (!gameOver)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; var cell = getCellByMouse(event);&nbsp; &nbsp; &nbsp; &nbsp; if (cell)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (!cell.revealed)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (cell != oldCell)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (oldCell)//am Anfang ist oldCell null&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (!oldCell.revealed &amp;&amp; !oldCell.marked) drawCover(oldCell);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (!cell.marked) drawCoverHighlight(cell);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; oldCell = cell;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}function boom(){&nbsp; &nbsp; gameOver = true;&nbsp; &nbsp; drawBanner(&quot;BOOOOOOOM&quot;);}function won(){&nbsp; &nbsp; gameOver = true;&nbsp; &nbsp; drawBanner(&quot;TOTAL CLEARANCE&quot;);}function drawBanner(txt){&nbsp; &nbsp; var ctx = canvas.getContext(&quot;2d&quot;);&nbsp; &nbsp; var bannerWidth = .9;&nbsp; &nbsp; var bannerHeight = .6;&nbsp; &nbsp; var w = canvas.width * bannerWidth;&nbsp; &nbsp; var h = canvas.height * bannerHeight;&nbsp; &nbsp; ctx.beginPath();&nbsp; &nbsp; ctx.rect( (canvas.width - w)/2, (canvas.height - h)/2, w, h );&nbsp; &nbsp; ctx.fillStyle = &quot;#ffffff&quot;;&nbsp; &nbsp; ctx.fill();&nbsp; &nbsp; ctx.lineWidth = 2;&nbsp; &nbsp; ctx.strokeStyle = &quot;#550000&quot;;&nbsp; &nbsp; ctx.stroke();&nbsp; &nbsp; ctx.closePath();&nbsp; &nbsp; var fontSize = h * .2;&nbsp; &nbsp; var text = txt;&nbsp; &nbsp; ctx.font = fontSize.toString() + &quot;pt Calibri&quot;;&nbsp; &nbsp; ctx.textAlign = &quot;center&quot;;&nbsp; &nbsp; var textWidth = ctx.measureText(text).width;&nbsp; &nbsp; if (textWidth &gt; w) //textwidth reduzieren auf bannerwidth&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; var ratio = w/textWidth;&nbsp; &nbsp; &nbsp; &nbsp; fontSize *= ratio;&nbsp; &nbsp; &nbsp; &nbsp; ctx.font = fontSize.toString() + &quot;pt Calibri&quot;;&nbsp; &nbsp; }&nbsp; &nbsp; var textHeight = fontSize;&nbsp; &nbsp; ctx.fillStyle = &quot;#550000&quot;;&nbsp; &nbsp; var d = (cellSize - fontSize)/2;&nbsp; &nbsp; var x = canvas.width/2;&nbsp; &nbsp; var y = canvas.height/2 + fontSize/2;&nbsp; &nbsp; ctx.fillText(text, x, y);&nbsp; &nbsp; fontSize *= .5;&nbsp; &nbsp; text = &quot;click on canvas to restart&quot;;&nbsp; &nbsp; ctx.font = fontSize.toString() + &quot;pt Calibri&quot;;&nbsp; &nbsp; ctx.textAlign = &quot;center&quot;;&nbsp; &nbsp; ctx.fillStyle = &quot;#550000&quot;;&nbsp; &nbsp; x = canvas.width/2;&nbsp; &nbsp; y = canvas.height/2 + fontSize/2 + textHeight;&nbsp; &nbsp; ctx.fillText(text, x, y);}function restart(){&nbsp; &nbsp; canvas.getContext(&quot;2d&quot;).clearRect(0, 0, canvas.width, canvas.height);&nbsp; &nbsp; createField();}function keyDownHandler(event) { if (event.ctrlKey) markerKeyDown = true; }function keyUpHandler(event) { if (!event.ctrlKey &amp;&amp; markerKeyDown) markerKeyDown = false; }function resizeHandler(event) { elementToCenterOfWindow(canvas); canvasRect = canvas.getBoundingClientRect();}[/code]</blockquote>

[QUOTE="keul3, post: 2511226, member: 53523"] Hi, ich habe jetzt endlich mein erstes JS geschrieben. Da ich mich erstmal mit der Sprache vertraut machen wollte, ist etwas kleineres geworden, eine Adaption von meiner [URL='https://www.psd-tutorials.de/forum/threads/keules-flash-ecke.134309/page-4#post-2489676'][U]FlashVersion[/U][/URL] Es ist soweit spielbar, aber Luxusfunktionen wie Schwierigkeitsgrad oder ein HUD fehlen. Auch ist das ganze nicht wirklich fancy [URL='http://keul3.com/minesweeper.html'][U]zum Spiel[/U][/URL] Da das für mich alles noch neu ist, hätte ich eine Bitte und zwar: könntet ihr bitte den Code einmal überfliegen und mir grundlegende Fehler (Peformancefresser) aufzeigen?:) Auf anonyme Funktionen habe ich komplett verzichtet. Ich habe jede Variable innerhalb von Funktionen und Schleifen declariert, was afaik nicht unbedingt nötig ist, aber da ich mit einer rekursiven Funktion inkl. nicht deklarierter Variabel ziemlich aufs Maul geflogen bin, bin ich danach auf Nummer sicher gegangen:D das JS hab ich erstmal als ganzes gelassen, würde es aber normalerweise aufteilen, so das z.B. alle drawFunktionen ausgelagert werden. Danke schonmal für eure Hilfe;) [code=JavaScript]// JavaScript Document //Minesweeper var xCount = 30; var yCount = 15; var cellSize = 30; var mineRatio = .2; var canvasRect; var canvas; var cells; var oldCell; var markerKeyDown; var gameOver; var cellsToClear; function init() { createCanvas(); window.addEventListener("keydown", keyDownHandler); window.addEventListener("keyup", keyUpHandler); window.addEventListener("resize", resizeHandler); createField() } function createField() { markerKeyDown = false; gameOver = false; cells = createCells(xCount, yCount); //[x][y] if (mineRatio > 1) mineRatio = 1; if (mineRatio < 0) mineRatio = 0; var cellCount = xCount * yCount; var mineCount = Math.ceil(cellCount * mineRatio); cellsToClear = cellCount - mineCount; var mines = getMines(cellCount, mineCount); assignMinesToCells(mines, cells); countSurroundingMines(cells); for (var i = 0; i < cells.length; i++) { for (var j = 0; j < cells[i].length; j++) drawCover(cells[i][j]); } } function createCells(xC, yC) { var cells = new Array(); for (var i = 0; i < xCount; i++) { var temp = new Array(); for (j = 0; j < yCount; j++) { var cell = new Object(); cell.idX = i; cell.idY = j; cell.x = i * cellSize; cell.y = j * cellSize; cell.revealed = false; cell.revealedSurroundings = false; cell.marked = false; temp.push(cell); } cells.push(temp); } return cells; } function getMines(cellCount, mineCount) { var numbers = new Array(); var mines = new Array(); for (var i = 0; i < cellCount; i++) { numbers.push(i); mines.push(false); } for (var j = 0; j < mineCount; j++) { var rn = Math.floor( Math.random() * numbers.length ); //randomNumber mines[ numbers[rn] ] = true; numbers.splice(rn, 1); } return mines; } function assignMinesToCells(m, c) { var a = 0; for (var i = 0; i < c.length; i++) { for (var j = 0; j < c[i].length; j++) { c[i][j].mine = m[a]; a++; } } } function countSurroundingMines(c) { for (var i = 0; i < c.length; i++) { for (var j = 0; j < c[i].length; j++) { var a = 0; var sCells = [ [i - 1, j - 1], //top-left [i , j - 1], //top [i + 1, j - 1], //top-right [i - 1, j ], //left [i + 1, j ], //right [i - 1, j + 1], //bottom-left [i , j + 1], //bottom [i + 1, j + 1] //bottom-right ]; for (var k = 0; k < sCells.length; k++) { if ( hasMine(sCells[k][0], sCells[k][1], c) ) a++; } c[i][j].minesAround = a; } } } function hasMine(x, y, c) { var b = false; if (x >= 0 && x < xCount && y >= 0 && y < yCount) b = c[x][y].mine; return b; } function createCanvas() { var w = xCount * cellSize; var h = yCount * cellSize; canvas = document.createElement("CANVAS"); var attWidth = document.createAttribute("width"); attWidth.value = w.toString(); canvas.setAttributeNode(attWidth); var attHeight = document.createAttribute("height"); attHeight.value = h.toString(); canvas.setAttributeNode(attHeight); document.body.appendChild(canvas); canvas.addEventListener("click", clickHandler); canvas.addEventListener("mousemove", mouseMoveHandler); elementToCenterOfWindow(canvas); canvasRect = canvas.getBoundingClientRect(); } function elementToCenterOfWindow(element) { element.style.position = "absolute" element.style.left = (window.innerWidth - element.width)/2 + "px"; element.style.top = (window.innerHeight - element.height)/2 + "px"; } function drawCover(cell) { var lineWidth = 2; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.rect(cell.x + lineWidth/2, cell.y + lineWidth/2, cellSize - lineWidth, cellSize - lineWidth); ctx.fillStyle = "#009900"; ctx.fill(); ctx.lineWidth = lineWidth; ctx.strokeStyle = "#006600"; ctx.stroke(); ctx.closePath(); } function drawCoverHighlight(cell) { var lineWidth = 2; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.rect(cell.x + lineWidth/2, cell.y + lineWidth/2, cellSize - lineWidth, cellSize - lineWidth); ctx.fillStyle = "#00bb00"; ctx.fill(); ctx.lineWidth = lineWidth; ctx.strokeStyle = "#009900"; ctx.stroke(); ctx.closePath(); } function drawCell(cell) { var lineWidth = 2; var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.rect(cell.x + lineWidth/2, cell.y + lineWidth/2, cellSize - lineWidth, cellSize - lineWidth); ctx.fillStyle = "#ffff00"; ctx.fill(); ctx.lineWidth = lineWidth; ctx.strokeStyle = "#aaaa00"; ctx.stroke(); ctx.closePath(); if (cell.mine) { var xCenter = cell.x + cellSize/2; var yCenter = cell.y + cellSize/2; var radius = cellSize/2 * .6; ctx.beginPath(); ctx.arc(xCenter, yCenter, radius, 0, 2 * Math.PI, false); ctx.fillStyle = "#000000"; ctx.fill(); ctx.closePath(); } else if (cell.minesAround) { var fontSize = cellSize * .4; var text = cell.minesAround.toString(); ctx.font = fontSize.toString() + "pt Calibri"; ctx.textAlign = "center"; ctx.fillStyle = "#000000"; textWidth = ctx.measureText(text).width; var d = (cellSize - fontSize)/2; var x = cell.x + cellSize/2; var y = cell.y + cellSize - d; ctx.fillText(text, x, y); } } function drawMarker(cell) { var ctx = canvas.getContext("2d"); var xCenter = cell.x + cellSize/2; var yCenter = cell.y + cellSize/2; var radius = cellSize/2 * .8; ctx.beginPath(); ctx.arc(xCenter, yCenter, radius, 0, 2 * Math.PI, false); ctx.fillStyle = "#ff0000"; ctx.fill(); ctx.closePath(); } function clickHandler(event) { if (!gameOver) { var cell = getCellByMouse(event); if (!cell.revealed) { if (markerKeyDown) markCell(cell) else revealCell(cell); } } else restart(); } function markCell(cell) { if (cell.marked) { drawCover(cell); cell.marked = false; } else { drawCover(cell); drawMarker(cell); cell.marked = true; } } function getCellByMouse(e) { var x = e.clientX - canvasRect.left; var y = e.clientY - canvasRect.top; x = Math.floor(x / cellSize); y = Math.floor(y / cellSize); var cell = cells[x][y]; return cell; } function revealCell(cell) { if (!cell.marked) { cell.revealed = true; drawCell(cell); cellsToClear --; if (!cellsToClear) won(); if (!cell.minesAround) revealZeroSurroundings( cell ); if (cell.mine) boom(); } } function revealZeroSurroundings(c) { var sCells = [ [c.idX - 1, c.idY - 1], //top-left [c.idX , c.idY - 1], //top [c.idX + 1, c.idY - 1], //top-right [c.idX - 1, c.idY ], //left [c.idX + 1, c.idY ], //right [c.idX - 1, c.idY + 1], //bottom-left [c.idX , c.idY + 1], //bottom [c.idX + 1, c.idY + 1] //bottom-right ]; for (var i = 0; i < sCells.length; i++) { var x = sCells[i][0]; var y = sCells[i][1]; if (x >= 0 && x < xCount && y >= 0 && y < yCount) { if (!cells[x][y].revealed) revealCell(cells[x][y]) if (!cells[x][y].minesAround && !cells[x][y].revealedSurroundings) { cells[x][y].revealedSurroundings = true;//um einen Stapelüberlauf zu verhindern revealZeroSurroundings( cells[x][y] ) } } } } function mouseMoveHandler(event) { if (!gameOver) { var cell = getCellByMouse(event); if (cell) { if (!cell.revealed) { if (cell != oldCell) { if (oldCell)//am Anfang ist oldCell null { if (!oldCell.revealed && !oldCell.marked) drawCover(oldCell); } if (!cell.marked) drawCoverHighlight(cell); oldCell = cell; } } } } } function boom() { gameOver = true; drawBanner("BOOOOOOOM"); } function won() { gameOver = true; drawBanner("TOTAL CLEARANCE"); } function drawBanner(txt) { var ctx = canvas.getContext("2d"); var bannerWidth = .9; var bannerHeight = .6; var w = canvas.width * bannerWidth; var h = canvas.height * bannerHeight; ctx.beginPath(); ctx.rect( (canvas.width - w)/2, (canvas.height - h)/2, w, h ); ctx.fillStyle = "#ffffff"; ctx.fill(); ctx.lineWidth = 2; ctx.strokeStyle = "#550000"; ctx.stroke(); ctx.closePath(); var fontSize = h * .2; var text = txt; ctx.font = fontSize.toString() + "pt Calibri"; ctx.textAlign = "center"; var textWidth = ctx.measureText(text).width; if (textWidth > w) //textwidth reduzieren auf bannerwidth { var ratio = w/textWidth; fontSize *= ratio; ctx.font = fontSize.toString() + "pt Calibri"; } var textHeight = fontSize; ctx.fillStyle = "#550000"; var d = (cellSize - fontSize)/2; var x = canvas.width/2; var y = canvas.height/2 + fontSize/2; ctx.fillText(text, x, y); fontSize *= .5; text = "click on canvas to restart"; ctx.font = fontSize.toString() + "pt Calibri"; ctx.textAlign = "center"; ctx.fillStyle = "#550000"; x = canvas.width/2; y = canvas.height/2 + fontSize/2 + textHeight; ctx.fillText(text, x, y); } function restart() { canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height); createField(); } function keyDownHandler(event) { if (event.ctrlKey) markerKeyDown = true; } function keyUpHandler(event) { if (!event.ctrlKey && markerKeyDown) markerKeyDown = false; } function resizeHandler(event) { elementToCenterOfWindow(canvas); canvasRect = canvas.getBoundingClientRect();}[/code] [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Der grüne Frosch hüpft über die Hügel an den Bäumen vorbei in die Höhle. Bitte nenne das zweite Wort!