{"id":4925,"date":"2026-08-29T23:10:35","date_gmt":"2026-08-29T14:10:35","guid":{"rendered":"https:\/\/donguri3.net\/server-tech\/create-browser-game-with-wp-plugin-2\/"},"modified":"2026-08-29T23:10:36","modified_gmt":"2026-08-29T14:10:36","slug":"create-browser-game-with-wp-plugin","status":"publish","type":"post","link":"https:\/\/donguri3.net\/en\/server-tech\/wordpress-blog-seo\/create-browser-game-with-wp-plugin\/","title":{"rendered":"How to Create a Simple Browser Game with a WordPress Plugin and Security Measures"},"content":{"rendered":"<p>In this article, we will introduce how to use ChatGPT to create a simple browser game as a WordPress plugin. We will also provide a detailed explanation of security considerations and countermeasures.<\/p>\n<div>\n<hr \/>\n<\/div>\n<h2>Basic Plugin Structure<\/h2>\n<p>A WordPress plugin can be created by making a folder within the <code>wp-content\/plugins\/<\/code> directory and placing PHP files inside it.<\/p>\n<pre><code>\/wp-content\/plugins\/my-game-plugin\/\n    \u251c\u2500\u2500 my-game-plugin.php\n    \u251c\u2500\u2500 assets\/\n    \u2502   \u251c\u2500\u2500 game.js\n    \u2502   \u251c\u2500\u2500 style.css\n    \u2502   \u2514\u2500\u2500 index.html<\/code><\/pre>\n<h3><code>my-game-plugin.php<\/code> (Main Plugin File)<\/h3>\n<div class=\"wp-block-cocoon-blocks-toggle-box-1 toggle-wrap toggle-box block-box not-nested-style cocoon-block-toggle\"><input id=\"toggle-checkbox-202503061723541\" class=\"toggle-checkbox\" type=\"checkbox\" \/><label class=\"toggle-button\" for=\"toggle-checkbox-202503061723541\">Show my-game-plugin.php<\/label><\/p>\n<div class=\"toggle-content\">\n<pre>&lt;?php\n\/*\nPlugin Name: My Game Plugin\nDescription: A plugin to embed a simple browser game\nVersion: 1.0\nAuthor: Your Name\n*\/\n\nfunction my_game_enqueue_scripts() {\n    wp_enqueue_script('my-game-script', plugins_url('assets\/game.js', __FILE__), array(), null, true);\n    wp_enqueue_style('my-game-style', plugins_url('assets\/style.css', __FILE__));\n}\nadd_action('wp_enqueue_scripts', 'my_game_enqueue_scripts');\n\nfunction my_game_shortcode() {\n    ob_start();\n    ?&gt;\n    &lt;div id=\"game-container\"&gt;\n        &lt;canvas id=\"gameCanvas\"&gt;&lt;\/canvas&gt;\n    &lt;\/div&gt;\n    &lt;?php\n    return ob_get_clean();\n}\nadd_shortcode('my_game', 'my_game_shortcode');\n?&gt;<\/pre>\n<\/div>\n<\/div>\n<p>Activate this plugin and add <code>[<\/code><code>my_game<\/code><code>]<\/code> to a post to display the game.<\/p>\n<div>\n<hr \/>\n<\/div>\n<h2>Creating a Simple Clicking Game with JavaScript<\/h2>\n<p>The code for this game was generated using ChatGPT. Below is the basic JavaScript code for the game.<\/p>\n<h3><code>assets\/game.js<\/code><\/h3>\n<div class=\"wp-block-cocoon-blocks-toggle-box-1 toggle-wrap toggle-box block-box not-nested-style cocoon-block-toggle\"><input id=\"toggle-checkbox-202503061723563\" class=\"toggle-checkbox\" type=\"checkbox\" \/><label class=\"toggle-button\" for=\"toggle-checkbox-202503061723563\">Show assets\/game.js<\/label><\/p>\n<div class=\"toggle-content\">\n<pre>document.addEventListener(\"DOMContentLoaded\", function() {\n    const canvas = document.getElementById(\"gameCanvas\");\n    const ctx = canvas.getContext(\"2d\");\n\n    canvas.width = 300;\n    canvas.height = 300;\n\n    let score = 0;\n    let targetX = Math.random() * canvas.width;\n    let targetY = Math.random() * canvas.height;\n    const targetRadius = 20;\n\n    function drawScore() {\n        ctx.fillStyle = \"black\";\n        ctx.font = \"20px Arial\";\n        ctx.fillText(\"Score: \" + score, 10, 30);\n    }\n\n    function drawTarget() {\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\n        ctx.fillStyle = \"red\";\n        ctx.beginPath();\n        ctx.arc(targetX, targetY, targetRadius, 0, Math.PI * 2);\n        ctx.fill();\n        drawScore();\n    }\n\n    function checkClick(event) {\n        const rect = canvas.getBoundingClientRect();\n        const x = event.clientX - rect.left;\n        const y = event.clientY - rect.top;\n        const distance = Math.sqrt((x - targetX) ** 2 + (y - targetY) ** 2);\n\n        if (distance &lt; targetRadius) {\n            score++;\n            targetX = Math.random() * canvas.width;\n            targetY = Math.random() * canvas.height;\n        }\n\n        drawTarget();\n    }\n\n    canvas.addEventListener(\"click\", checkClick);\n    drawTarget();\n});<\/pre>\n<\/div>\n<\/div>\n<h3><code>assets\/style.css<\/code><\/h3>\n<pre><code>#game-container {\n    text-align: center;\n    margin: 20px auto;\n}\ncanvas {\n    border: 2px solid black;\n}<\/code><\/pre>\n<p>Now the simple clicking game is operational.<\/p>\n<p>[my_game]<\/p>\n<div>\n<hr \/>\n<\/div>\n<h2>Security Considerations and Countermeasures<\/h2>\n<p>Even when generating code using ChatGPT, you must pay close attention to security.<\/p>\n<h3><strong>XSS (Cross-Site Scripting) Countermeasures<\/strong><\/h3>\n<ul>\n<li>Avoid using <code>innerHTML<\/code>; instead, manipulate the DOM using <code>textContent<\/code> or <code>setAttribute<\/code>.<\/li>\n<li>If saving scores to the server, sanitize them properly using <code>esc_html()<\/code> or <code>sanitize_text_field()<\/code>.<\/li>\n<\/ul>\n<h3><strong>Clickjacking Countermeasures<\/strong><\/h3>\n<ul>\n<li>Set <code>X-Frame-Options<\/code> to <code>DENY<\/code> or <code>SAMEORIGIN<\/code>.<\/li>\n<li>Control it in WordPress using the <code>send_headers<\/code> hook:\n<pre><code>function my_game_set_headers() {\n    header('X-Frame-Options: SAMEORIGIN');\n}\nadd_action('send_headers', 'my_game_set_headers');<\/code><\/pre>\n<\/li>\n<\/ul>\n<h3><strong>Score Tampering Prevention<\/strong><\/h3>\n<ul>\n<li>There is a possibility that scores could be tampered with via developer tools (e.g., entering <code>score = 9999;<\/code>).<\/li>\n<li>When sending scores to the server, use HMAC or digital signatures to prevent unauthorized data transmission.<\/li>\n<\/ul>\n<h3><strong>Plugin Tampering Prevention<\/strong><\/h3>\n<ul>\n<li>Add <code>define('DISALLOW_FILE_EDIT', true);<\/code> to <code>wp-config.php<\/code>.<\/li>\n<li>Restrict access to the plugin&#8217;s <code>assets\/<\/code> directory using <code>.htaccess<\/code>:\n<pre><code>&lt;FilesMatch \"\\.(js|css|html)$\"&gt;\n    Require all denied\n&lt;\/FilesMatch&gt;<\/code><\/pre>\n<\/li>\n<\/ul>\n<div>\n<hr \/>\n<\/div>\n<h2>Conclusion<\/h2>\n<p>With this approach, we were able to leverage ChatGPT to integrate a simple browser game into WordPress. However, it is important to understand the security risks and implement appropriate measures.<\/p>\n<p>If you plan to expand the game\u2014such as saving scores or adding a ranking system\u2014be sure to pay close attention to server-side security as well!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article, we will introduce how to use ChatGPT to create a simple browser game as a WordPress plugin. W [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":1097,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_locale":"en_US","_original_post":"https:\/\/donguri3.net\/?p=450","footnotes":""},"categories":[1166],"tags":[387,61,150,157,10,310,179,153],"class_list":["post-4925","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-blog-seo","tag-java","tag-wordpress","tag-157","tag-server","tag-310","tag-179","tag-153","en-US"],"_links":{"self":[{"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/posts\/4925","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/comments?post=4925"}],"version-history":[{"count":1,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/posts\/4925\/revisions"}],"predecessor-version":[{"id":4928,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/posts\/4925\/revisions\/4928"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/media\/1097"}],"wp:attachment":[{"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/media?parent=4925"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/categories?post=4925"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/donguri3.net\/wp-json\/wp\/v2\/tags?post=4925"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}