2. 程式人生 > >react學習之--方向鍵走迷宮

react學習之--方向鍵走迷宮

阿新 • • 發佈：2019-01-11 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #cells {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    .row {
      display: flex;
      flex-direction: row;
    }
    
    .cell {
      width: 20px;
      height: 20px;
      border: 1px solid transparent;
    }
    
    .top {
      border-top-color: #000;
    }
    
    .bottom {
      border-bottom-color: #000;
    }
    
    .left {
      border-left-color: #000;
    }
    
    .right {
      border-right-color: #000;
    }
    
    .rat {
      width: 20px;
                height: 20px;
                display: block;
                position: absolute;
      background: orange!important;
    }
  </style>
</head>

<body>
 <div id="rats" class="rat"></div>
  <div id="cells">
    <div class="row">
      <div class="top cell"></div>
      <div class="top bottom right cell"></div>
      <div class="top left cell"></div>
      <div class="top bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="top cell"></div>
      <div class="top cell"></div>
      <div class="top bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="top bottom right cell"></div>
      <div class="top left cell"></div>
      <div class="top bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="top cell"></div>
      <div class="top bottom cell"></div>
      <div class="top right cell"></div>
      <div class="top left right cell"></div>
    </div>
    <div class="row">
      <div class="bottom left cell"></div>
      <div class="top bottom cell"></div>
      <div class="bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="top cell"></div>
      <div class="top bottom cell"></div>
      <div class="top right cell"></div>
      <div class="left right cell"></div>
      <div class="left cell"></div>
      <div class="top right cell"></div>
      <div class="top left cell"></div>
      <div class="top bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="top bottom right cell"></div>
      <div class="left cell"></div>
      <div class="top right cell"></div>
      <div class="left right cell"></div>
      <div class="left right cell"></div>
    </div>
    <div class="row">
      <div class="top left cell"></div>
      <div class="top bottom cell"></div>
      <div class="top right cell"></div>
      <div class="top left cell"></div>
      <div class="right cell"></div>
      <div class="top left right cell"></div>
      <div class="left right cell"></div>
      <div class="left right cell"></div>
      <div class="left right cell"></div>
      <div class="left right cell"></div>
      <div class="bottom left cell"></div>
      <div class="top bottom cell"></div>
      <div class="top right cell"></div>
      <div class="top left cell"></div>
      <div class="top bottom cell"></div>
      <div class="top right cell"></div>
      <div class="left right cell"></div>
      <div class="bottom left right cell"></div>
      <div class="bottom left cell"></div>
      <div class="bottom right cell"></div>
    </div>
    <div class="row">
      <div class="bottom left right cell"></div>
      <div class="top left cell"></div>
      <div class="bottom right cell"></div>
      <div class="left right cell"></div>
      <div class="left right cell"></div>
      <div class="bottom left cell"></div>
      <div class="bottom right cell"></div>
      <div class="left right cell"></div>
      <div class="left right cell"></div>
      <div class="bottom left cell"></div>
      <div class="top bottom cell"></div>
      <div class="top bottom right cell"></div>
      <div class="left right cell"></div>
      <div class="bottom left cell"></div>
      <div class="top right cell"></div>
      <div class="bottom left cell"></div>
      <div class="bottom right cell"></div>
      <div class="top left cell"></div>
      <div class="top cell"></div>
      <div class="top right cell"></div>
    </div>
    <div class="row">
      <div class="top left cell"></div>
      <div class="bottom right cell"></div>
      <div class="top left cell"></div>
      <div class="bottom right cell"></div>
      <div class="left right cell"></div>
      <div class="top left right cell"></div>
      <div class="top left cell"></div>
      <div class="bottom right cell"></div>
      <div class="bottom left cell"></div>
      <div class="top bottom cell"></div>
      <div class="top right cell"></div>
      <div class="top left cell"></div>
      <div class="bottom cell"></div>
      <div class="top bottom right cell"></div>
      <div class="bottom left cell"></div>
      <div class="top bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="bottom right cell"></div>
      <div class="left right cell"></div>
      <div class="left right cell"></div>
    </div>
    <div class="row">
      <div class="left right cell"></div>
      <div class="top bottom left cell"></div>
      <div class="bottom cell"></div>
      <div class="top right cell"></div>
      <div class="left right cell"></div>
      <div class="bottom left cell"></div>
      <div class="bottom right cell"></div>
      <div class="top left cell"></div>
      <div class="top bottom cell"></div>
      <div class="top right cell"></div>
      <div class="bottom left cell"></div>
      <div class="bottom right cell"></div>
      <div class="top left cell"></div>
      <div class="top bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="top right cell"></div>
      <div class="top left cell"></div>
      <div class="bottom right cell"></div>
      <div class="left right cell"></div>
    </div>
    <div class="row">
      <div class="left right cell"></div>
      <div class="top left cell"></div>
      <div class="top bottom cell"></div>
      <div class="bottom right cell"></div>
      <div class="left right cell"></div>
      <div class="top left right cell"></div>
      <div class="top left cell"></div>
      <div class="bottom cell"></div>
      <div class="top right cell"></div>
      <div class="bottom left cell"></div>
      <div class="top bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="bottom right cell"></div>
      <div class="top bottom left cell"></div>
      <div class="top cell"></div>
      <div class="top bottom cell"></div>
      <div class="bottom right cell"></div>
      <div class="left right cell"></div>
      <div class="top left cell"></div>
      <div class="right cell"></div>
    </div>
    <div class="row">
      <div class="bottom left cell"></div>
      <div class="bottom right cell"></div>
      <div class="top left cell"></div>
      <div class="top bottom cell"></div>
      <div class="bottom right cell"></div>
      <div class="left right cell"></div>
      <div class="left right cell"></div>
      <div class="top left cell"></div>
      <div class="right cell"></div>
      <div class="top left cell"></div>
      <div class="top right cell"></div>
      <div class="top left cell"></div>
      <div class="top bottom cell"></div>
      <div class="top right cell"></div>
      <div class="left cell"></div>
      <div class="top bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="right cell"></div>
      <div class="left right cell"></div>
      <div class="left right cell"></div>
    </div>
    <div class="row">
      <div class="top bottom left cell"></div>
      <div class="top right cell"></div>
      <div class="left cell"></div>
      <div class="top bottom cell"></div>
      <div class="top right cell"></div>
      <div class="bottom left cell"></div>
      <div class="bottom right cell"></div>
      <div class="left right cell"></div>
      <div class="left right cell"></div>
      <div class="left right cell"></div>
      <div class="bottom left cell"></div>
      <div class="bottom right cell"></div>
      <div class="top left cell"></div>
      <div class="bottom right cell"></div>
      <div class="bottom left right cell"></div>
      <div class="top left cell"></div>
      <div class="top bottom right cell"></div>
      <div class="left right cell"></div>
      <div class="left right cell"></div>
      <div class="bottom left right cell"></div>
    </div>
    <div class="row">
      <div class="top left cell"></div>
      <div class="bottom right cell"></div>
      <div class="bottom left right cell"></div>
      <div class="top left cell"></div>
      <div class="bottom right cell"></div>
      <div class="top left cell"></div>
      <div class="top bottom cell"></div>
      <div class="bottom right cell"></div>
      <div class="left right cell"></div>
      <div class="left right cell"></div>
      <div class="top bottom left cell"></div>
      <div class="top bottom cell"></div>
      <div class="bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="top right cell"></div>
      <div class="bottom left cell"></div>
      <div class="top bottom cell"></div>
      <div class="bottom right cell"></div>
      <div class="bottom left cell"></div>
      <div class="top right cell"></div>
    </div>
    <div class="row">
      <div class="left right cell"></div>
      <div class="top left cell"></div>
      <div class="top bottom cell"></div>
      <div class="right cell"></div>
      <div class="top left cell"></div>
      <div class="bottom right cell"></div>
      <div class="top left cell"></div>
      <div class="top bottom cell"></div>
      <div class="bottom right cell"></div>
      <div class="bottom left cell"></div>
      <div class="top bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="top right cell"></div>
      <div class="bottom left cell"></div>
      <div class="top bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="right cell"></div>
    </div>
    <div class="row">
      <div class="left right cell"></div>
      <div class="left right cell"></div>
      <div class="top left cell"></div>
      <div class="bottom right cell"></div>
      <div class="bottom left cell"></div>
      <div class="top right cell"></div>
      <div class="bottom left cell"></div>
      <div class="top bottom cell"></div>
      <div class="top cell"></div>
      <div class="top bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="top right cell"></div>
      <div class="bottom left cell"></div>
      <div class="top bottom cell"></div>
      <div class="top right cell"></div>
      <div class="top left cell"></div>
      <div class="top bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="right cell"></div>
    </div>
    <div class="row">
      <div class="left right cell"></div>
      <div class="left right cell"></div>
      <div class="bottom left cell"></div>
      <div class="top right cell"></div>
      <div class="top left cell"></div>
      <div class="bottom right cell"></div>
      <div class="top left cell"></div>
      <div class="top right cell"></div>
      <div class="left cell"></div>
      <div class="top right cell"></div>
      <div class="top left cell"></div>
      <div class="top bottom right cell"></div>
      <div class="left right cell"></div>
      <div class="top left right cell"></div>
      <div class="top left cell"></div>
      <div class="bottom right cell"></div>
      <div class="bottom left cell"></div>
      <div class="top right cell"></div>
      <div class="top left cell"></div>
      <div class="right cell"></div>
    </div>
    <div class="row">
      <div class="left cell"></div>
      <div class="bottom right cell"></div>
      <div class="top bottom left cell"></div>
      <div class="bottom right cell"></div>
      <div class="bottom left cell"></div>
      <div class="top right cell"></div>
      <div class="bottom left right cell"></div>
      <div class="left right cell"></div>
      <div class="bottom left right cell"></div>
      <div class="left right cell"></div>
      <div class="bottom left cell"></div>
      <div class="top bottom cell"></div>
      <div class="bottom right cell"></div>
      <div class="left right cell"></div>
      <div class="left right cell"></div>
      <div class="top bottom left cell"></div>
      <div class="top right cell"></div>
      <div class="left right cell"></div>
      <div class="left right cell"></div>
      <div class="left right cell"></div>
    </div>
    <div class="row">
      <div class="left right cell"></div>
      <div class="top left cell"></div>
      <div class="top bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="top right cell"></div>
      <div class="bottom left cell"></div>
      <div class="top bottom cell"></div>
      <div class="bottom right cell"></div>
      <div class="top left cell"></div>
      <div class="bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="top cell"></div>
      <div class="top bottom cell"></div>
      <div class="bottom right cell"></div>
      <div class="bottom left cell"></div>
      <div class="top cell"></div>
      <div class="bottom right cell"></div>
      <div class="left right cell"></div>
      <div class="left right cell"></div>
      <div class="bottom left right cell"></div>
    </div>
    <div class="row">
      <div class="bottom left right cell"></div>
      <div class="bottom left cell"></div>
      <div class="top bottom cell"></div>
      <div class="top right cell"></div>
      <div class="left right cell"></div>
      <div class="top left cell"></div>
      <div class="top bottom cell"></div>
      <div class="top right cell"></div>
      <div class="left cell"></div>
      <div class="top bottom cell"></div>
      <div class="top right cell"></div>
      <div class="bottom left cell"></div>
      <div class="top bottom right cell"></div>
      <div class="top left cell"></div>
      <div class="top right cell"></div>
      <div class="left right cell"></div>
      <div class="top left cell"></div>
      <div class="bottom right cell"></div>
      <div class="bottom left cell"></div>
      <div class="top right cell"></div>
    </div>
    <div class="row">
      <div class="top left cell"></div>
      <div class="top bottom cell"></div>
      <div class="top right cell"></div>
      <div class="bottom left right cell"></div>
      <div class="left cell"></div>
      <div class="bottom right cell"></div>
      <div class="top bottom left cell"></div>
      <div class="bottom right cell"></div>
      <div class="left right cell"></div>
      <div class="top left right cell"></div>
      <div class="bottom left cell"></div>
      <div class="top bottom cell"></div>
      <div class="top right cell"></div>
      <div class="left right cell"></div>
      <div class="left right cell"></div>
      <div class="left right cell"></div>
      <div class="left right cell"></div>
      <div class="top left cell"></div>
      <div class="top bottom right cell"></div>
      <div class="left right cell"></div>
    </div>
    <div class="row">
      <div class="left right cell"></div>
      <div class="top bottom left cell"></div>
      <div class="right cell"></div>
      <div class="top left cell"></div>
      <div class="bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="top cell"></div>
      <div class="bottom right cell"></div>
      <div class="left right cell"></div>
      <div class="top left cell"></div>
      <div class="top bottom cell"></div>
      <div class="right cell"></div>
      <div class="bottom left right cell"></div>
      <div class="left right cell"></div>
      <div class="left right cell"></div>
      <div class="left right cell"></div>
      <div class="left right cell"></div>
      <div class="top left cell"></div>
      <div class="bottom right cell"></div>
    </div>
    <div class="row">
      <div class="left cell"></div>
      <div class="top right cell"></div>
      <div class="bottom left cell"></div>
      <div class="bottom right cell"></div>
      <div class="top left cell"></div>
      <div class="top bottom cell"></div>
      <div class="top bottom right cell"></div>
      <div class="left right cell"></div>
      <div class="top left cell"></div>
      <div class="bottom right cell"></div>
      <div class="left right cell"></div>
      <div class="top left cell"></div>
      <div class="bottom right cell"></div>
      <div class="top left cell"></div>
      <div class="bottom right cell"></div>
      <div class="bottom left right cell"></div>
      <div class="left right cell"></div>
      <div class="bottom left cell"></div>
      <div class="bottom right cell"></div>
      <div class="top left right cell"></div>
    </div>
    <div class="row">
      <div class="bottom left right cell"></div>
      <div class="bottom left cell"></div>
      <div class="top bottom cell"></div>
      <div class="top bottom right cell"></div>
      <div class="bottom left cell"></div>
      <div class="top bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="bottom right cell"></div>
      <div class="bottom left cell"></div>
      <div class="top bottom cell"></div>
      <div class="bottom right cell"></div>
      <div class="bottom left cell"></div>
      <div class="top bottom right cell"></div>
      <div class="bottom left cell"></div>
      <div class="top bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="top bottom cell"></div>
      <div class="bottom cell"></div>
    </div>
  </div>
  <script>
    const value = {top:false, left:false, bottom:false, right:false};
    var Nleft=0;
    var Ntop=0;
    var Nright=0;
    var Nbottom=0;
    const panel = [];
    const rows = document.getElementsByClassName('row');
    const rat = document.getElementById("rats");
   window.document.onkeydown = function(ent) {
                var event = ent || window.event;
                var step =panel[Ntop][Nleft];
                switch(event.keyCode) {
                    case 37: //左
                    if(!step['left']){
                        Nleft--;
                        rat.style.left = Math.max(LeftTop.offsetLeft, rat.offsetLeft - 22) + "px";
                      }
                        break;
                    case 38: //上
                    if(!step['top']){
                        Ntop--;
                        rat.style.top = Math.max( LeftTop.offsetTop, rat.offsetTop - 22) + "px";
                      }
                        break;
                    case 39: //右
                    if(!step['right']){
                        if((Ntop==19)&&(Nleft==19)){
                          console.log("ok --------=");
                        }else{
                          Nleft++;
                          rat.style.left = Math.min(RightBottom.offsetLeft, rat.offsetLeft + 22) + "px";
                        }
                      }
                        break;
                    case 40: //下
                    if(!step['bottom']){
                        Ntop++;
                        rat.style.top = Math.min(RightBottom.offsetTop, rat.offsetTop + 22) + "px";
                      }
                        break;

                }
              
            }
        var LeftTop = rows[0].children[0];
        var RightBottom = rows[19].children[19];
        rat.style.left =  LeftTop.offsetLeft  + "px"; 
        rat.style.top = LeftTop.offsetTop + 1 + "px";
    for(let row of rows) {
        const nodes = row.children;
        let eachRow = [];
        for (let node of nodes) {
          const borders = node.classList.value.split(' ').filter(className => ['top', 'left', 'right', 'bottom'].indexOf(className) != -1)
          const borderMap = {}
          borders.forEach(line => borderMap[line] = true)
          eachRow.push(Object.assign({}, value, borderMap))
        }
        panel.push(eachRow)
    }
    console.log(JSON.stringify(panel))
  </script>
