TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

How to Build Minesweeper with JavaScript

79 点作者 maynman将近 6 年前

18 条评论

duiker101将近 6 年前
That first image really needs to be the game itself. I had such an instinct to click it as soon as I saw it and was sad when I noticed it was just an image. Overall the article is nice, if a bit dated, but at least it's a change from a new reactive library.
评论 #20526934 未加载
dilatedmind将近 6 年前
I was working on a multiplayer minesweeper game in elixir and react a couple years back to try and get a better understanding of otp.<p><a href="https:&#x2F;&#x2F;mines.gdf3.com" rel="nofollow">https:&#x2F;&#x2F;mines.gdf3.com</a> <a href="https:&#x2F;&#x2F;github.com&#x2F;slofurno&#x2F;minesweepers-ex" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;slofurno&#x2F;minesweepers-ex</a> <a href="https:&#x2F;&#x2F;github.com&#x2F;slofurno&#x2F;minesweepers-front" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;slofurno&#x2F;minesweepers-front</a><p>Wound up spending most of my time focusing on performance. Large boards (say 4000x4000) naively represented by a map in elixir consumed too much memory and trying to render 16 million dom elements in react didn&#x27;t fly.<p>Never got around to basic ui stuff like setting player name and color, but I thought the bots were pretty cool.
评论 #20530598 未加载
mikehodgson将近 6 年前
I&#x27;m sure there&#x27;s only a few ways to do it, but this code is really similar to the one I wrote back in December: <a href="https:&#x2F;&#x2F;github.com&#x2F;mikehodgson&#x2F;minesweeper" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;mikehodgson&#x2F;minesweeper</a><p>It is playable here: <a href="https:&#x2F;&#x2F;sweeper.games" rel="nofollow">https:&#x2F;&#x2F;sweeper.games</a><p>No jQuery, just straight CSS&#x2F;HTML&#x2F;ES6
评论 #20526918 未加载
评论 #20526841 未加载
lowdose将近 6 年前
Google Chrome Labs released a very shiny typescript minesweeper on <a href="https:&#x2F;&#x2F;proxx.app" rel="nofollow">https:&#x2F;&#x2F;proxx.app</a> The source code is on Github <a href="https:&#x2F;&#x2F;github.com&#x2F;GoogleChromeLabs&#x2F;proxx" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;GoogleChromeLabs&#x2F;proxx</a>
评论 #20526743 未加载
评论 #20524822 未加载
tomjohnson3将近 6 年前
excellent post.<p>can i make a (hopefully useful) comment about programming style - something that someone shared with me a long time ago when reading my code that i have found to be very valuable over the years?<p>it can be incredibly beneficial (for readability, catching logic errors, etc.) to &quot;exit early&quot; from &quot;if&quot; statements. meaning, if you find that you&#x27;re nesting &quot;ifs&quot; more than a couple of levels deep, the code <i>may</i> be a candidate for flattening.<p>so - your handleClick function could be rewritten (with stuff removed) as:<p><pre><code> var handleClick = function( id ) { if ( gameOver ) return; if ( ctrlIsPressed ) { &#x2F;&#x2F; do stuff... return; } if ( cell.opened || cell.flagged ) return; if ( cell.mined ) { &#x2F;&#x2F; do stuff... return; } &#x2F;&#x2F; else do stuff... if ( cell.neighborMineCount &gt; 0 ) { &#x2F;&#x2F; ... return; } &#x2F;&#x2F; else do final stuff... } </code></pre> i may have missed something, but hopefully you get the point. this simple refactoring reduced the depth of the if statements from ~5 to 1. ...many of the other functions could be flattened just like this.<p>...and how do you know when something can be flattened?<p>if there is no code after the if statement and the end of the function - just swap the logic and return early.<p>e.g., this:<p><pre><code> var handleClick = function( id ) { if ( !gameOver ) { &#x2F;&#x2F; ...lots of code and if statements... } &#x2F;&#x2F; ...but no code after the block before returning from the function... } </code></pre> ...turns into this:<p><pre><code> var handleClick = function( id ) { if ( gameOver ) return; &#x2F;&#x2F; NOTE: logic check change... &#x2F;&#x2F; ...do the stuff in the block here... } </code></pre> ...and this is also a great pattern for checking input variables (and returning or throwing an exception) at the top of the function, ensuring that the code following it has valid input parameters.<p>since you&#x27;re sharing your coding projects on your blog (which are excellent) - hopefully you can share this tidbit about coding style with your readers and they&#x27;d find it as useful as i have.
评论 #20528148 未加载
评论 #20531240 未加载
ronilan将近 6 年前
Here is my implementation from 2014 (with jquery...). Watch out. It has lots of bugs!<p><a href="http:&#x2F;&#x2F;www.ronilan.com&#x2F;bugsweeper&#x2F;" rel="nofollow">http:&#x2F;&#x2F;www.ronilan.com&#x2F;bugsweeper&#x2F;</a>
评论 #20524424 未加载
NohatCoder将近 6 年前
The game board is a well ordered grid, I can&#x27;t fathom why you&#x27;d not organise it into an array. The cell object has 3 completely redundant fields. Most of the code just checks the mined parameter of cell objects, but for some reason there is also an isMined function. The code placing mines uses its own data structure to keep track of where mines have been placed, rather than the board data, and manages to be O(n^2) instead of O(n) because of that choice.<p>Overall it is code that takes a lot of unnecessary detours.
d--b将近 6 年前
In a notebook:<p><a href="https:&#x2F;&#x2F;observablehq.com&#x2F;@benjaminadk&#x2F;minesweeper" rel="nofollow">https:&#x2F;&#x2F;observablehq.com&#x2F;@benjaminadk&#x2F;minesweeper</a>
aykutcan将近 6 年前
Well. it is good tutorial but there is a little problem.<p>In minesweeper mines should be generated after first open. You can&#x27;t hit mine at first click it must empty or number.
评论 #20526956 未加载
schwartzworld将近 6 年前
This was a lot of work and you should be really proud.<p>One suggestion which could simplify things. I noticed this bit of code:<p><pre><code> var getNumberColor = function( number ) { var color = &#x27;black&#x27;; if (number === 1) { color = &#x27;blue&#x27;; } if (number === 2) { color = &#x27;green&#x27;; } &#x2F;&#x2F; etc } </code></pre> You mention using a switch statement, but why not just use an array and look it up by the index?
评论 #20526087 未加载
marshmellman将近 6 年前
Uh oh. Since folks are posting their own implementations, here’s mine, written as an exploratory exercise for Angular2:<p><a href="https:&#x2F;&#x2F;github.com&#x2F;jonmellman&#x2F;angular2-minesweeper" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;jonmellman&#x2F;angular2-minesweeper</a><p><a href="https:&#x2F;&#x2F;jonmellman.com&#x2F;minesweeper&#x2F;" rel="nofollow">https:&#x2F;&#x2F;jonmellman.com&#x2F;minesweeper&#x2F;</a><p><i>Grimace</i>
tazard将近 6 年前
I guess this is a good time to share my implementation too. Unfortunately it&#x27;s pretty much desktop only, but includes a high scores board!<p><a href="https:&#x2F;&#x2F;github.com&#x2F;reed-jones&#x2F;minesweeper_js" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;reed-jones&#x2F;minesweeper_js</a><p>And to play it:<p><a href="https:&#x2F;&#x2F;minesweeper.zone&#x2F;" rel="nofollow">https:&#x2F;&#x2F;minesweeper.zone&#x2F;</a>
cbau将近 6 年前
I built a copy of Minesweeper using AngularJS for fun that may be instructive.<p>Demo: <a href="http:&#x2F;&#x2F;ceasarbautista.com&#x2F;minesweeper&#x2F;" rel="nofollow">http:&#x2F;&#x2F;ceasarbautista.com&#x2F;minesweeper&#x2F;</a><p>Source: <a href="https:&#x2F;&#x2F;github.com&#x2F;Ceasar&#x2F;minesweeper" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;Ceasar&#x2F;minesweeper</a>
nojvek将近 6 年前
One weekend I was bored and made a React version of minesweeper. Needless to say I had a lot of fun.<p>Emoji minesweeper: <a href="https:&#x2F;&#x2F;codepen.io&#x2F;nojvek&#x2F;full&#x2F;KjLxdx" rel="nofollow">https:&#x2F;&#x2F;codepen.io&#x2F;nojvek&#x2F;full&#x2F;KjLxdx</a>
BZH314将近 6 年前
MSFT, our multiplayer Twitch Plays implementation of minesweeper, playable directly with your mouse (left click to dig, middle click to flag):<p>MineSweeper For Twitch (MSFT) [1]<p>----<p>[1] <a href="https:&#x2F;&#x2F;www.twitch.tv&#x2F;bzh314" rel="nofollow">https:&#x2F;&#x2F;www.twitch.tv&#x2F;bzh314</a>
cumwolf将近 6 年前
cool tutorial, love all of the code examples. Some of that code is brutally unreadable with all of the nested statements and loops. I guess it works for the tutorial but ooof!
IvanK_net将近 6 年前
My friend (Math genius) made a video tutorial about writing Minesweeper in JS in a Notepad <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=OuahlosQ1m0" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=OuahlosQ1m0</a><p><i></i>* It is in Czech :(
kraucrow将近 6 年前
Aren&#x27;t people afraid of being kicked and beaten with sticks in 2019 if they build things with jQuery.
评论 #20523830 未加载
评论 #20526405 未加载
评论 #20524844 未加载