Interactive Pong

Interactive Pong

Create a pong game with real-time editing.

Interactive Pong allows you to edit the game in real-time, so you can modify its states while the game is running. Here are videos below showing this. Interactive Pong is very easy to use, and provides multiple functions that allow you to manipulate the game.

Interactive Pong lets you edit all the game-states in real time. If you want the paddles to move left and right you can, make the ball spin in circles sure. Add gravity to the game sure. You can basically edit all the states.

Example Usage

Edit screen size in real time


here is the code for that.

heartbeatConnection = runService.Heartbeat:Connect(function(deltaTime)
		Pong:SetScreenSize(InteractivePong:GetScreenSizeFromSurfaceGui(surfaceGui))
		Pong:UpdatePaddleXPositions()
                -- rest code here
end)

You can change the paddle size in real time

Here is the code for the paddle size going up everytime its hit

Pong.Ball.OnCollided:Connect(function(collisionData)
	local hit = collisionData.Hit
	
	if hit.IsPlayer then
		-- you can play sounds when it hits player
		hit.Size += Vector2.yAxis * 15
	elseif hit.IsBorder then
		-- play more sounds idk?
	end
end)

You can change the ball size in real time


Here is the code for multiplying ball size

Pong.Ball.OnCollided:Connect(function()
	Pong.Ball.Size *= 1.5
end)

Example Code (In Place Download):

-- get services
local runService = game:GetService("RunService")
local userInputService = game:GetService("UserInputService")

-- get Interactive Pong
local InteractivePong = require(script:WaitForChild("InteractivePong"))

-- get screen part stuff
local screenPart = workspace:WaitForChild("ScreenPart")
local surfaceGui = screenPart:WaitForChild("SurfaceGui")
local screenFrame = surfaceGui:WaitForChild("Screen")

-- Create the Pong game
local Pong = InteractivePong.new{
	ScreenSize = InteractivePong:GetScreenSizeFromSurfaceGui(surfaceGui), -- Set Screen size to match our gui
	PaddleSize = InteractivePong:GetPaddleSizeFromFrame(screenFrame.Player1), -- Set Paddle size to match our paddle frame
	BallSize = InteractivePong:GetBallSizeFromFrame(screenFrame.Ball) -- Set ball size to match our ball frame
}

function ProcessInput()
	-- Since theres only one player to test we will just control both paddles
	
	-- player1 input Q and E for up and down
	if userInputService:IsKeyDown(Enum.KeyCode.Q) then
		Pong.Players[1]:MoveUp()
	end; if userInputService:IsKeyDown(Enum.KeyCode.E) then
		Pong.Players[1]:MoveDown()
	end
	
	-- player2 input Q and E for up and down
	if userInputService:IsKeyDown(Enum.KeyCode.Q) then
		Pong.Players[2]:MoveUp()
	end; if userInputService:IsKeyDown(Enum.KeyCode.E) then
		Pong.Players[2]:MoveDown()
	end
end

function UpdateGui()
	-- set player1's paddle size and position
	screenFrame.Player1.Position = Pong.Players[1]:GetUDim2Position()
	screenFrame.Player1.Size = Pong.Players[1]:GetUDim2Size()
	
	-- set player2's paddle size and position
	screenFrame.Player2.Position = Pong.Players[2]:GetUDim2Position()
	screenFrame.Player2.Size = Pong.Players[2]:GetUDim2Size()

	-- set the ball's size and position
	screenFrame.Ball.Position = Pong.Ball:GetUDim2Position()
	screenFrame.Ball.Size = Pong.Ball:GetUDim2Size()
end

-- start game using heartbeat, to run every frame
local heartbeatConnection
function StartGame()
	heartbeatConnection = runService.Heartbeat:Connect(function(deltaTime)
		ProcessInput() -- process input

		Pong:Step(deltaTime) -- update the game
		UpdateGui() -- update visuals/gui
	end)
end

function EndGame()
	heartbeatConnection:Disconnect() -- disconnect the game heartbeat
	task.wait(1) -- wait 1 second so they can see they lost
	
	Pong:Reset() -- reset the game state
	UpdateGui() -- update gui to show reset
	
	task.wait(1) -- wait 1 second before game starts
	StartGame() -- start the game
end

Pong.Ball.OnCollided:Connect(function(collisionData)
        local hit = collisionData.Hit
	if hit.IsPlayer then
		-- you can play sounds when it hits player
	elseif hit.IsBorder then
		-- play more sounds idk?
	end
end)

Pong.Ended:Connect(EndGame) -- once the game has ended (touched the wall) call the function

StartGame() -- start the game first

Downloads:
Module: InteractivePong.rbxm (5.2 KB)
Place Download: InteractivePongPlaceDownload.rbxl (63.0 KB)

11 Likes

This is sick bro :fire: :fire: :fire: asdasdfasf

1 Like

First Community Resource that I saw which includes real-time reactions to changes like that. Really interesting!

1 Like

nice, are you going to make a AI one player against the AI player?

or a two player version?

It’s very versatile so you can do whatever with it and yeah, I probably will create an AI with it using OpenML. To create a 2 player version you’d use a remote event to fire input data to the server, and the server handles the visuals and the game.