編集履歴

質問編集履歴

修正

2019/10/28 07:16

投稿

f_r

スコア4

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -16,78 +16,10 @@
 JavaScript
 ソースコード
 ```
-<!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));
-        }
-        for (var x = 1; x < col; x += 2) {
-            for (var y = 1; y < row; y += 2) {
                 do {
                     if (x === 1) {
                         // 上下左右に倒す
@@ -98,72 +30,7 @@
                     }
                 } while (map[x + r[0]][y + r[1]] === 1);
                 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

title CHANGED Viewed

File without changes

body CHANGED Viewed

@@ -1,7 +1,7 @@
 ### 前提・実現したいこと
 初心者です。
 JavaScriptで迷路を作成しています。
-ドットインストールの課題を行なっているのですが、ソースコードのWhile文の中身がよくわかりません。(特にr[0],r[1]のところです。）
+ソースコードのWhile文のmap[x + r[0]][y + r[1]]とmap[x + r[0]][y + r[0]]の挙動の違いがよくわかりません
 説明していただけると助かります。
 ### 発生している問題・エラーメッセージ
@@ -20,7 +20,7 @@
 <html lang="ja">
 <head>
     <meta charset="utf-8">
-    <title>迷路</title>
+    <title>JSー迷路</title>
     <style>
     body {
         font-family: "Century Gothic";
@@ -31,19 +31,19 @@
         margin: 20px auto;
     }
     #mycanvas {
-        background: #AAEDFF;
+        background: skyblue;
     }
     .btn {
         margin: 3px auto;
         width: 200px;
         padding: 5px;
-        background: #00AAFF;
+        background: blue;
-        color: #FFFFFF;
+        color: white;
         border-radius: 3px;
         cursor: pointer;
     }
     .btn:hover {
-        opacity: 0.8;
+        opacity: 0.7;
     }
     </style>
 </head>
@@ -56,34 +56,11 @@
     </div>
     <script>
     (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;
         for (var x = 0; x < col; x++) {
@@ -141,7 +118,7 @@
         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);
@@ -187,11 +164,9 @@
     </script>
 </body>
 </html>
 ### 試したこと
 ここに問題に対して試したことを記載してください。
 ### 補足情報（FW/ツールのバージョンなど）
-URL https://dotinstall.com/lessons/maze_js/30909
 ここにより詳細な情報を記載してください。