PythonでWEBアプリの三目並べを作る（改良品：FlaskとBrythonを利用）

はじめに

２戦目の初期駒と先攻後攻を変更しました。「もう一回遊ぶ」で持ち駒をランダムにしてましたが赤と青の差があったので、赤と青の持ち駒は同じにしました。先攻が圧倒的に有利なので負けた方を次戦の先攻にしました。

変更前のソースコード

    # ゲームの初期化
    def initgame(self, event):
        if document["btn_text"].textContent != "もう一回遊ぶ":
            alert(self.board)  # テスト表示
            return

        #alert(self.board)  # テスト表示
        # 盤面を初期化
        self.board = [0] * 9
        for square in document.select(".square"):
            square.classList.remove("blue_s")
            square.classList.remove("blue_m")
            square.classList.remove("blue_l")
            square.classList.remove("red_s")
            square.classList.remove("red_m")
            square.classList.remove("red_l")
        document["win_msg"].style.display = "none"
        # 持ち駒の初期化
        for i in range(12):
            document["box"+str(i+1)].classList.remove("red_s")
            document["box"+str(i+1)].classList.remove("red_m")
            document["box"+str(i+1)].classList.remove("red_l")
            document["box"+str(i+1)].classList.remove("blue_s")
            document["box"+str(i+1)].classList.remove("blue_m")
            document["box"+str(i+1)].classList.remove("blue_l")

            #num = random.randint(1, 3)
            n = random.randrange(6)
            if i < 6 and n <= 2:
                document["box"+str(i+1)].classList.add("red_s")
            if i < 6 and (n == 3 or n == 4):
                document["box"+str(i+1)].classList.add("red_m")
            if i < 6 and n == 5:
                document["box"+str(i+1)].classList.add("red_l")
            if i >= 6 and n <= 2:
                document["box"+str(i+1)].classList.add("blue_s")
            if i >= 6 and (n == 3 or n == 4):
                document["box"+str(i+1)].classList.add("blue_m")
            if i >= 6 and n == 5:
                document["box"+str(i+1)].classList.add("blue_l")


            '''
            if i == 0 or i == 3:
                document["box"+str(i+1)].classList.add("red_s")
            if i == 1 or i == 4:
                document["box"+str(i+1)].classList.add("red_m")
            if i == 2 or i == 5:
                document["box"+str(i+1)].classList.add("red_l")
            if i == 6 or i == 9:
                document["box"+str(i+1)].classList.add("blue_s")
            if i == 7 or i == 10:
                document["box"+str(i+1)].classList.add("blue_m")
            if i == 8 or i == 11:
                document["box"+str(i+1)].classList.add("blue_l")
            '''
        
        # ゲーム開始
        self.state = "青の番"

後半の「’’’」～「’’’」のコメント部分は、初期駒と同じ小中大２つずつのままです。

変数「ｎ」を整数０～５のランダムにして、ｎが０，１，２の時は「小」の駒、ｎが３，４の時は「中」の駒、ｎが５の時は「大」の駒にしています。

最後にステータスを「青の番」にして、先攻は青に固定しています。

変更後のソースコード

    # ゲームの初期化
    def initgame(self, event):
        if document["btn_text"].textContent != "もう一回遊ぶ":
            alert(self.board)  # テスト表示
            return

        # 盤面を初期化
        self.board = [0] * 9
        for square in document.select(".square"):
            square.classList.remove("blue_s")
            square.classList.remove("blue_m")
            square.classList.remove("blue_l")
            square.classList.remove("red_s")
            square.classList.remove("red_m")
            square.classList.remove("red_l")
        document["win_msg"].style.display = "none"
        # 持ち駒の初期化
        for i in range(6):
            document["box"+str(i+1)].classList.remove("red_s")
            document["box"+str(i+1)].classList.remove("red_m")
            document["box"+str(i+1)].classList.remove("red_l")
            document["box"+str(i+1)].classList.remove("blue_s")
            document["box"+str(i+1)].classList.remove("blue_m")
            document["box"+str(i+1)].classList.remove("blue_l")

            document["box"+str(i+7)].classList.remove("red_s")
            document["box"+str(i+7)].classList.remove("red_m")
            document["box"+str(i+7)].classList.remove("red_l")
            document["box"+str(i+7)].classList.remove("blue_s")
            document["box"+str(i+7)].classList.remove("blue_m")
            document["box"+str(i+7)].classList.remove("blue_l")

            n = random.randrange(6)
            if n <= 2:
                document["box"+str(i+1)].classList.add("red_s")
                document["box"+str(i+7)].classList.add("blue_s")
            if n == 3 or n == 4:
                document["box"+str(i+1)].classList.add("red_m")
                document["box"+str(i+7)].classList.add("blue_m")
            if n == 5:
                document["box"+str(i+1)].classList.add("red_l")
                document["box"+str(i+7)].classList.add("blue_l")
        
        # ゲーム開始
        #n = random.randrange(2)
        #if n == 0:
        if document["win_msg"].textContent == "赤の勝ちです":
            self.state = "青の番"
            # テキストを変更
            document["turn_text"].style.color = "#00b0f0"
            # 透明度を解除（赤駒を全て）
            for motigoma in document.select(".red_s"):
                motigoma.style.opacity = 1
            for motigoma in document.select(".red_m"):
                motigoma.style.opacity = 1
            for motigoma in document.select(".red_l"):
                motigoma.style.opacity = 1
            # 透明度を設定（青駒を全て）
            for motigoma in document.select(".blue_s"):
                self.style = motigoma.style
                self.style.opacity = 0.5
            for motigoma in document.select(".blue_m"):
                self.style = motigoma.style
                self.style.opacity = 0.5
            for motigoma in document.select(".blue_l"):
                self.style = motigoma.style
                self.style.opacity = 0.5
        else:
            self.state = "赤の番"
            # テキストを変更
            document["turn_text"].style.color = "#ff0000"
            # 透明度を解除（青駒を全て）
            for motigoma in document.select(".blue_s"):
                style = motigoma.style
                style.opacity = 1
            for motigoma in document.select(".blue_m"):
                style = motigoma.style
                style.opacity = 1
            for motigoma in document.select(".blue_l"):
                style = motigoma.style
                style.opacity = 1
            # 透明度を設定（赤駒を全て）
            for motigoma in document.select(".red_s"):
                self.style = motigoma.style
                self.style.opacity = 0.5
            for motigoma in document.select(".red_m"):
                self.style = motigoma.style
                self.style.opacity = 0.5
            for motigoma in document.select(".red_l"):
                self.style = motigoma.style
                self.style.opacity = 0.5

変数「ｎ」を整数０～５のランダムにして「小・中・大」の駒を決めるところは一緒ですが、赤と青の駒を同じにして不公平をなくしました。

先攻後攻に関しては、ランダムでもやってみたのですがランダムはやめて、負けた方を先攻にすることにしました。

おまけ

おもしろそうだったので「じゃんけん三目並べ」を作ろうとしたのですが、ゲーム性がなく思ったより面白くなかったので途中でやめました。いいアイデアがあれば改良するかもしれません。

次回は、駒をドラッグできるようにしてスマホ対応にもしたいと思います。ソースコードを一から見直して作り直します。