최근 기술 영향력자 "the primeagen"의 인용문을 우연히 발견했습니다. 정확히 기억은 나지 않지만 기억나는 대로 다음과 같습니다.
"실패하지 않는다면 배우는 것이 없는 것입니다."
이를 통해 내 코딩 여정에 대해 생각하게 되었습니다. 나는 'express'에서 import express를 작성하는 지점까지 백엔드 구축에 상당히 익숙해졌습니다. 잡일이 되었습니다.
백만 번째로 혁신적인 할일 앱을 구축하기 위해 또 다른 JavaScript 프레임워크를 배우는 기본 이벤트를 진행하는 대신(분명히 세상에는 이러한 기능이 더 많이 필요하기 때문에) 다른 일을 하기로 결정했습니다. 나는 WebSocket 프로토콜에 대해 읽었으며 서버와 클라이언트 간의 양방향 비동기 메시지를 처리하는 기능이 매력적이라는 것을 알았습니다. 그걸로 뭔가를 만들고 싶었는데 자바스크립트에서 잠시 휴식이 필요했어요.
고심 끝에 간단한 멀티플레이어 2D 게임으로 결정했습니다. 여기에는 계산(충돌 감지), 데이터 구조(연결된 목록, 해시맵) 및 플레이어 동기화가 포함됩니다. 몇 가지 간단한 규칙만 있으면 뱀 게임은 완벽해 보였습니다.
과일을 먹으면 성장하고 점수가 1점 추가됩니다
다른 플레이어의 몸과 충돌하면 움츠러들고 위치가 무작위로 재설정되며 점수가 0이 됩니다
대면 충돌로 인해 두 플레이어가 모두 위축되고 위치가 재설정되며 점수가 0이 됩니다.
이러한 모든 계산은 플레이어가 게임 로직을 조작하는 것을 방지하기 위해 서버 측에서 수행됩니다. 우리는 그래픽용 Pygame과 asyncio를 통해 비동기 메시지를 처리하기 위한 websockets 라이브러리와 함께 Python 3를 사용할 것입니다.
이제 프로그래밍의 첫 번째 규칙을 기억하기 때문에 지저분하다고 느낄 수 있는 코드를 살펴보겠습니다.
"효과가 있으면 만지지 마세요."
내 야옹거리는 소리를 충분히 읽었으니 이제 재미있는 부분인 코딩으로 넘어가겠습니다. 하지만 잡담을 건너뛰고 바로 들어가고 싶다면 GitHub 저장소로 이동하세요.
기여하고 싶다면 자유롭게 이슈를 열거나 풀 요청을 제출하세요. 개선이나 버그 수정을 환영합니다!
먼저 데이터 구조를 정의합니다.
class Object :
def __init__(self , x : float , y :float , width:int , height :int):
####################################
# init object's size and postion #
####################################
self.x = x
self.y = y
self.height = height
self.width = width
def render(self , screen , color) :
pygame.draw.rect(screen ,color ,pygame.Rect(self.x , self.y , self.width , self.height))
class Player(Object) :
def __init__(self, x: float, y: float, width: int, height: int):
super().__init__(x, y, width, height)
self.next = None
self.prev = None
self.tail = self
self.direction = 'LEFT'
self.length = 1
self.color = 'red'
# move the Snake to a certain direction
# the "changed" will be a way to tell either to continue in the same direction
# or change the direction of the head to the new direction
# it is used in the game
def change_direction(self, keys):
changed = False
if self.direction in ['LEFT', 'RIGHT']:
if keys[pygame.K_w] and self.direction != 'DOWN':
self.direction = 'UP'
changed = True
elif keys[pygame.K_s] and self.direction != 'UP':
self.direction = 'DOWN'
changed = True
elif self.direction in ['UP', 'DOWN']:
if keys[pygame.K_a] and self.direction != 'RIGHT':
self.direction = 'LEFT'
changed = True
elif keys[pygame.K_d] and self.direction != 'LEFT':
self.direction = 'RIGHT'
changed = True
return changed
# move the Snake to a certain direction with a certain speed
def move(self, screen, dt):
speed = 150 * dt
if self.direction == 'UP':
self.move_all(screen, 0, -speed)
elif self.direction == 'DOWN':
self.move_all(screen, 0, speed)
elif self.direction == 'LEFT':
self.move_all(screen, -speed, 0)
elif self.direction == 'RIGHT':
self.move_all(screen, speed, 0)
def bound(self , screen) :
if self.y < 0 :
self.y = screen.get_height()
if self.y > screen.get_height() :
self.y = 0
if self.x < 0 :
self.x = screen.get_width()
if self.x > screen.get_width() :
self.x = 0
def get_pos(self) :
arr = []
current = self
while current :
arr.append([current.x , current.y])
current = current.next
return arr
# move the snake and its body to some coordinates
def move_all(self, screen, dx, dy):
# Store old positions
old_positions = []
current = self
while current:
old_positions.append((current.x, current.y))
current = current.next
# Move head
self.x += dx
self.y += dy
self.bound(screen)
# self.render(screen, self.color)
# Move body
current = self.next
i = 0
while current:
current.x, current.y = old_positions[i]
current.bound(screen)
# current.render(screen, self.color)
current = current.next
i += 1
def add(self ):
new = Player(self.tail.x+self.tail.width+10 ,
self.tail.y ,self.tail.width ,
self.tail.height)
new.prev = self.tail
self.tail.next = new
self.tail = new
self.length +=1
def shrink(self , x , y):
self.next = None
self.tail = self
self.length = 1
self.x = x
self.y = y
# used for the and the opponent player when
# receiving its coordinates
def setall(self , arr) :
self.x = arr[0][0]
self.y = arr[0][1]
self.next = None
self.tail = self
current = self
for i in range(1 , len(arr)) :
x = arr[i][0]
y = arr[i][1]
new = Player(x ,y ,self.width , self.height)
current.next = new
self.tail = new
current = current.next
# render the whole snake on the screen
# used for both the current player and the opponent
def render_all(self, screen, color):
current = self
if self.next :
self.render(screen,'white')
current = self.next
while current :
current.render(screen , color)
current = current.next
로그인 후 복사
Object 클래스는 게임 개체의 기본 클래스인 반면 Player 클래스는 뱀 관련 기능으로 이를 확장합니다. Player 클래스에는 뱀의 방향 변경, 이동, 성장, 축소 및 렌더링을 위한 메서드가 포함되어 있습니다.
다음으로 게임 로직이 있습니다.
import pygame
from objects import Player
import websockets
import asyncio
import json
uri = 'ws://localhost:8765'
pygame.font.init()
# Render the text on a transparent surface
font = pygame.font.Font(None, 36)
# playing the main theme (you should hear it)
def play() :
pygame.mixer.init()
pygame.mixer.music.load('unknown.mp3')
pygame.mixer.music.play()
def stop():
if pygame.mixer.music.get_busy(): # Check if music is playing
pygame.mixer.music.stop()
# initialize players and the fruit
def init(obj) :
print(obj)
player = Player(*obj['my'][0])
opp = Player(*obj['opp'][0] )
food = Food(*obj['food'])
return (player , opp , food)
async def main():
async with websockets.connect(uri) as ws:
choice = int(input('1 to create a room \n2 to join a room\n>>>'))
room_name = input('enter room name: ')
await ws.send(json.dumps({
"choice" : choice ,
"room" : room_name
}))
## waiting for the other player to connecet
res = {}
while True:
res = await ws.recv()
try:
res = json.loads(res)
break
except Exception as e:
pass
player, opp, food = init(res)
pygame.init()
screen = pygame.display.set_mode((600, 400))
clock = pygame.time.Clock()
running = True
dt = 0
play()
while running:
for event in pygame.event.get():
if event.type == pygame.QUIT:
running = False
screen.fill("black")
my_pos = {
'pos': player.get_pos(),
'len': player.length
}
await ws.send(json.dumps(my_pos))
response = await ws.recv()
response = json.loads(response)
# Update food position
pygame.draw.rect(screen ,'green' ,pygame.Rect(response['food'][0] ,response['food'][1] ,20, 20))
# Handle actions
if response['act'] == 'grow':
player.add()
elif response['act'] == 'shrinkall':
player.shrink(*response['my'][0][0:2])
opp.shrink(*response['opp'][0][0:2])
elif response['act'] == 'shrink':
player.shrink(*response['my'][0][0:2])
# restarting the song each time you bump into the other player
stop()
play()
else:
opp.setall(response['opp'])
# Render everything once per frame
player.render_all(screen, 'red')
opp.render_all(screen, 'blue')
## score
## x | y => x you , y opponent
text = font.render(f'{response["my_score"]} | {response["other_score"]}', True, (255, 255, 255))
screen.blit(text, (0, 0))
pygame.display.flip()
keys = pygame.key.get_pressed()
changed = player.change_direction(keys)
# keep moving in the same direction if it is not changed
if not changed:
player.move(screen, dt)
dt = clock.tick(60) / 1000
pygame.quit()
asyncio.run(main())
로그인 후 복사
이렇게 하면 서버에 연결되어 방을 만들고 참여할 수 있으며, 자신의 위치 업데이트를 서버로 보내고 상대방의 위치와 과일 위치 및 플레이어에게 명령이 될 행위를 가져옵니다. 줄어들거나 커지거나
마지막으로 서버 코드는 다음과 같습니다.
import asyncio
import websockets
import random
import json
def generate_food_position(min_x, max_x, min_y, max_y):
x = random.randint(min_x, max_x)
y = random.randint(min_y, max_y)
return [x, y, 20, 20]
rooms = {}
def collide(a , b , width):
return (abs(a[0] - b[0]) < width and
abs(a[1] - b[1]) < width)
# detecting possible collides :
def collides(a , b , food ) :
head_to_head = collide(a[0] , b[0] ,30) ;
head_to_food = collide(a[0] , food ,25 )
head_to_body = False
this_head = a[0]
for part in b :
if collide(this_head , part ,30) :
head_to_body = True
break
return (head_to_head , head_to_body , head_to_food)
# return response as (act ,opponents position(s) , my position(s) , the food and the scores)
def formulate_response(id , oid , food , roomName) :
this= rooms[roomName][id]['pos']
other= rooms[roomName][oid]['pos']
hh , hb , hf = collides(this ,other ,food)
act = 'None'
if hh :
act = 'shrink'
rooms[roomName][id]['pos'] = initPlayer()
rooms[roomName][id]['score'] =0
# rooms[roomName][oid]['pos'] = initPlayer()
# rooms[roomName][oid]['respawn'] = True
elif hb :
act = 'shrink'
rooms[roomName][id]['pos'] = initPlayer()
rooms[roomName][id]['score'] = 0
elif hf :
act = 'grow'
rooms[roomName]['food'] = generate_food_position(20, 580, 20, 380)
rooms[roomName][id]['score']+=1
return {
'act' : act ,
'opp' : rooms[roomName][oid]['pos'] ,
'my' : rooms[roomName][id]['pos'] ,
'food': rooms[roomName]['food'] ,
'my_score' : rooms[roomName][id]['score'] ,
'other_score' : rooms[roomName][oid]['score']
}
def initPlayer():
return [[random.randint(30 , 600 ) , random.randint(30 , 400 ) , 30 , 30 ]]
async def handler(websocket) :
handshake = await websocket.recv()
handshake = json.loads(handshake)
roomName = handshake["room"]
if handshake['choice'] == 1 :
rooms[roomName] = {}
rooms[roomName]['food'] =generate_food_position(30 ,570 ,30 ,370)
rooms[roomName][websocket.id] = {
'socket' : websocket ,
'pos' : initPlayer() ,
'respawn' : False ,
'score' :0
}
if len(rooms[roomName]) >= 3 :
await broadcast(rooms[roomName])
id = websocket.id
while True :
room = rooms[roomName]
this_pos = await websocket.recv()
## synchrnisation issue with this
## after couple of times they collide head to head
## the cordinates shown on the screen aren't same
## as the server
if room[id]['respawn']==True :
rooms[roomName][id]['respawn'] = False
# generate response :
response = {
'act' : 'shrinkall',
'my' : room[id]['pos'] ,
'opp' : get_other_pos(get_other_id(id ,room),room),
'food': room['food']
}
await websocket.send(json.dumps(response))
else :
# update player position
this_pos = json.loads(this_pos)
rooms[roomName][id]['pos'] = this_pos['pos']
rooms[roomName][id]['len'] = this_pos['len']
other_id = get_other_id(id , room)
food = room['food']
response = formulate_response(id ,other_id ,food ,roomName)
await websocket.send(json.dumps(response))
def get_other_id(id , room) :
for thing in room.keys():
if thing != 'food' and thing != id :
return thing
def get_other_pos(id , room) :
return room[id]['pos']
async def broadcast(room) :
for thing in room.keys() :
if thing!= 'food' :
init = {
'my' : room[thing]['pos'] ,
'opp' : room[get_opp(thing, room)]['pos'] ,
'food': room['food']
}
await room[thing]['socket'].send(json.dumps(init))
def get_opp(id , room) :
for thing in room.keys() :
if thing!= 'food' and thing != id:
return thing
async def main():
async with websockets.serve(handler , 'localhost' ,8765 ):
await asyncio.Future()
if __name__ == '__main__' :
print('listenning ... ')
asyncio.run(main())
로그인 후 복사
플레이어의 움직임, 충돌, 상호작용을 처리합니다. 음식을 생성하고, 충돌을 감지하고, 플레이어 간의 게임 상태를 동기화합니다. 서버는 또한 플레이어 연결을 관리하고 게임 업데이트를 푸시합니다
그리고 게임 세계에서 차세대 혁신이 될 수 있는 멀티플레이어 스네이크 게임이 있습니다. 누가 알겠습니까? 다음 대규모 기술 컨퍼런스에 진출할 수도 있습니다!
지금은 잠시 살펴보고 무엇을 추가할 수 있는지 살펴보는 것이 어떨까요? GitHub 저장소를 확인하고 스네이크 게임의 차세대 혁신에 자신의 흔적을 남겨보세요.
즐거운 코딩하세요!
위 내용은 Todo 앱이 아닌 것을 만들기: 온라인 멀티플레이어 스네이크 게임의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
