0

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

    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();
    }
};

gameOver 的文本（当你死时）

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 文件，不包括 app 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 上运行。我没有提到它们作为 html 工作，唯一一次使用 PHP 测试游戏是当我将它上传到 Facebook 时，只有我自己和在公司工作的一些人才能看到游戏对 facebook 社区不可见，因为开发商。

帮助总是受到赞赏。

4

1 回答 1

0

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

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(){..}

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

于 2013-11-14T10:38:44.800 回答