Install Nesbox emulator on Wordpress

Navigation
2

I'm trying to add the Nesbox emulator on a Wordpress site, but it's not working because I do not know where in Wordpress I should add the emulator folder, so it works the way the developer explains. 

<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>
    
asked by anonymous 10.10.2015 / 01:11

1 answer

2

One solution is to make an iFrame that works by itself on a URL of type http://exemplo.com/wp-content/arcade/ , and embed it in the post or page using a Basic Shortcode.

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

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

And the statement of flashvars (checking whether or not to use 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: http://pt.stackoverflow.com/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 into the wp-content/emulador folder (or as you like)
  • The main file is index.html
  • the http://exemplo.com/wp-content/arcade/rom/ folder contains all roms
  • make sure everything is working by itself when you visit this index separately
  • Often when dealing with SWFs we need to use 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.
10.10.2015 / 23:41
Java - Disk Reader (Linux) Can you save and load text file in an iframe or openWYSIWYG?