mirror of
https://github.com/MarshalX/telegram-crawler.git
synced 2024-12-13 02:11:00 +01:00
185 lines
12 KiB
HTML
185 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html class="">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Gaming Platform</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta property="description" content="Bots can offer their users HTML5 games to play solo or to compete against each other in groups and one-on-one chats. Games…">
|
|
<meta property="og:title" content="Gaming Platform">
|
|
<meta property="og:image" content="https://corefork.telegram.org/file/811140063/2/hlfJUWy75wU.82563/ea57853b3d4d9ab22f">
|
|
<meta property="og:description" content="Bots can offer their users HTML5 games to play solo or to compete against each other in groups and one-on-one chats. Games…">
|
|
<link rel="shortcut icon" href="/favicon.ico?4" type="image/x-icon" />
|
|
|
|
<link href="/css/bootstrap.min.css?3" rel="stylesheet">
|
|
|
|
<link href="/css/telegram.css?224" rel="stylesheet" media="screen">
|
|
<style>
|
|
</style>
|
|
</head>
|
|
<body class="preload">
|
|
<div class="dev_page_wrap">
|
|
<div class="dev_page_head navbar navbar-static-top navbar-tg">
|
|
<div class="navbar-inner">
|
|
<div class="container clearfix">
|
|
<ul class="nav navbar-nav navbar-right hidden-xs"><li class="navbar-twitter"><a href="https://twitter.com/telegram" target="_blank" data-track="Follow/Twitter" onclick="trackDlClick(this, event)"><i class="icon icon-twitter"></i><span> Twitter</span></a></li></ul>
|
|
<ul class="nav navbar-nav">
|
|
<li><a href="//telegram.org/">Home</a></li>
|
|
<li class="hidden-xs"><a href="//telegram.org/faq">FAQ</a></li>
|
|
<li class="hidden-xs"><a href="//telegram.org/apps">Apps</a></li>
|
|
<li class=""><a href="/api">API</a></li>
|
|
<li class=""><a href="/mtproto">Protocol</a></li>
|
|
<li class=""><a href="/schema">Schema</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container clearfix">
|
|
<div class="dev_page">
|
|
<div id="dev_page_content_wrap" class=" ">
|
|
<div class="dev_page_bread_crumbs"><ul class="breadcrumb clearfix"><li><a href="/bots" >Telegram Bots</a></li><i class="icon icon-breadcrumb-divider"></i><li><a href="/bots/games" >Gaming Platform</a></li></ul></div>
|
|
<h1 id="dev_page_title">Gaming Platform</h1>
|
|
|
|
<div id="dev_page_content"><!-- scroll_nav -->
|
|
|
|
<div class="dev_side_image">
|
|
<a href="/file/811140373/1/0_42vz9chLs.975647/383dca94f028b1872c" target="_blank"><img src="/file/811140063/2/hlfJUWy75wU.82563/ea57853b3d4d9ab22f" title="Gaming Platform Poster">
|
|
</a></div>
|
|
|
|
<p>Bots can offer their users <strong>HTML5 games</strong> to play solo or to compete against each other in groups and one-on-one chats. Games are a new type of content on Telegram that your bot can send to users.</p>
|
|
<div><center>
|
|
<a href="/file/811140035/2/cIULSr61vi4.78261/127282e0bbd66ce3a9" target="_blank"><img src="/file/811140035/2/cIULSr61vi4.78261/127282e0bbd66ce3a9" title="Game in a chat" style="width: 295px; padding: 10px 10px;" /></a></center><br>
|
|
</div>
|
|
|
|
<blockquote>
|
|
<p>This introduction is meant for <strong>bot developers</strong>. <a href="https://telegram.org/blog/games"><strong>Click here</strong></a>, in case you'd like something more user-friendly.<br>Check out the <a href="https://telegram.me/gamebot"><strong>@gamebot</strong></a> and <a href="https://telegram.me/gamee"><strong>@gamee</strong></a> bots for examples of what you can do using the new Gaming Platform.</p>
|
|
</blockquote>
|
|
<h3><a class="anchor" name="creating-a-game" href="#creating-a-game"><i class="anchor-icon"></i></a>Creating a Game</h3>
|
|
<p>To get started, send the <code>/newgame</code> command to <a href="https://telegram.me/botfather">@BotFather</a>.You will be prompted for a description text and a photo. You can also upload an optional GIF animation that demostrates your game to the users to make messages with the game more attractive (check out <a href="https://telegram.me/gamebot?game=Lumberjack">Lumberjack</a> or <a href="https://telegram.me/gamebot?game=Corsairs">Corsairs</a> for examples).</p>
|
|
<h3><a class="anchor" name="launching-the-game" href="#launching-the-game"><i class="anchor-icon"></i></a>Launching the Game</h3>
|
|
<p>Once the game is created, your bot can send it to chats as regular messages, or offer them via <a href="/bots/inline">inline mode</a>. The game message will always have an <a href="/bots/api#inlinekeyboardmarkup">inline</a> <strong>Play button</strong>.</p>
|
|
<p>When this button is pressed, your bot gets a callback query that indicates the requested game. You provide the correct URL for this particular user and the app automatically opens the game in the in-app browser.</p>
|
|
<h3><a class="anchor" name="adding-buttons" href="#adding-buttons"><i class="anchor-icon"></i></a>Adding Buttons</h3>
|
|
<p>If you send the game message without any buttons, it will automatically have a 'Play <em>GameName</em>' button. You can manually add multiple buttons to your game message. Please note that the first button in the first row <strong>must always</strong> be the one that launches the game. You can add more buttons: e.g., for a description of the rules, or a button that links to the game's official community.</p>
|
|
<h3><a class="anchor" name="tracking-high-scores" href="#tracking-high-scores"><i class="anchor-icon"></i></a>Tracking High Scores</h3>
|
|
<p>The message with your game will also display high scores for the current chat. When a new high score is set, a service message will be sent to the chat and the message with the current scoreboard will be updated. You can also request the necessary data for building in-game high score tables.</p>
|
|
<div><center>
|
|
<br>
|
|
<a href="/file/811140022/1/m7-46hgmwbI.91190/ad7033bcb879270a69" target="_blank"><img src="/file/811140022/1/m7-46hgmwbI.91190/ad7033bcb879270a69" title="In-game high scores for Lumberjack" style="width: 295px; padding: 0px 20px;" /></a>
|
|
<a href="/file/811140594/2/WS2fB3n2UGA.149087/270057ff677339717e" target="_blank"><img src="/file/811140594/2/WS2fB3n2UGA.149087/270057ff677339717e" title="Message with the score in the chat" style="width: 295px; padding: 0px 20px;" /></a><br><br>
|
|
|
|
<br><br></center></div>
|
|
|
|
<h3><a class="anchor" name="sharing-your-game-to-telegram-chats" href="#sharing-your-game-to-telegram-chats"><i class="anchor-icon"></i></a>Sharing Your Game to Telegram Chats</h3>
|
|
<p>There are many way for users to spread your game virally if they like it. The interface will always have the standard system button for sharing the game in the top right corner:</p>
|
|
<div><center>
|
|
<a href="/file/811140766/2/_wJtf-Zib5I.25531/774eb9b59898526d26" target="_blank"><img src="/file/811140766/2/_wJtf-Zib5I.25531/774eb9b59898526d26" title="Standard share button: iOS" style="width: 295px; padding: 15px 20px;" /></a>
|
|
|
|
<a href="/file/811140557/3/ddi8K6x0obQ.34056/a1ca60069b70a81646" target="_blank"><img src="/file/811140557/3/ddi8K6x0obQ.34056/a1ca60069b70a81646" title="Standard share button: Android" style="width: 295px; padding: 15px 20px;" /></a><br><br>
|
|
|
|
</center></div>
|
|
|
|
|
|
|
|
<p>You can also create an additional <strong>Share</strong> button inside your HTML page. Pressing this button will send the game to a desired chat along with the user's best score in the game.</p>
|
|
<div><center>
|
|
|
|
<a href="/file/811140189/2/SLwHmToemfg.91233/a242854be2b500b4cb" target="_blank"><img src="/file/811140189/2/SLwHmToemfg.91233/a242854be2b500b4cb" title="Gamee: share button" style="width: 295px; padding: 15px 20px;" /></a>
|
|
<a href="/file/811140978/1/JoBvEad8JaM.148942/dcd741b65b446781b4" target="_blank"><img src="/file/811140978/1/JoBvEad8JaM.148942/dcd741b65b446781b4" title="Shared game with 'just scored'" style="width: 295px; padding: 15px 20px;" /></a>
|
|
|
|
|
|
<br><br></center></div>
|
|
|
|
|
|
<p>To add the sharing button, include <a href="https://telegram.org/js/games.js">this script</a> at the end of the <code><body></code> tag on your page:</p>
|
|
<pre><code><script src="https://telegram.org/js/games.js"></script></code></pre>
|
|
<p>Then use the method <code>TelegramGameProxy.shareScore()</code> to call the sharing option.</p>
|
|
<blockquote>
|
|
<p>Warning: Do not call this method without consent and <strong>direct action</strong> from the user.</p>
|
|
</blockquote>
|
|
<p><strong>Example:</strong></p>
|
|
<pre><code><button onclick="TelegramGameProxy.shareScore()">Share score</button></code></pre>
|
|
<p>This library will only work when launched from inside Telegram, so please don't use it on ordinary web pages. </p>
|
|
<h3><a class="anchor" name="using-url-parameters" href="#using-url-parameters"><i class="anchor-icon"></i></a>Using URL Parameters</h3>
|
|
<p>If your URL is using a fragment identifier, please note that Telegram Apps could add certain service parameters to the fragment id. The names for such parameters will start in <code>tg</code> (you can check the code that adds them <a href="https://github.com/TelegramMessenger/GamingCommunication/blob/master/games.js#L54">here</a>). Use the <code>TelegramGameProxy.initParams</code> object if you need to read your own parameters from the fragment id.</p>
|
|
<h3><a class="anchor" name="creating-a-great-html5-experience" href="#creating-a-great-html5-experience"><i class="anchor-icon"></i></a>Creating a Great HTML5 Experience</h3>
|
|
<p>Please make sure that your HTML5 page is responsive and works well on all Telegram apps and supported platforms. If you find it impossible to support certain conditions or platforms, don't leave your users hanging and at least provide a notification.</p>
|
|
<blockquote>
|
|
<p>See the <a href="/bots/api#games">Bot API Manual</a> for the relevant methods and objects.</p>
|
|
</blockquote>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="footer_wrap">
|
|
<div class="footer_columns_wrap footer_desktop">
|
|
<div class="footer_column footer_column_telegram">
|
|
<h5>Telegram</h5>
|
|
<div class="footer_telegram_description"></div>
|
|
Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.
|
|
</div>
|
|
|
|
<div class="footer_column">
|
|
<h5><a href="//telegram.org/faq">About</a></h5>
|
|
<ul>
|
|
<li><a href="//telegram.org/faq">FAQ</a></li>
|
|
<li><a href="//telegram.org/blog">Blog</a></li>
|
|
<li><a href="//telegram.org/jobs">Jobs</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer_column">
|
|
<h5><a href="//telegram.org/apps#mobile-apps">Mobile Apps</a></h5>
|
|
<ul>
|
|
<li><a href="//telegram.org/dl/ios">iPhone/iPad</a></li>
|
|
<li><a href="//telegram.org/dl/android">Android</a></li>
|
|
<li><a href="//telegram.org/dl/wp">Windows Phone</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer_column">
|
|
<h5><a href="//telegram.org/apps#desktop-apps">Desktop Apps</a></h5>
|
|
<ul>
|
|
<li><a href="//desktop.telegram.org/">PC/Mac/Linux</a></li>
|
|
<li><a href="//macos.telegram.org/">macOS</a></li>
|
|
<li><a href="//telegram.org/dl/web">Web-browser</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer_column footer_column_platform">
|
|
<h5><a href="//core.telegram.org/">Platform</a></h5>
|
|
<ul>
|
|
<li><a href="//core.telegram.org/api">API</a></li>
|
|
<li><a href="//translations.telegram.org/">Translations</a></li>
|
|
<li><a href="//instantview.telegram.org/">Instant View</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="footer_columns_wrap footer_mobile">
|
|
<div class="footer_column">
|
|
<h5><a href="//telegram.org/faq">About</a></h5>
|
|
</div>
|
|
<div class="footer_column">
|
|
<h5><a href="//telegram.org/blog">Blog</a></h5>
|
|
</div>
|
|
<div class="footer_column">
|
|
<h5><a href="//telegram.org/apps">Apps</a></h5>
|
|
</div>
|
|
<div class="footer_column">
|
|
<h5><a href="//core.telegram.org/">Platform</a></h5>
|
|
</div>
|
|
<div class="footer_column">
|
|
<h5><a href="https://twitter.com/telegram" target="_blank" data-track="Follow/Twitter" onclick="trackDlClick(this, event)">Twitter</a></h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="/js/main.js?43"></script>
|
|
<script src="/js/jquery.min.js?1"></script>
|
|
<script src="/js/bootstrap.min.js?1"></script>
|
|
|
|
<script>window.initDevPageNav&&initDevPageNav();
|
|
backToTopInit("Go up");
|
|
removePreloadInit();
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|