</body>

</html>

相關推薦

react學習之--方向鍵走迷宮

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width

Java與算法之(5) - 老鼠走迷宮(深度優先算法)

tail 數字化 boa pop ase lis ext oar tar 小老鼠走進了格子迷宮，如何能繞過貓並以最短的路線吃到奶酪呢？ 註意只能上下左右移動，不能斜著移動。 在解決迷宮問題上，深度優先算法的思路是沿著一條路一直走，遇到障礙或走出邊界再返回嘗試別的路徑。 首

React學習之旅----專案小例項----無人點餐二---詳情頁渲染

App.js /* react路由的配置： 1、找到官方文件 https://reacttraining.com/react-router/web/example/basic 2、安裝 cnpm install react-router-dom --save 3、找

React學習之旅----Redux安裝及富文字、echarts

瀏覽器中安裝redux devtools擴充套件 yarn add redux  react-redux redux-devtools-extension 安裝依賴包即可 // 引入createStore建立store，引入applyMiddleware 來使用中介軟體 //

React學習之旅----mock模擬假資料及封裝axios，動態渲染表格

import React from 'react'; import { Card, Table, Modal, Button, message } from 'antd'; import axios from './../../axios/index' import Utils from './..

React學習之旅----配置多頁面路由及巢狀路由demo

const menuList = [ { title: '首頁', // key: '/home' key: '/admin/home' }, { title: 'UI', key: '/ui', children: [ {

React學習之旅----按需載入Antd UI元件及自定義主題

package.json "babel": { "presets": [ "react-app" ], "plugins": [ [ "import", { "libraryName": "a

React學習之旅----配置less-loader

yarn less-loader先安裝依賴 yarn eject結構目錄 開啟config目錄下的webpack.config.dev.js，修改webpack配置 找到css部分，拷貝一份，複製貼上，改為less即可 新增 const lessRegex = /\.less$/

React學習之旅----yarn eject報錯“This git repository has untracked files or uncommitted changes:”解決辦法

當我們yarn eject解開專案結構時，報錯This git repository has untracked files or uncommitted changes: 這是提示我們沒有進行git提交 我們開啟我們的github，新建專案，拉下程式碼後，將我們之前開發的檔案放進來，重新安

React學習之旅----表單錄入

import React, { Component } from 'react'; /* 約束性和非約束性元件: 非約束性組:<input type="text" defaultValue="a" /> 這個 defaultValue 其實就是原生DOM中的 value

React學習之旅----Todolist

import React from 'react'; class TodoList2 extends React.Component { constructor(props) { super(props) this.state = { list: [

React學習之旅----引入圖片

import React from 'react'; // 引入本地圖片，需以元件的形式引入，而遠端圖片則不需要 import logo from '../assets/images/logo.svg'; class News extends React.Component { construc

React學習之旅----新建元件

react的元件有兩種寫法： import React from 'react'; class News extends React.Component { constructor(props) { super(props) // 用於父子元件傳值 } render () {

React學習之旅----安裝腳手架

npm i yarn -g全域性安裝yarn npm install -g create-react-app全域性安裝腳手架 create-react-app react01建立第一個專案，最好已經全域性安裝了yarn 安裝了node高版本後可以直接npx create-react-ap

React學習之旅----獲取表單輸入的值，雙向繫結

react中實現雙向繫結input輸入框值 import React, { Component } from 'react'; class Event extends Component { constructor(props) { super(props) this.sta

React學習之旅----獲取自定義屬性

獲取自定屬性，在小程式中可能更常用，在React中同樣也是可以獲取的，看例項 import React, { Component } from 'react'; class Event extends Component { constructor(props) { super(pr

React學習之旅----事件方法及改變this指向

import React, { Component } from 'react'; import '../assets/css/index.css' // react繫結屬性注意點 // class要換成className // for 要換成htmlFor // style class Home

React學習之旅----迴圈資料

import React from 'react'; // 引入本地圖片，需以元件的形式引入，而遠端圖片則不需要 import logo from '../assets/images/logo.svg'; // 元件名稱，類首字母必須大寫 class News extends React.Compo

React學習之旅----實現類似vue的資料雙向繫結

react沒有資料的雙向繫結，但可以用過一些方法實現： import React from 'react'; class TodoList extends React.Component { constructor(props) { super(props) this.sta

強化學習 Sarsa-lambda演算法走迷宮小例子

Sarsa-lambda是Sarsa演算法的一種提速的方法。 如果說 Sarsa 和 Qlearning 都是每次獲取到 reward, 只更新獲取到 reward 的前一步. 那 Sarsa-lambda 就是更新獲取到 reward 的前 lambda 步. lambda 是在 [0,