Javascript HTML5与facebook的集成_Javascript_Php_Facebook_Html

Javascript HTML5与facebook的集成

javascript php facebook html

Javascript HTML5与facebook的集成,javascript,php,facebook,html,Javascript,Php,Facebook,Html,我犯了一个相当不寻常和恼人的错误。在我展示代码之前，让我解释一下。我正在通过HTML5和JavaScript设计一款电脑游戏，打算代表我的雇主将游戏上传到facebook上。我一直在努力制作这个游戏，直到今天才决定将游戏上传到facebook上测试她。然而，我拥有的许多图像并没有显示在屏幕上。我经常通过各种浏览器测试我的游戏，游戏运行良好。我已经把游戏上传到一个我订阅的网络主机上，效果也不错。然而，在复制html文件后，输入php代码并将其上传到我的公司主机上，与其他图像不同，只有少数图像起作用

我犯了一个相当不寻常和恼人的错误。在我展示代码之前，让我解释一下。我正在通过HTML5和JavaScript设计一款电脑游戏，打算代表我的雇主将游戏上传到facebook上。我一直在努力制作这个游戏，直到今天才决定将游戏上传到facebook上测试她。然而，我拥有的许多图像并没有显示在屏幕上。我经常通过各种浏览器测试我的游戏，游戏运行良好。我已经把游戏上传到一个我订阅的网络主机上，效果也不错。然而，在复制html文件后，输入php代码并将其上传到我的公司主机上，与其他图像不同，只有少数图像起作用。我已经检查了我存储图像的图像目录，所有的图像都在那里。不过我确实注意到了一些事情。在JavaScript文件中，我有3个画布，每个画布上都有一层：

    var canvas = document.getElementById("background");
var ctx = canvas.getContext("2d");

var canvas1 = document.getElementById("enemyCanvas");
var context = canvas1.getContext("2d");

var canvas2 = document.getElementById("introCanvas");
var context1 = canvas2.getContext("2d");

不起作用的图像如下所示玩家

gameOver的文本（当您死亡时）

生命的数量（这是两个不同的图像，一个是发光的文本图像，另一个是心脏图像）

下面的代码是PHP/html文件，不包括应用程序id密钥、安全密钥和游戏标题

<!DOCTYPE html>
<?php
require 'server/fb-php-sdk/facebook.php';

    $app_id = 'leaving blank here';
    $app_secret = 'leaving blank here';
    $app_namespace = 'leaving blank here';
    $app_url = 'https://apps.facebook.com/' . $app_namespace . '/';
    $scope = 'email,publish_actions';

    // Init the Facebook SDK
    $facebook = new Facebook(array(
         'appId'  => $app_id,
         'secret' => $app_secret,
));

// Get the current user
$user = $facebook->getUser();

// If the user has not installed the app, redirect them to the Login Dialog
if (!$user) {
        $loginUrl = $facebook->getLoginUrl(array(
        'scope' => $scope,
        'redirect_uri' => $app_url,
        ));

        print('<script> top.location.href=\'' . $loginUrl . '\'</script>');
}
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>XXX</title>
</head>



<body>



<canvas id="background" width="500" height="600" z-index="0">
Your browser does not support canvas. Please try again with a different browser.
</canvas>
<canvas id="enemyCanvas" width="501" height="601" z-index="1">
Your browser does not support canvas. Please try again with a different browser.
</canvas>
<canvas id="introCanvas" width="501" height="601" z-index="2">
Your browser does not support canvas. Please try again with a different browser.
</canvas>
<div id="button"><strong>PLAY GAME</strong></div>
<div id="button1"><strong>INSTRUCTIONS</strong></div>
<div id="LevelUpSpeedButton"><strong></strong></div>
<div id="LevelUpDamageButton"><strong></strong></div>
<div id="SoundButton"></div>
<div id="iframe">
<iframe src="#" height="600" width="240" seamless></iframe>
</div>

<script src="Game.js"></script>
</body>
</html>


XXX
您的浏览器不支持画布。请使用其他浏览器重试。
您的浏览器不支持画布。请使用其他浏览器重试。
您的浏览器不支持画布。请使用其他浏览器重试。
玩游戏
说明

