{"id":1045,"date":"2022-07-01T13:38:46","date_gmt":"2022-07-01T04:38:46","guid":{"rendered":"http:\/\/biochemistry.isc.chubu.ac.jp\/labo\/suzuki\/?p=1045"},"modified":"2024-02-20T11:43:07","modified_gmt":"2024-02-20T02:43:07","slug":"post-1045","status":"publish","type":"post","link":"http:\/\/biochemistry.isc.chubu.ac.jp\/labo\/suzuki\/archives\/1045","title":{"rendered":"Javascript\u3067\u30aa\u30bb\u30ed\u3092\u3064\u304f\u308b \u7b2c3\u56de"},"content":{"rendered":"
Javascript\u3067\u30aa\u30bb\u30ed\u3092\u3064\u304f\u308b \u7b2c1\u56de
\n<\/a><\/h5>\n
Javascript\u3067\u30aa\u30bb\u30ed\u3092\u3064\u304f\u308b \u7b2c2\u56de
\n<\/a><\/h5>\n

\u3084\u308a\u76f4\u3057(\u5f85\u3063\u305f)\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b<\/h2>\n

\u4e00\u3064\u524d\u306e\u72b6\u614b\u306b\u623b\u3059\u306b\u306f\u3001\u524d\u306e\u72b6\u614b\u3092\u8a18\u9332\u3057\u3066\u304a\u3044\u3066\u3001\u305d\u308c\u3092\u76e4\u306b\u53cd\u6620\u3059\u308c\u3070\u3044\u3044\u3067\u3059\u3002\u76e4\u5168\u4f53\u306e\u77f3\u306e\u914d\u7f6e\u3092\u8a18\u9332(save)\u3068\u305d\u306e\u8a18\u9332\u3092\u53cd\u6620(load)\u3059\u308b\u6a5f\u80fd\u3092\u3064\u304f\u308a\u307e\u3059\u3002
\n\u76e4\u5168\u4f53\u3092\u8868\u3059\u30af\u30e9\u30b9\u3092\u4f5c\u6210\u3057\u3001\u305d\u308c\u306b\u5bfe\u3057\u3066save\u3068load\u30e1\u30bd\u30c3\u30c9\u3092\u547c\u3073\u51fa\u3059\u3088\u3046\u306b\u3057\u307e\u3059\u3002
\n\u3053\u3053\u307e\u3067\u4f5c\u3063\u305f\u30d7\u30ed\u30b0\u30e9\u30e0\u3067\u306f\u77f3\u3092\u3072\u3063\u304f\u308a\u8fd4\u3059\u305f\u3073\u306bMasu\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u3064\u304f\u3063\u3066\u3044\u307e\u3059\u304c\u300164\u30de\u30b9\u306b\u5bfe\u5fdc\u3059\u308b\u3082\u306e\u3092\u3064\u304f\u3063\u3066\u304a\u3044\u3066\u58ca\u3055\u306a\u3044\u3088\u3046\u306b\u5909\u66f4\u3057\u307e\u3057\u305f\u3002<\/p>\n

Masu\u30af\u30e9\u30b9\u306e\u5b9a\u7fa9 (Masu.js)<\/h4>\n
class Masu {\n    constructor (board, r, c){\n        this.r = r;\n        this.c = c;\n        this.board = board;\n    }\n\n    appendTo(tr){\n        \/\/ click\u30a4\u30d9\u30f3\u30c8\u3067\u5b9f\u884c\u3055\u308c\u308b\u95a2\u6570\u5185\u3067\u306fthis\u306f\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u53c2\u7167\u3059\u308b\u3002\n        \/\/ \u305d\u306e\u305f\u3081Masu\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u30a2\u30af\u30bb\u30b9\u3067\u304d\u306a\u3044\u3002\n        \/\/ Masu\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b\u305f\u3081\u306bself\u5909\u6570\u3092\u3064\u304f\u308b\u3002\n        var self = this;\n\n        this.td = $('<td><div class="none"><\/div><\/td>')\n            .click(function (e){  \/\/ td\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u3068\u304d\u306e\u52d5\u4f5c\n                var masu = self.board.masu(self.r, self.c);\n                if(masu.ishi() == ISHI_NONE){\n                    var count = masu.set(ishi).roundReverse(false);\n                    if(count > 0){\n                        masu.roundReverse(true);\n                        ishi *= -1;\n                        self.board.update();\n                    }else{\n                        masu.set(ISHI_NONE);\n                    }\n                }\n            })\n        ;\n        tr.append(this.td);\n        return this;\n    }\n\n    ishi (){\n        var div = $('div', this.td);\n        return div.hasClass('black') ? ISHI_BLACK : (div.hasClass('white') ? ISHI_WHITE : ISHI_NONE);\n    }\n\n    set (ishi){\n        var div = $('div', this.td);  \/\/ \u30af\u30e9\u30b9\u3092\u5909\u66f4\u3059\u308bdiv\u8981\u7d20\u3092\u53d6\u5f97\n        div.removeClass('white').removeClass('black').addClass('none');\n\n        div.addClass(ishi == ISHI_NONE ? 'none' : (ishi == ISHI_BLACK ? 'black' : 'white'));\n        return this;\n    }\n\n    roundReverse(exec){\n        var count = 0;\n        for(var dr of [-1, 0, 1]){\n            for(var dc of [-1, 0, 1]){\n                if(dr == 0 && dc == 0) continue;\n                count += this.reverse(0, this, dc, dr, exec);\n            }\n        }\n        return count;\n    }\n\n    reverse (count, a0, dr, dc, exec){\n        try{\n            var neighbor = this.board.masu(this.r + dr, this.c + dc);\n\n            if(ISHI_NONE == neighbor.ishi()) return 0;\n            if(a0.ishi() != neighbor.ishi()) count = neighbor.reverse(count + 1, a0, dr, dc, exec);\n\n            if(exec && count > 0){\n                this.set(a0.ishi());\n            }\n            return count;\n\n        \/\/ \u76e4\u9762\u306e\u5916\u306e\u3068\u304d0\u3092\u8fd4\u3059\n        }catch(e){\n            return 0;\n        }\n    }\n}<\/pre>\n
Board\u30af\u30e9\u30b9\u306e\u5b9a\u7fa9 (Board.js)<\/h4>\n
class Board {\n    constructor (table){  \/\/ TABLE\u30bf\u30b0\u3092\u3046\u3051\u3068\u3063\u3066\u3001\u305d\u308c\u306b\u30de\u30b9\u76ee\u3092\u3044\u308c\u308b\n        this.masus = [];\n\n        for(var r = 0 ; r < 8 ; r ++){\n            var tr = $("<tr>");\n            this.masus[r] = [];\n            for(var c = 0 ; c < 8 ; c ++){\n                this.masus[r].push(new Masu(this, r, c).appendTo(tr));\n            }\n            table.append(tr);\n        }\n\n        \/\/ \u521d\u671f\u914d\u7f6e\n        this.set(3, 3, ISHI_BLACK)\n            .set(4, 4, ISHI_BLACK)\n            .set(3, 4, ISHI_WHITE)\n            .set(4, 3, ISHI_WHITE)\n        ;\n    }\n\n    masu (r, c){\n        r = parseInt(r); c = parseInt(c);\n        if(r < 0 || r >= 8 || c < 0 || c >= 8) throw 'out of board';\n        return this.masus[r][c];\n    }\n\n    \/\/ \u77f3\u3092\u7f6e\u304f(\u77f3\u3092\u8fd4\u3055\u306a\u3044)\n    set (r, c, ishi){\n        this.masu(r, c).set(ishi);\n        return this;\n    }\n\n    \/\/ \u77f3\u3092\u7f6e\u304f(\u77f3\u3092\u8fd4\u3059)\n    put (r, c){\n        this.masu(r, c).td.click();\n        return this;\n    }\n\n    \/\/ \u76e4\u306e\u72b6\u614b\u3092\u4fdd\u5b58\u3059\u308b\n    save (){\n        return this.masus.map(function (row, r){\n            return row.map(function (masu, c){\n                return masu.ishi()\n            });\n        });\n    }\n\n    \/\/ \u76e4\u306e\u72b6\u614b\u3092\u53cd\u6620\u3059\u308b\n    load (data){\n        var board = this;\n        data.map(function (row, r){\n            row.map(function (ishi, c){\n                board.set(r, c, ishi);\n            })\n        });\n        return this;\n    }\n\n    \/\/ \u77f3\u304c\u7f6e\u304b\u308c\u305f\u3068\u304d\u306b\u547c\u3070\u308c\u308b\n    update (){\n    }\n}<\/pre>\n
othello1.js<\/h4>\n
const ISHI_BLACK = 1;\nconst ISHI_WHITE = -1;\nconst ISHI_NONE = 0;\n\nvar ishi = ISHI_BLACK;  \/\/ \u77f3\u306e\u767d\u9ed2\n\njQuery(function (){\n    var board = new Board($('table#board'));\n    var history = [board.save()];\n    var history_index = 0;\n\n    $('input#go').click(function (e){\n        if(history[history_index + 1]){\n            board.load(history[++ history_index]);\n            ishi = (-1) ** history_index;\n            refresh();\n        }\n    });\n\n    $('input#back').click(function (e){\n        if(history[history_index - 1]){\n            board.load(history[-- history_index]);\n            ishi = (-1) ** history_index;\n            refresh();\n        }\n    });\n\n    board.update = function (){\n        if(history_index < history.length - 1){\n            history = history.slice(0, history_index + 1);\n        }\n        history.push(board.save());\n        history_index ++;\n        refresh();\n    };\n\n    function refresh(){\n        $('div#status').html((history_index + 1) + '\u624b\u76ee ' + (ishi == ISHI_BLACK ? '\u9ed2' : '\u767d') + '\u306e\u756a');\n    }\n    \/\/\t\u30c6\u30b9\u30c8\n    \/\/board.put(3,5).put(4,5).put(5,5).put(2,3);\n});<\/pre>
\n\u4e0b\u306b\u8868\u793a\u3055\u308c\u306a\u3044\u3068\u304d\u306f\u3053\u3053\u3092\u30af\u30ea\u30c3\u30af(\u5225\u30a6\u30a3\u30f3\u30c9\u30a6\u304c\u958b\u304d\u307e\u3059)<\/a>
\n