|
8 | 8 | --- |
9 | 9 |
|
10 | 10 | <p> |
11 | | -The first posts I wrote on this site and which were about p5.js applications are based on code that I wrote before creating the site. As I already hosted the applications on their own Github pages it was easier to simply have a link to these pages in the posts. For example check my <a href="{{ '../p5-cellular-automaton/' | url }}">cellular automata post</a>. |
| 11 | + The first posts I wrote on this site and which were about p5.js applications are based on code that I wrote before |
| 12 | + creating the site. As I already hosted the applications on their own Github pages it was easier to simply have a |
| 13 | + link to these pages in the posts. For example check my |
| 14 | + <a href="{{ '../p5-cellular-automaton/' | url }}">cellular automata post</a>. |
12 | 15 | </p> |
13 | 16 | <p> |
14 | | -Now that this site is created I wanted to see how I could integrate a p5.js application directly in its pages. This is now done with this simple minesweeper demo. It didn't required a lot of work other than adding a call to a cdn in the post source to get p5.js and updating my <code>.eleventy.js</code> to add <code>.js</code> files to the list of template files to compile. |
15 | | -</p> |
16 | | -<p> |
17 | | -For now I am happy with this test but there are still a few things I'd like to test: |
| 17 | + Now that this site is created I wanted to see how I could integrate a p5.js application directly in its pages. This |
| 18 | + is now done with this simple minesweeper demo. It didn't required a lot of work other than adding a call to a cdn in |
| 19 | + the post source to get p5.js and updating my |
| 20 | + <code>.eleventy.js</code> to add <code>.js</code> files to the list of template files to compile. |
18 | 21 | </p> |
| 22 | +<p>For now I am happy with this test but there are still a few things I'd like to test:</p> |
19 | 23 | <ul> |
20 | | - <li>Check how to put this kind on posts in their own Github repo and add them to the site's source code as git submodules</li> |
21 | | - <li>Check how I can integrate a framework like Vue.js to avoid having to create my own <code>interface.js</code> with some ugly functions to update the UI and send the data to the p5.js sketch</li> |
22 | | - <li>Investigate how to make this kind of demo more mobile friendly because for now it clearly doesn't work on a touch screen</li> |
| 24 | + <li> |
| 25 | + Check how to put this kind on posts in their own Github repo and add them to the site's source code as git |
| 26 | + submodules |
| 27 | + </li> |
| 28 | + <li> |
| 29 | + Check how I can integrate a framework like Vue.js to avoid having to create my own |
| 30 | + <code>interface.js</code> with some ugly functions to update the UI and send the data to the p5.js sketch |
| 31 | + </li> |
| 32 | + <li> |
| 33 | + Investigate how to make this kind of demo more mobile friendly because for now it clearly doesn't work on a |
| 34 | + touch screen |
| 35 | + </li> |
23 | 36 | </ul> |
24 | 37 |
|
25 | 38 | <h2>The minesweeper</h2> |
26 | 39 |
|
27 | 40 | <p> |
28 | | -To create this first p5.js integrated demo I wanted something simple to code which I could have running pretty fast. Recreating a minesweeper has several advantages: |
| 41 | + To create this first p5.js integrated demo I wanted something simple to code which I could have running pretty fast. |
| 42 | + Recreating a minesweeper has several advantages: |
29 | 43 | </p> |
30 | 44 |
|
31 | 45 | <ul> |
32 | | - <li>This is a well known game which wouldn't require me to do some research on how to make its UI or which corner cases rules exist.</li> |
33 | | - <li>It includes a kind of maze solving algorithm to automatically open the cells clicked when they are not near a mine. And I <em>love</em> this kind of algorithm, even though this one is fairly short and simple.</li> |
34 | | - <li>It is a nice way to prepare a future project of creating a minesweeper on an hexagonal grid. Actually that was my initial project but I realized that it's not as trivial as I would have expected and thus it would be better to make it a completely seperated project.</li> |
| 46 | + <li> |
| 47 | + This is a well known game which wouldn't require me to do some research on how to make its UI or which corner |
| 48 | + cases rules exist. |
| 49 | + </li> |
| 50 | + <li> |
| 51 | + It includes a kind of maze solving algorithm to automatically open the cells clicked when they are not near a |
| 52 | + mine. And I <em>love</em> this kind of algorithm, even though this one is fairly short and simple. |
| 53 | + </li> |
| 54 | + <li> |
| 55 | + It is a nice way to prepare a future project of creating a minesweeper on an hexagonal grid. Actually that was |
| 56 | + my initial project but I realized that it's not as trivial as I would have expected and thus it would be better |
| 57 | + to make it a completely seperated project. |
| 58 | + </li> |
35 | 59 | </ul> |
36 | 60 |
|
37 | 61 | <p> |
38 | | -There are still a number of features I'd like to implement even in this squared grid minesweeper like having a deterministic grid (i.e. not having cases where the user has to choose a cell randomly), having cells with several mines to make it a bit harder to play, adding a zoom feature to be able to have larger grids or even creating an AI which would open the cases based on probabilities... But for now that's a nice little demo, even though I must admit that it was more fun to create it than to play with it (because personally I find minesweeper to be a terribly boring game!) |
| 62 | + There are still a number of features I'd like to implement even in this squared grid minesweeper like having a |
| 63 | + deterministic grid (i.e. not having cases where the user has to choose a cell randomly), having cells with several |
| 64 | + mines to make it a bit harder to play, adding a zoom feature to be able to have larger grids or even creating an AI |
| 65 | + which would open the cases based on probabilities... But for now that's a nice little demo, even though I must admit |
| 66 | + that it was more fun to create it than to play with it (because personally I find minesweeper to be a terribly |
| 67 | + boring game!) |
39 | 68 | </p> |
40 | 69 |
|
41 | | -<h2>The demo</h2> |
| 70 | +<h2>The demo</h2> |
42 | 71 | <div> |
43 | | - <span>Grid size <input id="COLInput" type="number" min="1" onchange="updateParams()"></span> |
44 | | - <span>Filling ratio <input id="RATIOInput" type="number" max="1" onchange="updateParams()"></span> |
| 72 | + <span>Grid size <input id="COLInput" type="number" min="1" onchange="updateParams()" /></span> |
| 73 | + <span>Filling ratio <input id="RATIOInput" type="number" max="1" onchange="updateParams()" /></span> |
45 | 74 | </div> |
46 | 75 | <div oncontextmenu="return false;" id="canvasDiv"> |
47 | | - <span style="color:red; font-family: D7CR" id="timeSpan">0</span> |
| 76 | + <span style="color: red; font-family: D7CR" id="timeSpan">0</span> |
48 | 77 | <span id="resetSpan"><button onclick="newGame()">Reset</button></span> |
49 | | - <span style="color:red; font-family: D7CR" id="flagsSpan">0</span> |
| 78 | + <span style="color: red; font-family: D7CR" id="flagsSpan">0</span> |
50 | 79 | </div> |
51 | 80 |
|
52 | 81 | <script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.js"></script> |
|
0 commit comments