A client-side multiplayer game library to make multiplayer games in less than 100 lines of code, using PubNub's API.
Here, we will show you how to make a multiplayer JavaScript game in less the 100 lines of code using Gametime.js.
But first, you'll need to sign up for PubNub to use Gametime.js.
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/Parking-Master/Gametime.js@latest/Gametime.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/Parking-Master/Gametime.js@latest/Gametime.min.js"></script>- Download the regular file here
- Download the minified file here
Before anything, you need to setup Gametime.js with PubNub.
- Sign up for PubNub
- Go to "Apps" > Click "CREATE NEW APP"
- Name your app
- Get your Publish / Subscribe keys (Take note of them)
Take note of your Publish / Subscribe keys, because you need them for Gametime.js.
Next, you need to define your API keys in Gametime.js, using set():
gametime.set("key", "PUBLISH_KEY", "SUBSCRIBE_KEY");Replace "PUBLISH_KEY" and "SUBSCRIBE_KEY" with your Publish / Subscribe keys.
Now you just need to define your Game Channel:
gametime.set("channel", "channel_name");Now you can make your game!
All Gametime.js functions always start with "gametime".
Custom gametime functions should never be Native JavaScript functions.
// WRONG
gametime.on("someEvent", alert);
// RIGHT
function someFunction(...msg) {
alert(msg[0]);
}
gametime.on("someEvent", someFunction);Gametime.js has to parse functions through a string, so when it gets the "Native JavaScript" message it looks something like this:
function alert() {
[native code]
}In Gametime.js, always use defined functions, not native functions.
Also, Gametime.js is case-sensitive when it comes to event names.
// WRONG
gametime.make("some-event");
// RIGHT
gametime.make("someEvent");Create a new event listener with make():
gametime.make("yourEvent");This will make your event noticable through Gametime.js.
Define your new event by attaching it with on():
function yourFunction() {
// Function that will run like a multiplayer game
}
gametime.on("yourEvent", yourFunction);Now, you will be ready to run it.
To run it, use run():
gametime.run("yourEvent");Open the browser in two-different windows / Devices, and try running the function.
The function will run globally, so if you made say a Car Game, the car would drive on both pages.
Causing it to be like a Real-Time Multiplayer game (with pure JavaScript!).
You can pass paramaters through the function too, using an Array:
gametime.run("yourEvent", [param1, param2]);Here is a pre-built basic chat room, showing how easy it is to make a multiplayer game / chat application, in less than 50 lines of JavaScript code.
First, we'll initialize Gametime.js, make the events, and run the events on click of a button:
<!DOCTYPE html>
<html>
<head>
<title>Gametime.js Multiplayer Chat</title>
<style>
body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
#form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; } #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
#input:focus { outline: none; } #form button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages > li { padding: 0.5rem 1rem; }
#messages > li:nth-child(odd) { background: #efefef; }
#input:disabled, form button:disabled { opacity: 0.5; }
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/Parking-Master/Gametime.js@latest/Gametime.js"></script>
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" /><button class="send">Send</button><button class="disconnect">Disconnect</button>
</form>
<script>
gametime.set("key", "pub-x-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", "sub-x-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx");
gametime.set("channel", "example-channel123");
gametime.make("message");
function sendMessage(msg) {
var item = document.createElement("li");
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
var chatHistory = localStorage["history"];
var noBug = chatHistory === "" ? "" : ",";
localStorage.setItem("history", (chatHistory + noBug + encodeURIComponent(msg)).split(",").toString());
}
gametime.on("message", sendMessage);
var messages = document.getElementById("messages");
var form = document.getElementById("form");
var input = document.getElementById("input");
if (!localStorage["history"]) {
localStorage.setItem("history", "");
} else {
for (var i = 0; i < localStorage["history"].split(",").length; i++) {
var item = document.createElement("li");
item.textContent = decodeURIComponent(localStorage["history"].split(",")[i]);
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
}
}
form.onsubmit = function(event) {
event.preventDefault();
if (input.value) {
gametime.run("message", [input.value]);
input.value = "";
}
};
document.querySelector(".disconnect").onclick = function(event) {
event.preventDefault();
if (confirm("Are you sure?")) {
this.textContent = "Reconnect";
gametime.disconnect();
localStorage.removeItem("history");
messages.innerHTML = "";
document.querySelector(".disconnect").disabled = "disabled", document.querySelector(".send").disabled = "disabled", input.disabled = "disabled";
}
};
</script>
</body>
</html>Open it in your browser, and try chatting through different devices!
As jQuery grows, you know you need to use it for the same reasons other developers use it.
Which is why there is also (always) a way to use jQuery for Gametime.js.
// Make the event
$(window)[0].gametime.make("myEvent");
// Define it
function myFunction() {
// Code here
}
$(window)[0].gametime.on("myEvent", myFunction);
// Run it
$(window)[0].gametime.run("myEvent");
// To pass parameters
$(window)[0].gametime.run("myEvent", [param1, param2]);Swifty is a simple JavaScript libary.
You use it for R.F.N.S. (Restricted File Notation System).
RFNS Is used for non-script and non-files.
<swift>
// Code here
</swift>In Swifty.js, you should never use single quotes (' ')
Swifty.js is basically a JavaScript library for running off-javascript functions.
You can even use Swifty.js for Gametime.js.
[ swift version 0.3 ]
gametime.make("myEvent")
FUNCTION myFunction = FUNC(...any) {
// Code here
}
gametime.on("myEvent", myFunction)
constant params = [""]
gametime.run("myEvent", params)
What will You build with Gametime.js?
Whatever it is, whether it is a:
Car game, Airplane game, Hockey game,
Etc. You can build it with Gametime.js!
Good luck!
Getting user UUID
gametime.user.id
// "81d11559-560b-4d62-a9a7-f90d364e2bfd"Getting current Channel
gametime.channel
// "example123"Disconnecting
gametime.disconnect();Disconnecting all users
gametime.disconnectAll();Joining a new channel
gametime.disconnect();
gametime.set("channel", "new_channel");The "Channel" The specific player is on (page), that will recieve the messages.
It can be set with gametime.set: gametime.set("channel", "channel-name")
An API that lets you send websocket connections, between the server and client for making chat applications, etc.
Contact us at [email protected]
MIT | Licensed under the MIT License
https://gihub.com/Parking-Master/Gametime.js/blob/main/LICENSE