仅重申几点，图像位置正确。这个游戏在我自己的服务器主机和本地运行的pc上都可以在facebook上运行。我没有提到它们是以html的形式工作的，唯一一次使用PHP对游戏进行测试是在我将其上传到facebook时。没有，facebook社区看不到游戏，只有我自己和某个在公司工作的开发人员

感谢您的帮助。

很抱歉花了这么长时间回答我自己的问题，但似乎我自己已经找到了解决办法。在上面的回复中，我提到有两种方法可以创建函数

var drawPlayerImage = function(){
ctx.drawImage(image, x, y);
}
or 
function drawPlayerImage(){
....
}

编写函数的方式决定了首先加载哪个函数。第一个函数是将一个变量赋给一个匿名函数，它在开始时被调用（如果这个解释不完全准确，请原谅）。之所以缺少图形，是因为使用了var draw=func和函数绘制样式的组合。为了更深入一点，我在代码顶部附近声明图像并初始化它们，因为一些函数是首先使用的，所以图像在使用之前实际上没有被加载。这意味着服务器无法加载映像

将函数声明从var drawPlayerImage更改为函数drawPlayerImage后，图像开始显示在Internet Explorer和Chrome上，但不会显示在FireFox上，这是因为FireFox上的旧图像（缓存）使用的是JavaScript文件的版本，而不是新版本，这也是为什么需要24小时才能解决的原因

因此，如果说社区能从这一课中吸取什么，那就是这些宝石。了解以下两者之间的区别：

var functionName = function(){..}

及

如果对代码的更改似乎在其他地方起作用，请记住清除缓存。

如果您没有向我们展示一个实例。你必须开始自己调试。很抱歉，回复时间太长了，但是，我不完全有信心发布到我的雇主托管地址的链接，也不完全有信心发布包含我真实姓名的一系列目录文件，我知道是的，我有信任问题，我是这家公司的实习生，我不想在没有他们允许的情况下得到关于我公司的详细信息，特别是因为它提供了网站的主人和目录系统布局的详细信息。除此之外，我在代码中做了一些修改，可能已经找到了一个可能的解决方案。正如大多数人所知，创建函数有两种方法，函数名（）或var name=function（），我们还知道，在加载时，首先要完成var名称，或者至少这是我的解释，这会向我暗示，这些函数要求绘制尚未初始化的图像，这是否正确？

context1.drawImage(speedUpgradeImage, 190,198);
context1.drawImage(damageUpgradeImage, 190,250);

<!DOCTYPE html>
<?php
require 'server/fb-php-sdk/facebook.php';

    $app_id = 'leaving blank here';
    $app_secret = 'leaving blank here';
    $app_namespace = 'leaving blank here';
    $app_url = 'https://apps.facebook.com/' . $app_namespace . '/';
    $scope = 'email,publish_actions';

    // Init the Facebook SDK
    $facebook = new Facebook(array(
         'appId'  => $app_id,
         'secret' => $app_secret,
));

// Get the current user
$user = $facebook->getUser();

// If the user has not installed the app, redirect them to the Login Dialog
if (!$user) {
        $loginUrl = $facebook->getLoginUrl(array(
        'scope' => $scope,
        'redirect_uri' => $app_url,
        ));

        print('<script> top.location.href=\'' . $loginUrl . '\'</script>');
}
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>XXX</title>
</head>



<body>



<canvas id="background" width="500" height="600" z-index="0">
Your browser does not support canvas. Please try again with a different browser.
</canvas>
<canvas id="enemyCanvas" width="501" height="601" z-index="1">
Your browser does not support canvas. Please try again with a different browser.
</canvas>
<canvas id="introCanvas" width="501" height="601" z-index="2">
Your browser does not support canvas. Please try again with a different browser.
</canvas>
<div id="button"><strong>PLAY GAME</strong></div>
<div id="button1"><strong>INSTRUCTIONS</strong></div>
<div id="LevelUpSpeedButton"><strong></strong></div>
<div id="LevelUpDamageButton"><strong></strong></div>
<div id="SoundButton"></div>
<div id="iframe">
<iframe src="#" height="600" width="240" seamless></iframe>
</div>

<script src="Game.js"></script>
</body>
</html>

var drawPlayerImage = function(){
ctx.drawImage(image, x, y);
}
or 
function drawPlayerImage(){
....
}

var functionName = function(){..}

function functionName(){..}