Examples
These examples use the JavaScript Fetch API. Each example connects to one of the API's endpoints to use the JSON response to display resources from the database.
You don't necessarily have to use the API in this exact way. These examples were developed as ideas that could be built upon to create games. You could use these as a starting point or do something else entirely.
Example 1: Get All Dice
This is a basic example of connecting to one of the "Get All" endpoints, looping through the JSON response, and displaying all available resources on the page.
JavaScript
// variable for a div in the HTML with an id of 'all-dice'
const diceDiv = document.getElementById('all-dice');
// connect to dice endpoint
fetch('https://api.projectgamesapi.xyz/v1/dice')
.then(response => response.json())
.then(json => {
// this console.log is useful to see the json response
console.log(json);
// loop through all dice faces
for (const die of json.data.dice) {
// create an image element
let image = document.createElement('img');
// assign the image file to each item
image.src = die.image;
// add each new image to the div
diceDiv.appendChild(image);
}
})
.catch(function(error) {
console.log(error);
});Output
Example 2: Get Two Random Cards
In this example, we connect to the Get All Playing Cards endpoint then draw two random playing cards. The two card images are displayed on the page. A button lets the user draw two new cards.
JavaScript
// variables for HTML elements
const twoCardsDiv = document.getElementById('two-cards');
const drawTwoCardsButton = document.getElementById('draw-two-cards');
function drawTwoCards() {
// connect to cards endpoint
fetch('https://api.projectgamesapi.xyz/v1/cards')
.then(response => response.json())
.then(json => {
// this console.log is useful to see the json response
console.log(json);
// generate two random numbers between 1 and 52
let randomCardID1 = Math.floor(Math.random()*(52)+1);
let randomCardID2 = Math.floor(Math.random()*(52)+1);
// loop through all cards
for (const card of json.data.cards) {
// if the card ID matches the random number, that's the card to draw
if (card.id == randomCardID1 || card.id == randomCardID2) {
// create an image element
let image = document.createElement('img');
// assign the image file to each item
image.src = card.image;
// add each new image to the div
twoCardsDiv.appendChild(image);
}
}
})
.catch(function(error) {
console.log(error);
});
}
// call the function to draw two cards
drawTwoCards();
// button to draw two new cards
drawTwoCardsButton.addEventListener('click', function() {
// reset the cards by removing the current children
while (twoCardsDiv.firstChild) {
twoCardsDiv.removeChild(twoCardsDiv.firstChild);
}
// draw two new cards by calling the function again
drawTwoCards();
});Output
Example 3: Shuffle a Random Word
This code selects a random word from the Get All Words endpoint and then shuffles the word. It does this by adding the characters from the word to an array, randomizing them with The Fisher Yates Method, and then displaying the new array of characters on the page.
JavaScript
// variables for HTML elements
const originalWord = document.getElementById('original-word');
const shuffledWord = document.getElementById('shuffled-word');
const newWordButton = document.getElementById('new-word-button');
function getWord() {
// connect to words endpoint
fetch('https://api.projectgamesapi.xyz/v1/words')
.then(response => response.json())
.then(json => {
// this console.log is useful to see the json response
console.log(json);
// create an array for the word
let wordArray = new Array();
// generate a random number between 1 and the number of possible words
let max = json.data.rows_returned;
let randomNum = Math.floor(Math.random()*(max)+1);
// loop through all words
for (const word of json.data.words) {
// if the word ID matches the random number, that's our word
if (word.id == randomNum) {
// get the actual word out of the "word" object
let chosenWord = word.word;
// add the word to the paragraph in the HTML
originalWord.innerHTML = chosenWord;
// create an array of letters from the word
wordArray = Array.from(chosenWord);
// randomize the array
// The Fisher Yates Method
// https://www.w3schools.com/js/js_array_sort.asp
for (let i = wordArray.length -1; i > 0; i--) {
let j = Math.floor(Math.random() * i);
let k = wordArray[i];
wordArray[i] = wordArray[j];
wordArray[j] = k;
}
// add the shuffled word to the paragraph in the HTML
shuffledWord.innerHTML = wordArray.join('');
}
}
})
.catch(function(error) {
console.log(error);
});
}
// call the main function
getWord();
// event listener on the button that gets a new word
newWordButton.addEventListener('click', function() {
// get a new word by calling the function again
getWord();
});Output
Orignal Word:
Scrambled Word:
Example 4: Draw One Tarot Card
In this example, we draw one random card from the deck of tarot cards and display it on the page along with its name and description. A button allows the user to get a new random card.
JavaScript
// variables for HTML elements
const tarotImage = document.getElementById('tarot-card');
const tarotName = document.getElementById('tarot-card-name');
const tarotDescription = document.getElementById('tarot-card-description');
const tarotButton = document.getElementById('new-tarot-card');
function getOneTarotCard() {
//connect to tarot endpoint
fetch('https://api.projectgamesapi.xyz/v1/tarot')
.then(response => response.json())
.then(json => {
// this console.log is useful to see the json response
console.log(json);
// generate a random number between 1 and 78
let randomNum = Math.floor(Math.random()*(78)+1);
// loop through all tarot cards
for (const card of json.data.tarot) {
// if the card ID matches the random number, that's the card to draw
if (card.id == randomNum) {
// assign the image src to the image tag in the HTML
tarotImage.src = card.image;
// populate the card name
// adding suit name only if it's not the Major suit
if (card.id < 23) {
tarotName.innerHTML = card.name;
}
else {
tarotName.innerHTML = card.name + " of " + card.suit;
}
// populate the card description
tarotDescription.innerHTML = card.description;
}
}
})
.catch(function(error) {
console.log(error);
});
}
// call the main function
getOneTarotCard();
// event listener on the button that gets a new card
tarotButton.addEventListener('click', function() {
// get a new card by calling the function again
getOneTarotCard();
});Output
Example 5: Get Coins and Total
This code connects to the Get All Coins endpoint to select four random coins. A running total adds up the value of each coin. Each coin's image is displayed on the page along with a total value of all four coins.
JavaScript
// variables for HTML elements
const coinsDiv = document.getElementById('four-coins');
const coinsTotal = document.getElementById('coins-total');
const coinsButton = document.getElementById('coins-button');
function getCoins() {
//connect to coins endpoint
fetch('https://api.projectgamesapi.xyz/v1/coins')
.then(response => response.json())
.then(json => {
// this console.log is useful to see the json response
console.log(json);
// variable for the total value of all four coins
let total = 0;
// loop through 4 times to get 4 coins
for (let i = 0; i < 4; i++) {
// generate a random number between 1 and the number of possible coins
let max = json.data.rows_returned;
let randomNum = Math.floor(Math.random()*(max)+1);
// loop through all coins
for (const coin of json.data.coins) {
// if the coin ID matches the random number, that's our coin
if (coin.id == randomNum) {
// add coin value to the total
total = total + coin.value;
// create an image element
let image = document.createElement('img');
// assign the image file to each item
image.src = coin.image;
// add each new image to the div
coinsDiv.appendChild(image);
}
}
}
// divide total by 100 to get an amount in cents
total = total/100;
// makes the number display to 2 decimal places (such as 0.30 instead of 0.3)
total = (Math.round(total * 100) / 100).toFixed(2);
// populate the coin total text
coinsTotal.innerHTML = total;
})
.catch(function(error) {
console.log(error);
});
}
// call the main function
getCoins();
// event listener on the button that gets new coins
coinsButton.addEventListener('click', function() {
// reset the coins by removing the current children
while (coinsDiv.firstChild) {
coinsDiv.removeChild(coinsDiv.firstChild);
}
// get new coins by calling the function again
getCoins();
});Output
Total: $
Example 6: Get Dice and Total
Similar to the previous example, this code connects to the Get All Dice endpoint and specifies only white dice. It selects five random die faces, displays them on the page, keeps a running count of the total value of each die, and displays the final total.
JavaScript
// variables for HTML elements
const fiveDiceDiv = document.getElementById('five-dice');
const diceTotal = document.getElementById('dice-total');
const diceButton = document.getElementById('dice-button');
function getFiveDice() {
//connect to dice endpoint for only white dice
fetch('https://api.projectgamesapi.xyz/v1/dice/white')
.then(response => response.json())
.then(json => {
// this console.log is useful to see the json response
console.log(json);
// variable for the total value of all five dice
let total = 0;
// loop through 5 times to get 5 dice
for (let i = 0; i < 5; i++) {
// generate a random number between 1 and 6
let randomNum = Math.floor(Math.random()*(6)+1);
// loop through all dice
for (const dice of json.data.dice) {
// if the die ID matches the random number, that's our die
if (dice.id == randomNum) {
// add dice value to the total
total = total + dice.value;
// create an image element
let image = document.createElement('img');
// assign the image file to each item
image.src = dice.image;
// add each new image to the div
fiveDiceDiv.appendChild(image);
}
}
}
// populate the dice total text
diceTotal.innerHTML = total;
})
.catch(function(error) {
console.log(error);
});
}
// call the main function
getFiveDice();
// event listener on the button that gets new dice
diceButton.addEventListener('click', function() {
// reset the dice by removing the current children
while (fiveDiceDiv.firstChild) {
fiveDiceDiv.removeChild(fiveDiceDiv.firstChild);
}
// get new dice by calling the function again
getFiveDice();
});Output
Total: