Install Nesbox emulator in Wordpress

Asked

Viewed 620 times

2

I’m trying to add the emulator Nesbox on a Wordpress site, but it’s not working because I don’t know in which Wordpress location should I add the emulator folder, so it works the way the developer explains it.

<div>
<div id="emulator">
    <p>To play this game, please, download the latest Flash player!</p>
    <br>
    <a href="http://www.adobe.com/go/getflashplayer">
        <img src="//www.adobe.com/images/shared/download_buttons/get_adobe_flsh_player.png" alt="Get Adobe Flash player"/>
    </a>
</div>
</div>


<script type="text/javascript">

var resizeOwnEmulator = function(width, height)
{
    var emulator = $('#emulator');
    emulator.css('width', width);
    emulator.css('height', height);
}

$(function()
{
    fuction embed()
    {
        var emulator = $('#emulator');
        if(emulator)
        {
            var flashvars = 
            {
                system : '',
                url : ''
            };
            var params = {};
            var attributes = {};

            params.allowsciptaccess = 'sameDomain';
            params.alowFullScreen = 'true';
            params.allowFullScreenInteractive = 'true';

            swfbject.embedSWF('', 'emulator', '640', '480', '11.2.0', 'flash/expressInstall.swf', flashvars, params, attributes);
        }
    }

    embed();
});

</script>
javascript wordpress plugin emulator nesbox

  • Those flashvars vary or are always the same?

  • It depends, if you are talking about var flashvars = { system : 'sega', it has to be changed depending on which game to emulate

  • Yes, this one. I had an easy solution but with this info I will need to do some tests

  • On the developer website you need to switch between sega, snes, gba etc. I think the ideal would be a single script run all emulators without having to change that part

  • yes, it has to be dynamic, received via GET, Swfobject has a function for this

  • The site also has an option of the same emulator all made in Java/script http://nesbox.com/emulator/js/ but in a test I did it hangs a lot

Show 1 more comment

1 answer

2


One solution is to make an iframe that works alone on a URL like http://exemplo.com/wp-content/arcade/, and embed in the post or page using a basic Shortcode.

You’ll need to use the swfobject.getQueryParamValue(param) to pull information from the URL and pass to the object flashvars. So the URL that Wordpress needs to build would be:

http://exemplo.com/wp-content/arcade/?system=atari&url=Pac_Man-classic

And the declaration of flashvars (checking if they exist or using the default):

var flashvars = {};
flashvars.system = ( swfobject.getQueryParamValue('system') ) ? swfobject.getQueryParamValue('system') : 'sega';
var url = ( swfobject.getQueryParamValue('url') ) ? swfobject.getQueryParamValue('url') : 'Robotech_-_The_Macross_Saga';
flashvars.url = '/rom/' + url + '.zip';

And the shortcode would be this, used in the post as [arcade url="Pac_Man-classic" system="atari"]:

<?php
/**
 * Plugin Name: (SOpt) Arcade Embed
 * Plugin URI: /questions/91673/201
 * Version: 1.0
 * Author: brasofilo 
 */

add_shortcode( 'arcade', 'arcade_sopt_91673' );

function arcade_sopt_91673 ( $atts, $content )
{  
    $url = isset( $atts['url'] ) ? $atts['url'] : 'Robotech_-_The_Macross_Saga';
    $system = isset( $atts['system'] ) ? $atts['system'] : 'sega';
    $wp_content = WP_CONTENT_URL; // igual a http://exemplo.com/wp-content

    // atenção para o formato heredoc: http://stackoverflow.com/q/5673269/1287812
    $html = <<<HTML
    <div class="arcade">
        <iframe src ="$wp_content/arcade/?url=$url&system=$system" width="600"></iframe>
    </div>
HTML;

    return $html;
}

Example of index.html:

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

    <script type="text/javascript">

    var resizeOwnEmulator = function(width, height)
    {
        var emulator = $('#emulator');
        emulator.css('width', width);
        emulator.css('height', height);
    }

    $(function()
    {
        function embed()
        {
            var emulator = $('#emulator');
            if(emulator)
            {
                var flashvars = {};
                flashvars.system = ( swfobject.getQueryParamValue('system') ) ? swfobject.getQueryParamValue('system') : 'sega';
                var url = ( swfobject.getQueryParamValue('url') ) ? swfobject.getQueryParamValue('url') : 'Robotech_-_The_Macross_Saga';
                flashvars.url = '/rom/' + url + '.zip';
                var params = {};
                var attributes = {};
                params.allowscriptaccess = 'sameDomain';
                params.allowFullScreen = 'true';
                params.allowFullScreenInteractive = 'true';
                swfobject.embedSWF('flash/Nesbox.swf', 'emulator', '640', '480', '11.2.0', null, flashvars, params, attributes);
            }
        }

        embed();
    });

    </script>
    </head>
<body>
    <div>
    <div id="emulator">
        <p>To play this game, please, download the latest Flash player!</p>
        <br>
        <a href="http://www.adobe.com/go/getflashplayer">
            <img src="//www.adobe.com/images/shared/download_buttons/get_adobe_flash_player.png" alt="Get Adobe Flash player"/>
        </a>
    </div>
    </div>



		</body></html>

In short:

  • put all emulator files inside the folder wp-content/emulador (or however you prefer)
  • the main file is the index.html
  • the briefcase http://exemplo.com/wp-content/arcade/rom/ contains all the Roms
  • check that everything is working on its own when you visit this index separately
  • many times, when dealing with Swfs, we need to use the path Absolute, and this can be passed through the URL using that value of $wp_content = WP_CONTENT_URL, this automatically generates the valid URL of the site in question
  • after that, just activate the plugin and write the shortcode correctly.

Browser other questions tagged javascript wordpress plugin emulator nesbox

You are not signed in. Login or sign up in order to post.