オセロAIのwebアプリを作ろうと考えています.
オセロの手の思考はPythonで行い,画面の表示はHTML, JavaScriptを用いて行う予定です.
そこで,人の打つ手をJavaScriptからPythonのFlaskに送信したいのですが,どのようにすればできるのでしょうか?調べてもFlaskからJavaScriptにデータを送信する方法しか見つからなかったので,教えていただきたいです.
Python3
1from flask import Flask, render_template, request, session, url_for 2import numpy as np 3 4app = Flask(__name__) 5board = np.random.randint(0, 3, (8, 8)).tolist() 6 7@app.route('/', methods=['GET', 'POST']) 8def index(): 9 print(board) 10 return render_template('index.html', board=board) 11 12 13@app.route('/play', methods=['GET', 'POST']) 14def play(): 15 if request.method == 'POST': 16 play = request.args.get("index") 17 print(play) 18 if play: 19 print(int(play)) 20 board[play//8][play%8] = 1 21 return render_template('index.html', board=board) 22 23 24if __name__ == '__main__': 25 app.run()
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Othello</title> 7 <style> 8 9 .table { 10 position:absolute; 11 top: 50%; 12 left: 50%; 13 margin-top: -257px; 14 margin-left: -257px; 15 } 16 17 .table td { 18 width: 60px; 19 height: 60px; 20 background-color: #ddd; 21 text-align: center; 22 font-size: 3.8vw; 23 cursor: pointer; 24 } 25 26 .list { 27 max-width: 750px; 28 margin: 0 auto; 29 list-style: none; 30 background-color: #fff; 31 padding: 0; 32 } 33 34 .list-item { 35 display: flex; 36 display: -webkit-flex; 37 -webkit-justify-content: flex-start; 38 justify-content: flex-start; 39 border-bottom: 2px solid #ddd; 40 } 41 .list-item > * { 42 width: 50px; 43 padding: 5px 10px; 44 text-align: center; 45 } 46 .list-item *:last-child { 47 -webkit-flex-grow: 1; 48 flex-grow: 1; 49 } 50 </style> 51 <script src="static/js/script.js"></script> 52</head> 53<body> 54 <p id="index">index</p> 55 <table class="table" id="board"> 56 {% for col in board %} 57 <tr> 58 {% for row in col %} 59 {% if row == 1 %} 60 <td>●</td> 61 {% elif row == 2 %} 62 <td>◯</td> 63 {% elif row == -1 %} 64 <td>?</td> 65 {% else %} 66 <td></td> 67 {% endif %} 68 {% endfor %} 69 </tr> 70 {% endfor %} 71 </table> 72</body> 73</html>
javascript
1window.onload = function(){ 2 3 var $tableElements = document.getElementsByTagName('td'); 4 let order = true; 5 let othelloWhte = '◯'; 6 let othelloBlack = '●'; 7 let othelloColor = othelloBlack; 8 var index_show = document.getElementById("index"); 9 10 for (let $i=0; $i < $tableElements.length; $i++) { 11 $tableElements[$i].addEventListener('click', function(){ 12 let tableElements = [].slice.call($tableElements); 13 let index = tableElements.indexOf(this); 14 index_show.innerHTML = index; 15 putOthello(index); 16 changeOrder(); 17 }); 18 } 19 20 21 function putOthello(index) { 22 $tableElements[index].innerHTML = othelloColor; 23 } 24 function changeOrder() { 25 if (order) { 26 othelloColor = othelloWhte; 27 order = false; 28 } else { 29 othelloColor = othelloBlack; 30 order = true; 31 } 32 } 33}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/25 02:51