編集履歴

質問編集履歴

修正

2019/10/28 07:16

投稿

f_r

スコア4

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -34,143 +34,7 @@
 ```
-<!DOCTYPE html>
-<html lang="ja">
-<head>
-    <meta charset="utf-8">
-    <title>JSー迷路</title>
-    <style>
-    body {
-        font-family: "Century Gothic";
-        font-size: 16px;
-    }
-    #container {
-        text-align: center;
-        margin: 20px auto;
-    }
-    #mycanvas {
-        background: skyblue;
-    }
-    .btn {
-        margin: 3px auto;
-        width: 200px;
-        padding: 5px;
-        background: blue;
-        color: white;
-        border-radius: 3px;
-        cursor: pointer;
-    }
-    .btn:hover {
-        opacity: 0.7;
-    }
-    </style>
-</head>
-<body>
-    <div id="container">
-        <canvas width="100" height="100" id="mycanvas">
-            Canvasに対応したブラウザを用意してください。
-        </canvas>
-        <div id="reset" class="btn">RESET</div>
-    </div>
-    <script>
-    (function() {
-var map = [];
-        // Canvasで描画
-        var col = 13;
-        var row = 13;
-        for (var x = 0; x < col; x++) {
-            map[x] = [];
-            for (var y = 0; y < row; y++) {
-                map[x][y] = 0;
-            }
-        }
-        for (var x = 1; x < col; x += 2) {
-            for (var y = 1; y < row; y += 2) {
-                map[x][y] = 1;
-            }
-        }
-        var points = [
-            [0, -1],
-            [0, 1],
-            [1, 0],
-            [-1, 0] // 左
-        ];
- function rand(n) {
-            return Math.floor(Math.random() * (n + 1));
-        }
@@ -198,137 +62,7 @@
                 map[x + r[0]][y + r[1]] = 1;
-            }
-        }
-        var startX = 0;
-        var startY = 0;
-        var goalX = col - 1;
-        var goalY = row - 1;
-        var wallSize = 10;
-        var wallColor = '#3261AB';
-        var routeColor = '#FF0088';
-        var canvas = document.getElementById('mycanvas');
-        if (!canvas || !canvas.getContext) {
-            return false;
-        }
-        var ctx = canvas.getContext('2d');
-        canvas.width  = (col + 2) * wallSize;
-        canvas.height = (row + 2) * wallSize;
-        // 上下の壁
-        for (var x = 0; x < col + 2; x++) {
-            drawWall(x, 0);
-            drawWall(x, row + 1);
-        }
-        // 左右の壁
-        for (var y = 0; y < row + 2; y++) {
-            drawWall(0, y);
-            drawWall(col + 1, y);
-        }
-        // 迷路の内部
-        for (var x = 0; x < col; x++) {
-            for (var y = 0; y < row; y++) {
-                if (map[x][y] === 1) {
-                    drawWall(x + 1, y + 1);
-                }
-                if ((x === startX && y === startY) || (x === goalX && y === goalY)) {
-                    drawRoute(x + 1, y + 1);
-                }
-            }
-        }
- // 壁を描画
-        function drawWall(x, y) {
-            ctx.fillStyle = wallColor;
-            drawRect(x, y);
-        }
-        function drawRoute(x, y) {
-            ctx.fillStyle = routeColor;
-            drawRect(x, y);
-        }
-        function drawRect(x, y) {
-            ctx.fillRect(
-                x * wallSize,
-                y * wallSize,
-                wallSize,
-                wallSize);
-        }
-    })();
-    </script>
-</body>
-</html>
 ### 試したこと

自分のコードに変更

2019/10/28 07:16

投稿

f_r

スコア4

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -4,7 +4,7 @@
 JavaScriptで迷路を作成しています。
-ドットインストールの課題を行なっているのですが、ソースコードのWhile文の中身がよくわかりません。(特にr[0],r[1]のところです。）
+ソースコードのWhile文のmap[x + r[0]][y + r[1]]とmap[x + r[0]][y + r[0]]の挙動の違いがよくわかりません
 説明していただけると助かります。
@@ -42,7 +42,7 @@
     <meta charset="utf-8">
-    <title>迷路</title>
+    <title>JSー迷路</title>
     <style>
@@ -64,7 +64,7 @@
     #mycanvas {
-        background: #AAEDFF;
+        background: skyblue;
     }
@@ -76,9 +76,9 @@
         padding: 5px;
-        background: #00AAFF;
+        background: blue;
-        color: #FFFFFF;
+        color: white;
         border-radius: 3px;
@@ -88,7 +88,7 @@
     .btn:hover {
-        opacity: 0.8;
+        opacity: 0.7;
     }
@@ -114,61 +114,15 @@
     (function() {
-        // 迷路を配列で用意
-        /*
-        0 0 0
-        0 1 0
-        0 1 0
-        map[x][y]
-        */
-        /*
-        棒倒し法
-        (1) 一つ飛びに壁（棒）を作る
-        (2) 1列目の棒を上下左右のどちらかに倒す
-        (3) 2列目以降の棒を左以外のどれかに倒す
-        0 0 0 1 0
-        1 1 0 1 0
-        0 0 0 0 0
-        0 1 0 1 1
-        0 1 0 0 0
-        */
 var map = [];
-        // map[0] = [0, 0, 0];
-        // map[1] = [0, 1, 1];
-        // map[2] = [0, 0, 0];
         // Canvasで描画
-        var col = 13; // 奇数
+        var col = 13;
         var row = 13;
@@ -284,7 +238,7 @@
         canvas.height = (row + 2) * wallSize;
- // 上下の壁
+        // 上下の壁
         for (var x = 0; x < col + 2; x++) {
@@ -376,8 +330,6 @@
 </html>
 ### 試したこと
@@ -388,6 +340,4 @@
 ### 補足情報（FW/ツールのバージョンなど）
-URL https://dotinstall.com/lessons/maze_js/30909
 ここにより詳細な情報を記載してください。