Plugins Code

gra2.php

<?php
/*
  Plugin Name: Bunny vs Ghosts
  Plugin URI: https://wp-doin.com/a-simple-platform-game-concept-made-with-ai
  Description: A simply plugin to be installed on a WordPress website, which when embeded prints a simple side scroller game.
  Version: 1.0.0
  Author: Rafał Gicgier + ChatGPT
  Author URI: https://wp-doin.com/
  Text Domain: wp-doin
  Domain Path: /lang
 */
 
 add_shortcode( 'bvg_game', 'bvg_game_shortcode_handler' );
 
  function bvg_game_shortcode_handler() {
	 ob_start();
	 ?>
        <style>
            .bunny {
                background-image: url('<?php echo plugins_url( 'bunny.png' , __FILE__ ) ?>');
                background-size: auto;
                background-position: -20px -35px;
                width: 200px;
                height: 200px;
                position: absolute;
                bottom:0;
                left: 30%;
            }
            
            #container {
                height: 600px;
                position: relative;
                background-image: url('<?php echo plugins_url( 'bg.jpg' , __FILE__ ) ?>');
                background-size: cover;
                width: 1080px;
		margin-bottom: 50px;
		overflow: hidden;
	        border: 10px solid black;
            }
			
	    #container.fixed {
	        background-position: -2070px 0px;
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0px;
		left: 0px;
		z-index: 9999999;
            }
            
            .logo {
                width: 200px;
                height: 200px;
                position: absolute;
                left: 25px;
                top: 25px;
            }
            
            .logo img {
                width: 100%;
                height: 100%;
            }
            
            
            .enemy {
                width: 100px;
                height: 100px;
                position: absolute;
                 background-image: url('<?php echo plugins_url( 'ghost-4.png' , __FILE__ ) ?>');
                background-size: cover;
				right: 0;
            }
            
            .enemy--1 {
                width: 100px;
                height: 100px;
                position: absolute;
                 background-image: url('<?php echo plugins_url( 'ghost-2.png' , __FILE__ ) ?>');
                background-size: cover;
            }
            
            .enemy--2 {
                width: 100px;
                height: 100px;
                position: absolute;
                 background-image: url('<?php echo plugins_url( 'ghost-3.png' , __FILE__ ) ?>');
                background-size: cover;
            }
            
             .enemy--3 {
                width: 100px;
                height: 100px;
                position: absolute;
                 background-image: url('<?php echo plugins_url( 'ghost-4.png' , __FILE__ ) ?>');
                background-size: cover;
            }
			
			
	.enemy--boss {
		width: 200px;
                height: 200px;
                position: absolute;
                background-image: url('<?php echo plugins_url( 'boss.png' , __FILE__ ) ?>');
                background-size: cover;
			}
            
            .bullet {
                position: absolute;
                height: 15px;
                width: 50px;
                background-image: url('<?php echo plugins_url( 'bullet.png' , __FILE__ ) ?>');
                background-repeat: no-repeat;
                background-color: none;
   
            }
			
	   #bg-ground {
                background-image: url('<?php echo plugins_url( 'bg-ground.png' , __FILE__ ) ?>');
                background-size: contain;
                width: 100%;
                height: 100px;
                position: absolute;
                bottom: 0;
            }


	    #score {
		position: absolute;
		right: 20px;
		color: white;
		font-weight: bold;
		top: 60px;
		background: black;
		padding: 5px 10px;
	    }
	
            .music {
		position: absolute;
		right: 20px;
		color: white;
		font-weight: bold;
		top: 90px;
		background: black;
		padding: 5px 10px;
		cursor: pointer;
            }
			
	    .flicker {
		visibility: hidden;
	    }
        </style>

        <script>
            document.addEventListener("DOMContentLoaded", (event) => {
                document.addEventListener("keydown", function (event) {
                    switch (event.key) {
                        case "w":
                            movePlayer(1);
                            break;
                        case "a":
                            movePlayer(2)
                            break;
                        case "d":
                            movePlayer(3);
                            break;
                        case 's':
                            movePlayer(4);
                            break;
                        case 'u':
                            movePlayer(3);
                            break;
                        }
                });
		    
                function movePlayer(dir) {
                    let bunny = document.getElementById('bunny');
               
                    if (dir === 1) {
                        bunny.style.backgroundPosition = "-20px -35px";
                    }
                    if (dir === 2) {
                        bunny.style.backgroundPosition = "-35px 235px";
                    }
                    if (dir === 3) {
                        bunny.style.backgroundPosition = "-270px -270px";
                    }
                    if (dir === 4) {
                        bunny.style.backgroundPosition = "-300px -35px";
                    }
                }
            });

            interval = setInterval(function () {
                resetPlayer();
            }, 300);

            function resetPlayer() {
                bunny.style.backgroundPosition = "-20px -35px";
            }
        </script>
  
        <div id="container">
            <div class="logo"><img src="<?php echo plugins_url( 'logo.jpg' , __FILE__ ) ?>"></div>
	    <div id="score" class="score">Score: 0</div>
	    <div id="music-btn" class="music">Music</div>
			
	    <audio id="impact" src="<?php echo plugins_url( 'impact.mp3', __FILE__ ) ?>"></audio>
	    <audio id="impact-bunny" src="<?php echo plugins_url( 'impact-bunny-short.mp3', __FILE__ ) ?>"></audio>
	    <audio id="music" src="<?php echo plugins_url( 'music.mp3', __FILE__ ) ?>"></audio>
			
            <div id="bg-ground"></div>
            <div id="play-area">
	    <div style="color:white; text-align: center; width: 100%; font-size: 20px; font-weight: bold;">Bunny vs Ghosts</div>
                <div id="bunny" class="bunny"></div>
                <script src="<?php echo plugins_url( 'script.js' , __FILE__ ) ?>"></script>
            </div>
        </div>
  
	 <?php
	 return ob_get_clean();
 }