Skip to content

Add requestRewardedAd support in plain HTML/JS/CSS sample game #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
devadvance merged 2 commits into from
May 8, 2026
Merged

Add requestRewardedAd support in plain HTML/JS/CSS sample game #34

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b2036b2
Add requestRewardedAd support in plain HTML/JS/CSS sample game
PSharon-7 May 8, 2026
7ce5b9a
Added comment for rewarded id
PSharon-7 May 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 54 additions & 5 deletions plain-html-js-css/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,27 @@ function requestInterstitialAd() {
}
}

/**
* Request a rewarded ad to be shown.
*/
function requestRewardedAd() {
console.debug(`requestRewardedAd()`);
if (inPlayablesEnv) {
// rewardId is an identifier which uniquely identifies the claimable reward type.
// For example, you could make the ID readable or a UUID. You can include this as a hard-coded ID in your game code for the specific reward.
ytgame.ads.requestRewardedAd(/*rewardId*/ "21403813-2e22-4316-a8b2-7d4f52a6f6fb").then((isRewardEarned) => {
// Request succeeded (no guarantee an ad was shown).
// Handle reward being earned or not.
console.debug(`Reward earned: ${isRewardEarned}`);
// Proceed with the game.
}, (error) => {
// Handle ad request failure.
console.warn(error);
// Proceed with the game.
});
}
}

// ==================================================
// End YouTube Playables integration section
// ==================================================
Expand Down Expand Up @@ -353,6 +374,7 @@ const buttons = {};
function createButtons() {
buttons.primaryButton = { isPressed: false, shape: null, text: 'Loading...' };
buttons.secondaryButton = { isPressed: false, shape: null, text: 'Loading...' };
buttons.tertiaryButton = { isPressed: false, shape: null, text: 'Loading...' };
}

/**
Expand All @@ -367,29 +389,44 @@ function drawButtons() {
ctx.fillStyle = '#2975d9';
}
buttons.primaryButton.shape = new Path2D();
buttons.primaryButton.shape.rect(can.width / 2 - 50, can.height - 100, 100, 40);
buttons.primaryButton.shape.rect(can.width / 2 - 50, can.height - 150, 100, 40);
ctx.fill(buttons.primaryButton.shape);

ctx.font = '20px Georgia';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = '#000';
ctx.fillText(buttons.primaryButton.text, can.width / 2, can.height - 80);
ctx.fillText(buttons.primaryButton.text, can.width / 2, can.height - 130);

if (buttons.secondaryButton.isPressed) {
ctx.fillStyle = '#6089bf';
} else {
ctx.fillStyle = '#2975d9';
}
buttons.secondaryButton.shape = new Path2D();
buttons.secondaryButton.shape.rect(can.width / 2 - 75, can.height - 50, 150, 40);
buttons.secondaryButton.shape.rect(can.width / 2 - 75, can.height - 100, 150, 40);
ctx.fill(buttons.secondaryButton.shape);

ctx.font = '20px Georgia';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = '#000';
ctx.fillText(buttons.secondaryButton.text, can.width / 2, can.height - 30);
ctx.fillText(buttons.secondaryButton.text, can.width / 2, can.height - 80);

if (buttons.tertiaryButton.isPressed) {
ctx.fillStyle = '#6089bf';
} else {
ctx.fillStyle = '#2975d9';
}
buttons.tertiaryButton.shape = new Path2D();
buttons.tertiaryButton.shape.rect(can.width / 2 - 75, can.height - 50, 150, 40);
ctx.fill(buttons.tertiaryButton.shape);

ctx.font = '20px Georgia';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = '#000';
ctx.fillText(buttons.tertiaryButton.text, can.width / 2, can.height - 30);
}

/**
Expand All @@ -403,7 +440,7 @@ function drawCounter() {
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = '#fff';
ctx.fillText(`Counter: ${counter}`, can.width / 2, can.height - 120);
ctx.fillText(`Counter: ${counter}`, can.width / 2, can.height - 170);
}
}

Expand Down Expand Up @@ -437,6 +474,7 @@ function addInteractionHandling() {
can.addEventListener('pointerdown', () => {
buttons.primaryButton.wasPressed = buttons.primaryButton.isPressed = ctx.isPointInPath(buttons.primaryButton.shape, event.offsetX, event.offsetY);
buttons.secondaryButton.wasPressed = buttons.secondaryButton.isPressed = ctx.isPointInPath(buttons.secondaryButton.shape, event.offsetX, event.offsetY);
buttons.tertiaryButton.wasPressed = buttons.tertiaryButton.isPressed = ctx.isPointInPath(buttons.tertiaryButton.shape, event.offsetX, event.offsetY);
}, false);

can.addEventListener('pointermove', () => {
Expand All @@ -446,6 +484,9 @@ function addInteractionHandling() {
if (buttons.secondaryButton.wasPressed) {
buttons.secondaryButton.isPressed = ctx.isPointInPath(buttons.secondaryButton.shape, event.offsetX, event.offsetY);
}
if (buttons.tertiaryButton.wasPressed) {
buttons.tertiaryButton.isPressed = ctx.isPointInPath(buttons.tertiaryButton.shape, event.offsetX, event.offsetY);
}
}, false);

can.addEventListener('pointerup', () => {
Expand All @@ -466,6 +507,13 @@ function addInteractionHandling() {

buttons.secondaryButton.wasPressed = buttons.secondaryButton.isPressed = false;

buttons.tertiaryButton.isPressed = ctx.isPointInPath(buttons.tertiaryButton.shape, event.offsetX, event.offsetY);
if (buttons.tertiaryButton.wasPressed && buttons.tertiaryButton.isPressed) {
requestRewardedAd();
}

buttons.tertiaryButton.wasPressed = buttons.tertiaryButton.isPressed = false;

}, false);
}

Expand Down Expand Up @@ -504,6 +552,7 @@ async function init() {
can.addEventListener('click', firstClickHandler, false);
buttons.primaryButton.text = 'Press!';
buttons.secondaryButton.text = 'Interstitial ad';
buttons.tertiaryButton.text = 'Rewarded ad';
addInteractionHandling();
}

Expand Down