Q&A
###迷路の難易度をつけたいです。
javascriptとHTML5 canvasで迷路の作成を試みています。
迷路はできましたが、さらに難易度をつけたいと思っています。
canvas で描画する際の
let col = 21; // ここの数字を変えて難易度を上げていきたいです。レベル１（１１）、レベル２（２２）.....レベル１０（１０１）。
let row = 21; //同様
##レベルのボタンを押すと数字が上記に代入され、ページがそのレベルで更新されるようにしたいです。
変数の良い入れ方がわからず苦戦しています。
ご指導よろしくお願いいたします。
html
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <link rel="stylesheet" href="maze.css"> 9 <title>迷路</title> 10</head> 11 12<body> 13 <button class="btn" id="level1">レベル1</button> 14 <button class="btn" id="level2">レベル2</button> 15 <button class="btn" id="level3">レベル3</button> 16 <button class="btn" id="level4">レベル4</button> 17 <button class="btn" id="level5">レベル5</button> 18 <button class="btn" id="level6">レベル6</button> 19 <button class="btn" id="level7">レベル7</button> 20 <button class="btn" id="level8">レベル8</button> 21 <button class="btn" id="level9">レベル9</button> 22 <button class="btn" id="level10">レベル10</button> 23 24 <div id='container'> 25 <canvas width="100" height="100" id="mycanvas"> 26 Canvasに対応したブラウザを用意してください。 27 </canvas> 28 </div> 29 30 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js "></script> 31 32 <script> 33 (function () { 34 35 let map = []; 36 37 // Canvasで描画 38 let col = 21; // ここの数字を変えて難易度を上げていきたいです。レベル１（１１）、レベル２（２２）、レベル３（３３）.....レベル１０（１０１）。 39 let row = 21; 40 41 for (let x = 0; x < col; x++) { 42 map[x] = []; 43 for (let y = 0; y < row; y++) { 44 map[x][y] = 0; 45 } 46 } 47 for (let x = 1; x < col; x += 2) { 48 for (let y = 1; y < row; y += 2) { 49 map[x][y] = 1; 50 } 51 } 52 let points = [ 53 [0, -1],//上に倒す 54 [0, 1],//下 55 [1, 0],//右 56 [-1, 0]//＊＊左 57 ] 58 function rand(n) { 59 return Math.floor(Math.random() * (n + 1)); 60 } 61 for (let x = 1; x < col; x += 2) { 62 for (let y = 1; y < row; y += 2) { 63 do { 64 if (x === 1) { 65 // 上下左右に倒す 66 var r = points[rand(3)]; 67 } else { 68 // 左以外に倒す 69 var r = points[rand(2)]; 70 } 71 } while (map[x + r[0]][y + r[1]] === 1); 72 map[x + r[0]][y + r[1]] = 1; 73 } 74 } 75 let startX = 0;//スタートの座標 76 let startY = 0; 77 78 let goalX = col - 1;//ゴールの座標 79 let goalY = row - 1; 80 81 let wallSize = 10; 82 let wallColor = '#3cb371'; 83 let routeColor = '#ff0000'; 84 85 const canvas = $('#mycanvas')[0]; 86 if (!canvas || !canvas.getContext) { 87 return false; 88 } 89 const ctx = canvas.getContext('2d'); 90 91 canvas.width = (col + 2) * wallSize; 92 canvas.height = (row + 2) * wallSize; 93 // 上下の壁 94 for (let x = 0; x < col + 2; x++) { 95 drawWall(x, 0); 96 drawWall(x, row + 1); 97 } 98 // 左右の壁 99 for (let y = 0; y < row + 2; y++) { 100 drawWall(0, y); 101 drawWall(col + 1, y); 102 } 103 // 迷路の内部 104 for (let x = 0; x < col; x++) { 105 for (let y = 0; y < row; y++) { 106 if (map[x][y] === 1) { 107 drawWall(x + 1, y + 1); 108 } 109 if ((x === startX && y === startY) || (x === goalX && y === goalY)) { 110 drawRoute(x + 1, y + 1); 111 } 112 } 113 } 114 // 壁を描画 115 function drawWall(x, y) { 116 ctx.fillStyle = wallColor; 117 drawRect(x, y); 118 } 119 120 function drawRoute(x, y) { 121 ctx.fillStyle = routeColor; 122 drawRect(x, y); 123 } 124 125 function drawRect(x, y) { 126 ctx.fillRect( 127 x * wallSize, 128 y * wallSize, 129 wallSize, 130 wallSize); 131 } 132 })(); 133 </script> 134 135</body> 136 137</html>
回答1件
0
ベストアンサー
こんにちは
以下のような手順(1), (2)を踏めばよいかと思います。
(1) 現状、即時関数になっている function () { ・・・ } を個別の関数にする。その際に、引数として col と row を受け取るようにして、現状、 let col = 21; および let row = 21; と書いている行を削除
(2) ボタンがクリックされたときに、そのボタンからレベル値を取得し、レベルに応じた col と row の値を与えて上記(1)の関数を呼ぶようにする。
以下は、上記の手順でご質問のコードを修正したものです。
- 動作確認用CodePen: https://codepen.io/jun68ykt/pen/gOYqrNa?editors=1111
このサンプルでは、
- 即時関数だった関数を
renderMazeという変数に入れて、renderMaze(col, row)で呼べるように修正し、 let col = 21;およびlet row = 21;をコメントアウトして、- クリックされたボタンのレベル値に10を掛けて1を加えた値を
nとして、これをcolとrowの値として、renderMaze(n, n)を実行する
ようにしました。
追記
ちょっとしたリファクタ案を追記します。
各ボタンは以下
html
1<button class="btn" id="level1">レベル1</button>
のようなHTMLですが、これがクリックされたときのレベル値を得るには、 "レベル1" または "level1" という文字列から、末尾の数字である 1 を取り出さなければならず、上記の回答ではそのために .replace(/[^0-9]/g,'') としていますが、このような文字列処理は若干、面倒です。
そこで data-* 属性を使って、例えばdata-level という属性にレベル値を入れることにして、
html
1<button class="btn" id="level1" data-level="1">レベル1</button>
としておけば、.data('level') でレベル値の 1 を (文字列ではなく数値で)取り出せます。以下は、これを使ったコードです。
- 動作確認用CodePen: https://codepen.io/jun68ykt/pen/ExYryZr?editors=1111
以上、参考になれば幸いです。
投稿2019/09/23 16:55
編集2019/09/23 19:38
総合スコア9058
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/09/24 01:40
2019/09/24 01:49