HTML5 and facebook integration

HTML5 and facebook integration

本文关键字：integration facebook and HTML5      更新时间：2023-09-26

我遇到了一个相当不寻常和烦人的错误。在我展示代码之前，让我解释一下。我正在通过HTML 5和JavaScript设计一个电脑游戏，打算代表我的雇主将游戏上传到Facebook。我一直在努力开发游戏，直到今天才决定将游戏上传到Facebook以测试她。但是，我拥有的许多图像都没有显示在屏幕上。我一直在定期通过各种浏览器测试我的游戏，游戏运行良好。我已将游戏上传到我订阅的网络主机，并且运行良好。但是，在复制html文件后，输入php代码并将其上传到我的公司托管，只有少数图像可以工作，而其他图像则有效。我已经检查了存储图像的图像目录，所有图像都在那里。不过我确实注意到了一些事情。我有 3 个画布，每个画布都分层在每个画布的顶部，在 JavaScript 文件中它们是：

    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");

不起作用的图像如下选手 

var drawPlayer = function() {
    if (playerReady) {
        ctx.save();
        ctx.translate(player.x, player.y);
        ctx.drawImage(sprite,0,481,65,59, -(playerImage.width / 2), -34,65,65);
        ctx.restore();
    }
};

游戏结束（当你死的时候）的文本

var setGameOverText = function() {
    button.innerHTML = "RESTART";
    backTrack.pause();
    ctx.clearRect(0, 0, canvasX, canvasY);
    context.clearRect(0, 0, canvasX, canvasY);
    context1.fillStyle = "rgb(0,0, 0)";
    context1.textBaseline = "top";
    context1.font = "20px Helvetica";
    context1.fillText("You have Died, it's game over for you!", 100, 80);
    context1.fillText("Score: " + kills, 200, 220);
    context1.fillText("press the button to restart", 140, 360);
    reset();
    context1.font = "12px Helvetica";
};

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

var setHealthImages = function() {
    var healthImg = new Image();
    healthImg.src = "images/health.png";
    var ix = 423;
    var iy = 524;
    for(i = 0; i < numOfLives; i++) {
        ctx.drawImage(healthImg, ix, iy);
        ix = ix + 20;
    }
};

升级图标的伤害和速度 

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

下面的代码是 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>

只是重申几点，图像的位置正确。该游戏既可以在我自己的服务器主机上的Facebook上运行，也可以在本地运行的PC上运行。我没有提到它们是作为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(){..}

和 

function functionName(){..}

以及请记住，如果对代码的更改似乎在其他地方有效，请清除缓存。

相关文章：