-
22-09-19_pythonmain 2022. 9. 19. 12:44
지난시간에 이어서
온라인으로 테트리스 하려고 일단 틀을 만들거예요
function myinit(){ const canvas = document.getElementById('mycan'); const ctx = canvas.getContext('2d'); for(i=0;i<25;i++){ for(j=0;j<10;j++){ ctx.rect(j*10, i*10, 9, 9); } } ctx.fill(); }네모로 모양 채우기
요렇게 나옵니다 캔버스의 요소는.. 그림판과 같음...
function myinit(){ const canvas = document.getElementById('mycan'); const ctx = canvas.getContext('2d'); for(i=0;i<25;i++){ for(j=0;j<10;j++){ if(stack2D[i][j] == 0){ //색상 지정 ctx.fillStyle = 'red'; //한줄씩 반복해서 채워그리기 ctx.fillRect(j*10, i*10, 9, 9); } if(stack2D[i][j] == 1){ ctx.fillStyle = 'orange'; ctx.fillRect(j*10, i*10, 9, 9); } } } }이릏게 수정해주면
이릏게 블럭모양 맞춰서 나옴 ---
네트워크로 할거니까
이러헥 수정 ---
<body onload="myinit()"> Mission : <div id="my_mission">10</div> <table border="1px"> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> </table> </body>body를 이렇게 수정해주고
function myrender(){ //tds를 불러와서 10진수를 이용하는 방법1, 이걸 선호 //td2D를 만들어서 만들어 주는 방법2 //색은 0, 1~7(살아있는 도형), 11~17(stack된 도형) var tds = document.querySelectorAll(".mydisp");myrender에 그려주는 곳 지정을 mydisp class로 지정해준다
--
오른쪽은 온라인으로 참여한 다른사람들 화면, 왼쪽은 내 화면 나오게 만들어보자 
이렇게 해줬는데요
<body onload="myinit()"> <table border="1px"> <tr> <td style="width:280px;"> Mission : <div id="my_mission">10</div> <table border="1px"> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> </table> </td> <td> <table border="1px"> <tr> <td style="width:50px"><div class="user_id" /></td> <td style="width:50px"><div class="user_id" /></td> <td style="width:50px"><div class="user_id" /></td> <td style="width:50px"><div class="user_id" /></td> <td style="width:50px"><div class="user_id" /></td> <td style="width:50px"><div class="user_id" /></td> <td style="width:50px"><div class="user_id" /></td> </tr> <tr> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> </tr> <tr> <td style="width:50px"><div class="user_id" /></td> <td style="width:50px"><div class="user_id" /></td> <td style="width:50px"><div class="user_id" /></td> <td style="width:50px"><div class="user_id" /></td> <td style="width:50px"><div class="user_id" /></td> <td style="width:50px"><div class="user_id" /></td> <td style="width:50px"><div class="user_id" /></td> </tr> <tr> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> </tr> <tr> <td style="width:50px"><div class="user_id" /></td> <td style="width:50px"><div class="user_id" /></td> <td style="width:50px"><div class="user_id" /></td> <td style="width:50px"><div class="user_id" /></td> <td style="width:50px"><div class="user_id" /></td> <td style="width:50px"><div class="user_id" /></td> <td style="width:50px"><div class="user_id" /></td> </tr> <tr> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> </tr> <tr> <td style="width:50px"><div class="user_id" /></td> <td style="width:50px"><div class="user_id" /></td> <td style="width:50px"><div class="user_id" /></td> <td style="width:50px"><div class="user_id" /></td> <td style="width:50px"><div class="user_id" /></td> <td style="width:50px"><div class="user_id" /></td> <td style="width:50px"><div class="user_id" /></td> </tr> <tr> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> </tr> </table> </td> </tr> </table> </body>코드는 좀 어지럽네여^^ 어려운건아닌데 어지러움
---
web socket 분석
---
# # chat/consumers.py # import json # # from channels.generic.websocket import WebsocketConsumer # # # class ChatConsumer(WebsocketConsumer): # def connect(self): # self.accept() # # def disconnect(self, close_code): # pass # # def receive(self, text_data): # text_data_json = json.loads(text_data) # message = text_data_json["message"] # # self.send(text_data=json.dumps({"message": message})) # chat/consumers.py import json from asgiref.sync import async_to_sync from channels.generic.websocket import WebsocketConsumer class ChatConsumer(WebsocketConsumer): def connect(self): print("ChatConsumer","connect") self.room_name = self.scope["url_route"]["kwargs"]["room_name"] self.room_group_name = "chat_%s" % self.room_name # Join room group async_to_sync(self.channel_layer.group_add)( self.room_group_name, self.channel_name ) self.accept() def disconnect(self, close_code): print("ChatConsumer","disconnect") # Leave room group async_to_sync(self.channel_layer.group_discard)( self.room_group_name, self.channel_name ) # Receive message from WebSocket def receive(self, text_data): print("ChatConsumer","receive") text_data_json = json.loads(text_data) message = text_data_json["message"] # Send message to room group async_to_sync(self.channel_layer.group_send)( self.room_group_name, {"type": "chat_message", "message": message} ) # Receive message from room group def chat_message(self, event): print("ChatConsumer","chat_message") message = event["message"] # Send message to WebSocket self.send(text_data=json.dumps({"message": message}))여기서 뭘 써줘야 하는지 분석하게 print로 뽑아보자
---
---
에코서버 : 나를 포함한 서버에 붙은 모든 사람에게 동등하게 보내줌.
+ 나 게임참가했어요 (message, login +이름(parameter) )
+ 나 게임시작할거야 공유 (gamestart //문자열 값에 통신 약속 해 주는게 가장 좋다...)
+ 내 화면 공유 (myScreen, scrin정보 공유 + 이름)
+ 나 이겼어 메세지 공유 (win, + 이름(parameter)
+ 내 점수도 나눠주자 아니 하지 말까.....하자 걍..
- json에 담아서 공유
- 위의 정보들을 공유할 때 구분자. split으로 잘 짤리는 거로...( : )
---
이렇게 하면 이름을 순서대로 집어넣을 수 있다
var u_idx = 0; function rev_login(my_id){ console.log("my_id",my_id); var objs = document.querySelectorAll(".user_id"); objs[u_idx].innerHTML=my_id; u_idx++; }
이릏게 근데 이렇게 하면 유저 중복확인이 안되니까, 유저아이디를 배열로 넣어봅시다
var user_ids = []; function rev_login(my_id){ console.log("my_id",my_id); //증복확인하자, ture, false보다는 -1반환하는 숫자로 하는게 낫다..? //indexOf가 못찾으면 -1 반환하는 것 처럼... //논리적으로 왜 -1이 더 나은가 var idx_dupl = -1; for(var i=0; i<user_ids.length; i++){ if(user_ids[i]==my_id){ idx_dupl =i; break; } } if(idx_dupl == -1){ user_ids.push(my_id); } console.log("idx_dupl",idx_dupl); var objs = document.querySelectorAll(".user_id"); for(var i=0; i<user_ids.length; i++){ objs[i].innerHTML = user_ids[i] } }이렇게 하면, 중복되지 않는 이름은 방에 넣어주고, 중복되면 -1이 아닌 다른 값을 반환함
중복이 안 되면 이름이 입력되고, 중복되면 이름 입력이 안 됨
버튼을 눌렀을 때 게임 시작하는 메서드를 만들어 주면 (대표로 한명이 누르기로 하자)
chatSocket.onmessage = function(e) { const data = JSON.parse(e.data); var message = data.message; //메세지 짤라줘야 함 // ' : ' 을 기준으로 자르겠다 var arr_msg = message.split(":"); // : 기준으로 0번째 방은 : 앞의 내용인 login start win 등... //로그인 하는 메서드 호출 if(arr_msg[0]=="login"){ rev_login(arr_msg[1]); } //시작하는 메서드 호출 if(arr_msg[0]=="start"){ rev_start(); } }; function rev_start(){ flagIng = true; }
이렇게 접속한 곳들에서 동시에 시작이 된다 ---
이제 실시간으로 옆에 그려주는게 숙제에요
---오늘의코드 정리
from django.shortcuts import render def index(request): return render(request, 'chat/index.html') # Create your views here. def room(request, room_name): return render(request, "chat/room.html", {"room_name": room_name}) def tetris(request,room_name): return render(request, "chat/tetris_network.html", {"room_name": room_name}) def room_tetris(request,room_name): return render(request, "chat/room_tetris.html", {"room_name": room_name})views.py
from django.urls import path from chat.views import index from . import views urlpatterns = [ path('' , index , name='index'), # path("<str:room_name>/", views.room, name="room"), path("<str:room_name>/", views.tetris, name="room"), path("<str:room_name>/", views.room_tetris, name="room"), ]urls.py
# # chat/consumers.py # import json # # from channels.generic.websocket import WebsocketConsumer # # # class ChatConsumer(WebsocketConsumer): # def connect(self): # self.accept() # # def disconnect(self, close_code): # pass # # def receive(self, text_data): # text_data_json = json.loads(text_data) # message = text_data_json["message"] # # self.send(text_data=json.dumps({"message": message})) # chat/consumers.py import json from asgiref.sync import async_to_sync from channels.generic.websocket import WebsocketConsumer class ChatConsumer(WebsocketConsumer): def connect(self): print("ChatConsumer","connect") self.room_name = self.scope["url_route"]["kwargs"]["room_name"] self.room_group_name = "chat_%s" % self.room_name # Join room group async_to_sync(self.channel_layer.group_add)( self.room_group_name, self.channel_name ) self.accept() def disconnect(self, close_code): print("ChatConsumer","disconnect") # Leave room group async_to_sync(self.channel_layer.group_discard)( self.room_group_name, self.channel_name ) # Receive message from WebSocket def receive(self, text_data): print("ChatConsumer","receive") text_data_json = json.loads(text_data) message = text_data_json["message"] # Send message to room group # 보낼때 비동기를 동기로 async_to_sync(self.channel_layer.group_send)( self.room_group_name, {"type": "chat_message", "message": message} ) # Receive message from room group #얘가 보내는 역할 def chat_message(self, event): print("ChatConsumer","chat_message") message = event["message"] # Send message to WebSocket self.send(text_data=json.dumps({"message": message}))consumers.py
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> //캔버스에 원 하나 그려보세요 var stack2D =[ [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [1,0,0,0,0, 0,0,0,0,0], [1,1,0,0,0, 0,0,0,0,0], [1,1,1,1,1, 1,1,1,1,0], [1,1,1,1,1, 1,1,1,1,0], [1,1,1,1,1, 1,1,1,1,0], [1,1,1,1,1, 1,1,1,1,0] ]; function myinit(){ const canvas = document.getElementById('mycan'); const ctx = canvas.getContext('2d'); for(i=0;i<25;i++){ for(j=0;j<10;j++){ if(stack2D[i][j] == 0){ //색상 지정 ctx.fillStyle = 'red'; //한줄씩 반복해서 채워그리기 ctx.fillRect(j*10, i*10, 9, 9); } if(stack2D[i][j] == 1){ ctx.fillStyle = 'orange'; ctx.fillRect(j*10, i*10, 9, 9); } } } } function myrender(){ for(var j=0;j<10;j++){ if(stack2D[i][j] == 0){ } } } </script> </head> <body onload="myinit()"> <canvas id="mycan" width="400px" height="400px"> </canvas> </body> </html>mycanvas3.html
<html> <head> <title>테트리스</title> <style type="text/css"> td{ width: 20px; height: 20px; } z </style> <script type="text/javascript"> class Block { constructor() { this.type = 2; this.status = 1; //공통값이 1이..default니까.. //이번에 i가 회전 중심점 this.i =2; this.j =2; } } //게임 진행여부 true면 진행하도록, false면 진행하지 않도록 var flagIng = false; var b = new Block(); var block2D =[ [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0] ]; var stack2D =[ [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [1,0,0,0,0, 0,0,0,0,0], [1,1,0,0,0, 0,0,0,0,0], [1,1,1,1,1, 1,1,1,1,0], [1,1,1,1,1, 1,1,1,1,0], [1,1,1,1,1, 1,1,1,1,0], [1,1,1,1,1, 1,1,1,1,0] ]; var scrin2D =[ [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0], [0,0,0,0,0, 0,0,0,0,0] ]; function setBlock2DFromBlock(){ //시작하면서 초기화 해 줌 : 블럭을 이동할 때 마다 새로 그리니까, 이전 흔적이 남지 않음 //지나간 흔적을 기본배경색으로 바꾸는 역할 for(var i=0; i<25; i++){ for(var j=0;j<10;j++){ block2D[i][j] = 0; } } //1번도형 if(b.type ==1){ block2D[b.i ][b.j ] = b.type; block2D[b.i ][b.j+1 ] = b.type; block2D[b.i+1 ][b.j ] = b.type; block2D[b.i+1 ][b.j+1 ] = b.type; } //2번도형 if(b.type ==2){ if(b.status ==1){ //가로 1자 block2D[b.i ][b.j-1 ] = b.type; block2D[b.i ][b.j ] = b.type; block2D[b.i ][b.j+1 ] = b.type; block2D[b.i ][b.j+2 ] = b.type; } if(b.status ==2){ //세로 1자 block2D[b.i-1 ][b.j ] = b.type; block2D[b.i ][b.j ] = b.type; block2D[b.i+1 ][b.j ] = b.type; block2D[b.i+2 ][b.j ] = b.type; } } //3번도형 if(b.type ==3){ if(b.status ==1){ block2D[b.i ][b.j+1 ] = b.type; block2D[b.i ][b.j ] = b.type; block2D[b.i+1 ][b.j ] = b.type; block2D[b.i+1 ][b.j-1 ] = b.type; } if(b.status ==2){ block2D[b.i-1 ][b.j ] = b.type; block2D[b.i ][b.j ] = b.type; block2D[b.i ][b.j+1 ] = b.type; block2D[b.i+1 ][b.j+1 ] = b.type; } } //4번도형 if(b.type ==4){ if(b.status ==1){ block2D [b.i ][b.j-1 ] = b.type; block2D[b.i ][b.j ] = b.type; block2D[b.i+1 ][b.j ] = b.type; block2D[b.i+1 ][b.j+1 ] = b.type; } if(b.status ==2){ block2D[b.i-1 ][b.j+1 ] = b.type; block2D[b.i ][b.j+1 ] = b.type; block2D[b.i ][b.j ] = b.type; block2D[b.i+1 ][b.j ] = b.type; } } //5번도형 if(b.type ==5){ if(b.status ==1){ block2D[b.i-1 ][b.j ] = b.type; block2D[b.i ][b.j ] = b.type; block2D[b.i+1 ][b.j ] = b.type; block2D[b.i+1 ][b.j+1 ] = b.type; } if(b.status ==2){ block2D[b.i ][b.j-1 ] = b.type; block2D[b.i ][b.j ] = b.type; block2D[b.i ][b.j+1 ] = b.type; block2D[b.i-1 ][b.j+1 ] = b.type; } if(b.status ==3){ block2D[b.i-1 ][b.j-1 ] = b.type; block2D[b.i-1 ][b.j ] = b.type; block2D[b.i ][b.j ] = b.type; block2D[b.i+1 ][b.j ] = b.type; } if(b.status ==4){ block2D[b.i ][b.j-1 ] = b.type; block2D[b.i ][b.j ] = b.type; block2D[b.i ][b.j+1 ] = b.type; block2D[b.i+1 ][b.j-1 ] = b.type; } } //6번도형 if(b.type ==6){ if(b.status ==1){ block2D[b.i-1 ][b.j ] = b.type; block2D[b.i ][b.j ] = b.type; block2D[b.i+1 ][b.j ] = b.type; block2D[b.i+1 ][b.j-1 ] = b.type; } if(b.status ==2){ block2D[b.i ][b.j-1 ] = b.type; block2D[b.i ][b.j ] = b.type; block2D[b.i ][b.j+1 ] = b.type; block2D[b.i+1 ][b.j+1 ] = b.type; } if(b.status ==3){ block2D[b.i-1 ][b.j ] = b.type; block2D[b.i ][b.j ] = b.type; block2D[b.i+1 ][b.j ] = b.type; block2D[b.i-1 ][b.j+1 ] = b.type; } if(b.status ==4){ block2D[b.i-1 ][b.j-1 ] = b.type; block2D[b.i ][b.j-1 ] = b.type; block2D[b.i ][b.j ] = b.type; block2D[b.i ][b.j+1 ] = b.type; } } //7번도형 if(b.type ==7){ if(b.status ==1){ block2D[b.i-1 ][b.j ] = b.type; block2D[b.i ][b.j ] = b.type; block2D[b.i ][b.j-1 ] = b.type; block2D[b.i ][b.j+1 ] = b.type; } if(b.status ==2){ block2D[b.i-1 ][b.j ] = b.type; block2D[b.i ][b.j ] = b.type; block2D[b.i+1 ][b.j ] = b.type; block2D[b.i ][b.j+1 ] = b.type; } if(b.status ==3){ block2D[b.i ][b.j-1 ] = b.type; block2D[b.i ][b.j ] = b.type; block2D[b.i ][b.j+1 ] = b.type; block2D[b.i+1 ][b.j ] = b.type; } if(b.status ==4){ block2D[b.i ][b.j-1 ] = b.type; block2D[b.i ][b.j ] = b.type; block2D[b.i-1 ][b.j ] = b.type; block2D[b.i+1 ][b.j ] = b.type; } } } function setScrin2D(){ //시작하면서 초기화 해 줌 : 블럭을 이동할 때 마다 새로 그리니까, 이전 흔적이 남지 않음 //지나간 흔적을 기본배경색으로 바꾸는 역할 for(var i=0; i<25; i++){ for(var j=0;j<10;j++){ scrin2D[i][j] = 0; } } //block2D와 stack2D에 i,j값이 0보다 큰 경우에는 0이 아닌 값을 scrin2D에 넣어주기, 반복문 //block의 것을 scrin에 for(var i=0; i<25; i++){ for(var j=0;j<10;j++){ if(block2D[i][j]>0){ scrin2D[i][j] =block2D[i][j]; } } } //stack의 것을 scrin에 for(var i=0; i<25; i++){ for(var j=0;j<10;j++){ if(stack2D[i][j]>0){ scrin2D[i][j] =stack2D[i][j]; } } } } function myrender(){ //tds를 불러와서 10진수를 이용하는 방법1, 이걸 선호 //td2D를 만들어서 만들어 주는 방법2 //색은 0, 1~7(살아있는 도형), 11~17(stack된 도형) var tds = document.querySelectorAll(".mydisp"); for(var i=0; i<25; i++){ for(var j=0;j<10;j++){ if(scrin2D[i][j] == 0){ tds[i*10+j].style.backgroundColor = "white"; } //살아있는 도형 색상 if(scrin2D[i][j] == 1){ tds[i*10+j].style.backgroundColor = "#2E9AFE"; } if(scrin2D[i][j] == 2){ tds[i*10+j].style.backgroundColor = "#9F81F7"; } if(scrin2D[i][j] == 3){ tds[i*10+j].style.backgroundColor = "#81F781"; } if(scrin2D[i][j] == 4){ tds[i*10+j].style.backgroundColor = "#F5DA81"; } if(scrin2D[i][j] == 5){ tds[i*10+j].style.backgroundColor = "#FE2E2E"; } if(scrin2D[i][j] == 6){ tds[i*10+j].style.backgroundColor = "#FA58AC"; } if(scrin2D[i][j] == 7){ tds[i*10+j].style.backgroundColor = "#FFFF00"; } //쌓인 도형 색상 if(scrin2D[i][j] == 11){ tds[i*10+j].style.backgroundColor = "#0040FF"; } if(scrin2D[i][j] == 12){ tds[i*10+j].style.backgroundColor = "#9A2EFE"; } if(scrin2D[i][j] == 13){ tds[i*10+j].style.backgroundColor = "#81F781"; } if(scrin2D[i][j] == 14){ tds[i*10+j].style.backgroundColor = "#FFBF00"; } if(scrin2D[i][j] == 15){ tds[i*10+j].style.backgroundColor = "#B40404"; } if(scrin2D[i][j] == 16){ tds[i*10+j].style.backgroundColor = "#8A0868"; } if(scrin2D[i][j] == 17){ tds[i*10+j].style.backgroundColor = "#AEB404"; } } } } window.addEventListener("keydown", (e) => { //키를 누르면 호출 myclick(e); } ); function isCrushWall(){ //for문 돌려서 블럭의 갯수가 4개면 false ==충돌하지 않았다, //4개가 아니면 true ==충돌했다 반환하는 거 짜보기 //2중for문돌려서, 0보다 크면 false, 4보다 작으면 false var cnt = 0; //2중for문돌려서, 0보다 크면, count증가 for(var i=0; i<25; i++){ for(var j=0;j<10;j++){ if(block2D[i][j]>0){ cnt++; } } } if(cnt==4){ //for문 돌려서 블럭의 갯수가 4개면 false ==충돌하지 않았다, return false; }else{ //4개가 아니면 true ==충돌했다 반환하는 거 짜보기 return true; } } function isCrushStack(){ for(var i=0; i<25; i++){ for(var j=0;j<10;j++){ //한 칸이 stack 값과 block값을 동시에 갖는 경우 ==충돌한 경우 if(block2D[i][j]>0 && stack2D[i][j]>0){ return true; //충돌했다 } } } return false; //두개의 값을 동시에 갖지 않으면 ==충돌하지 않았다. } function moveBlock2DToStack2D(){ //stack으로 이동하면서 색도 바꿔줘야 하고 //stack으로 block을 이동도 시켜줘야함.. for(var i=0; i<25; i++){ for(var j=0;j<10;j++){ //0보다 크면 i,j에 있는걸 이동시켜준다.. if(block2D[i][j]>0){ stack2D[i][j] = block2D[i][j]+10; } } } } function myclick(e){ console.log(e); if(!flagIng) return ; var bakType = b.type; var bakStatus = b.status; var baki = b.i; var bakj = b.j; flagDown = false; //The function of the Using direction key if (e.code == 'ArrowUp') { changeStatus(); } if (e.code == 'ArrowDown') { b.i++; flagDown = true; } if (e.code == 'ArrowLeft') { b.j--; } if (e.code == 'ArrowRight') { b.j++; } //바닥과 부딛히는 경우의 변수 설정 var flagUnder =false; //call functions //바닥을 뚫고 나가면 에러가 나니까 try-catch처리하고, error시 충돌했다는 true반환 try { setBlock2DFromBlock(); } catch (error){ flagUnder = true; } // console.log(block2D); setScrin2D(); // console.log(scrin2D); //벽과 충돌하는 경우를 정의하자, 충돌 안하는 경우가 많으니 기본값 false var flagWall = isCrushWall(); // stack과 충돌하는 경우를 정의해보자 var flagStack = isCrushStack(); //충돌을 하나로 합침 var flagCrush = flagWall || flagStack || flagUnder; // console.log("flagCrush",flagCrush); //flagCrush가 true인 경우에 실행됨. if(flagCrush){ b.type = bakType; b.status = bakStatus; b.i = baki; b.j = bakj; setBlock2DFromBlock(); setScrin2D(); } if(flagCrush && flagDown){ moveBlock2DToStack2D(); //stack2D의 5라인에 닿으면 게임종료되게 if( stack2D[5][0]>0 || stack2D[5][1]>0 || stack2D[5][2]>0 || stack2D[5][3]>0 || stack2D[5][4]>0 || stack2D[5][5]>0 || stack2D[5][6]>0 || stack2D[5][7]>0 || stack2D[5][8]>0 || stack2D[5][9]>0 ){ alert("게임에서 졌습니다."); flagIng = false; } //10개짜리인거 없애주겠습니다.. //10개짜리가 몇개 있는지 var cnt10 = getCnt10(); var obj = document.querySelector("#my_mission"); var int_mission = parseInt(obj.innerText); int_mission = int_mission - cnt10; obj.innerText = int_mission; if(int_mission<1){ alert("게임에서 이겼습니다."); flagIng = false; } remove10(cnt10); console.log("cnt10",cnt10) //b.type 하고 set... b.type = parseInt(Math.random()*7)+1; b.status = 1; b.i = 1; b.j = 5; setBlock2DFromBlock(); setScrin2D(); } //버튼 클릭할 때 마다 나의 상태가 변하는데, 그 나의 스크린을 보여 주어야 함. //배열로 만들어 주는데, 문자열을 더해주면 ( +"") 문자열로 변함 //몇 번째 캔버스인지 찾아서 그림그려주면 되져 //함수에서 문자열 더해줘서, 2차원X, 1차원 배열로 넘어옴 fn_myscreen(); myrender(); console.log(stack2D); } function remove10(cnt10){ //stack2D비슷한거니까 s2D라고 명명해봅시다 var s2D =[]; for(var i=0; i<25; i++){ if( stack2D[i][0]>0 && stack2D[i][1]>0 && stack2D[i][2]>0 && stack2D[i][3]>0 && stack2D[i][4]>0 && stack2D[i][5]>0 && stack2D[i][6]>0 && stack2D[i][7]>0 && stack2D[i][8]>0 && stack2D[i][9]>0 ){ //pass }else{ s2D.push(stack2D[i]+""); } } for(var i=0; i<cnt10;i++){ s2D.unshift([0,0,0,0,0, 0,0,0,0,0]+""); } //지워진거 뺸 채로 새로 그려주기 for(var i=0; i<25; i++){ stack2D[i][0] = parseInt(s2D[i].split(",")[0]); stack2D[i][1] = parseInt(s2D[i].split(",")[1]); stack2D[i][2] = parseInt(s2D[i].split(",")[2]); stack2D[i][3] = parseInt(s2D[i].split(",")[3]); stack2D[i][4] = parseInt(s2D[i].split(",")[4]); stack2D[i][5] = parseInt(s2D[i].split(",")[5]); stack2D[i][6] = parseInt(s2D[i].split(",")[6]); stack2D[i][7] = parseInt(s2D[i].split(",")[7]); stack2D[i][8] = parseInt(s2D[i].split(",")[8]); stack2D[i][9] = parseInt(s2D[i].split(",")[9]); } console.log("cnt10",cnt10); console.log("s2D",s2D); } function getCnt10(){ //25번 돌아가면서 i의 모든 값이 0보다 크면 카운트.. var cnt =0; for(var i=0; i<25; i++){ if( stack2D[i][0]>0 && stack2D[i][1]>0 && stack2D[i][2]>0 && stack2D[i][3]>0 && stack2D[i][4]>0 && stack2D[i][5]>0 && stack2D[i][6]>0 && stack2D[i][7]>0 && stack2D[i][8]>0 && stack2D[i][9]>0 ){ cnt++; } } return cnt; } function mytime(){ myclick({code:'ArrowDown'}); setTimeout(mytime,2000) } function myinit(){ mytime(); } // The function of the change figure status when press 'UP'key function changeStatus(){ if(b.type == 2 || b.type ==3 || b.type==4){ if(b.status==1){ b.status =2; }else if(b.status==2){ b.status=1; } } if(b.type == 5 || b.type ==6 || b.type==7){ if(b.status==1){ b.status =2; }else if(b.status==2){ b.status=3; }else if(b.status==3){ b.status=4; }else if(b.status==4){ b.status=1; } } } </script> </head> <body onload="myinit()"> <table border="1px"> <tr> <td style="width:280px;"> <input style="width : 50px;" type="text" id="my_id"> <input type="button" value="참가" onclick="fn_login()"> <input type="button" value="게임시작" onclick="fn_start()""><br> Mission : <div id="my_mission">10</div> <table border="1px"> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> <tr> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> <td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /><td class="mydisp" /> </tr> </table> </td> <td> <table border="1px"> <tr> <td style="width:50px"><div class="user_id" /></td><div class="user_mission" /> <td style="width:50px"><div class="user_id" /></td><div class="user_mission" /> <td style="width:50px"><div class="user_id" /></td><div class="user_mission" /> <td style="width:50px"><div class="user_id" /></td><div class="user_mission" /> <td style="width:50px"><div class="user_id" /></td><div class="user_mission" /> <td style="width:50px"><div class="user_id" /></td><div class="user_mission" /> <td style="width:50px"><div class="user_id" /></td><div class="user_mission" /> </tr> <tr> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> </tr> <tr> <td style="width:50px"><div class="user_id" /></td><div class="user_mission" /> <td style="width:50px"><div class="user_id" /></td><div class="user_mission" /> <td style="width:50px"><div class="user_id" /></td><div class="user_mission" /> <td style="width:50px"><div class="user_id" /></td><div class="user_mission" /> <td style="width:50px"><div class="user_id" /></td><div class="user_mission" /> <td style="width:50px"><div class="user_id" /></td><div class="user_mission" /> <td style="width:50px"><div class="user_id" /></td><div class="user_mission" /> </tr> <tr> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> </tr> <tr> <td style="width:50px"><div class="user_id" /></td><div class="user_mission" /> <td style="width:50px"><div class="user_id" /></td><div class="user_mission" /> <td style="width:50px"><div class="user_id" /></td><div class="user_mission" /> <td style="width:50px"><div class="user_id" /></td><div class="user_mission" /> <td style="width:50px"><div class="user_id" /></td><div class="user_mission" /> <td style="width:50px"><div class="user_id" /></td><div class="user_mission" /> <td style="width:50px"><div class="user_id" /></td><div class="user_mission" /> </tr> <tr> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> </tr> <tr> <td style="width:50px"><div class="user_id" /></td><div class="user_mission" /> <td style="width:50px"><div class="user_id" /></td><div class="user_mission" /> <td style="width:50px"><div class="user_id" /></td><div class="user_mission" /> <td style="width:50px"><div class="user_id" /></td><div class="user_mission" /> <td style="width:50px"><div class="user_id" /></td><div class="user_mission" /> <td style="width:50px"><div class="user_id" /></td><div class="user_mission" /> <td style="width:50px"><div class="user_id" /></td><div class="user_mission" /> </tr> <tr> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> <td style="width:50px"><canvas style="width:50px; height :125px;" class="user_can" /></td> </tr> </table> </td> </tr> </table> {{ room_name|json_script:"room-name" }} <script> const roomName = JSON.parse(document.getElementById('room-name').textContent); var ws_url = 'ws://' + window.location.host + '/ws/chat/' + roomName + '/'; console.log("ws_url",ws_url); //이거 선언 안 하면 메세지 안 감 //이제 기능에서의 핵심1 const chatSocket = new WebSocket(ws_url); chatSocket.onclose = function(e) { console.error('Chat socket closed unexpectedly'); }; //핵심, 받아오는거 chatSocket.onmessage = function(e) { const data = JSON.parse(e.data); var message = data.message; //메세지 짤라줘야 함 // ' : ' 을 기준으로 자르겠다 var arr_msg = message.split(":"); // : 기준으로 0번째 방은 : 앞의 내용인 login start win 등... //로그인 하는 메서드 호출 if(arr_msg[0]=="login"){ rev_login(arr_msg[1]); } //시작하는 메서드 호출 if(arr_msg[0]=="start"){ rev_start(); } //화면 공유해줌 if(arr_msg[0]=="myscreen"){ rev_myscreen(arr_msg[1],arr_msg[2],arr_msg[3]); } }; //플레이어 간 화면 공유해주는 메서드 function rev_myscreen(my_id,screen_info,mission_info){ console.log(my_id,screen_info,mission_info); } //게임 시작하는 메서드 function rev_start(){ flagIng = true; } var user_ids = []; function rev_login(my_id){ console.log("my_id",my_id); //증복확인하자, ture, false보다는 -1반환하는 숫자로 하는게 낫다..? //indexOf가 못찾으면 -1 반환하는 것 처럼... //논리적으로 왜 -1이 더 나은가 var idx_dupl = -1; for(var i=0; i<user_ids.length; i++){ if(user_ids[i]==my_id){ idx_dupl =i; break; } } if(idx_dupl == -1){ user_ids.push(my_id); } console.log("idx_dupl",idx_dupl); var objs = document.querySelectorAll(".user_id"); for(var i=0; i<user_ids.length; i++){ objs[i].innerHTML = user_ids[i] } } //이제 기능에서의 핵심2 //아래 fn_ 함수들의 메시지를 알리는 함수 function mysend(message){ var json = { 'message': message } chatSocket.send(JSON.stringify(json)); } //참여자의 화면을 우측 참여자 화면의 canvas tag에 그려주는 메서드, 점수도 넣어줘여 function fn_myscreen(){ var obj = document.querySelector("#my_id"); var obj_mission = document.querySelector("#my_mission"); //나의 my_mission(id) var message = "myscreen:" + obj.value+":"+scrin2D+":"+obj_mission.innerHTML; mysend(message); } //승리하였음을 알리는 메서드 function fn_win(){ var obj = document.querySelector("#my_id"); var message = "win:" + obj.value; mysend(message); } //참여하였음을 알리는 메서드 function fn_login(){ var obj = document.querySelector("#my_id"); var message = "login:" + obj.value; mysend(message); } //게임 시작을 알리는 메서드 function fn_start(){ var message = "start"; mysend(message); } </script> </body> </html>tetris_network.html
'main' 카테고리의 다른 글
22-09-20_python (0) 2022.09.20 22-09-19_jsp (2) 2022.09.19 22-09-16_jsp (4) 2022.09.16 22-09-15_jsp (4) 2022.09.15 22-09-15_python (0) 2022.09.15