1

我想在 jsf/primefaces 项目中实现一个 pacman 游戏。

游戏可以在这里找到。

这是我的jsf页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<h:head>
    <title>Screen</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <style type="text/css">
@font-face {
    font-family: 'BDCartoonShoutRegular';
    src: url('BD_Cartoon_Shout-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

#pacman {
    height: 450px;
    width: 342px;
    margin: 20px auto;
}

#shim {
    font-family: BDCartoonShoutRegular;
    position: absolute;
    visibility: hidden
}

h1 {
    font-family: BDCartoonShoutRegular;
    text-align: center;
}

body {
    width: 342px;
    margin: 0px auto;
    font-family: sans-serif;
}

a {
    text-decoration: none;
}
</style>
</h:head>
<h:body>

        <div id="shim">shim for font face</div>

        <h1>HTML5 Pacman</h1>

        <a href="http://arandomurl.com/">Writeup</a> |
  Code on <a href="http://arandomurl.com/">Github</a>

        <div id="pacman"></div>
        <h:outputScript src="../pacman.js"/>
        <h:outputScript src="../modernizr-1.5.min.js"/>

    <script>
    // <![CDATA[
    var el = document.getElementById("pacman");

    if (Modernizr.canvas && Modernizr.localstorage && 
        Modernizr.audio && (Modernizr.audio.ogg || Modernizr.audio.mp3)) {
      window.setTimeout(function () { PACMAN.init(el, "./"); }, 0);
    } else { 
      el.innerHTML = "Sorry, needs a decent browser<br /><small>" + 
        "(firefox 3.6+, Chrome 4+, Opera 10+ and Safari 4+)</small>";
    }
 // ]]>
  </script>


</h:body>
</html>

我的页面没有例外。但是，当我加载页面时，它看起来像这样：

在此处输入图像描述

如您所见，游戏没有被添加！

知道如何解决吗？

更新

当我做：

    <script src="pacman.js"></script>
<script src="modernizr-1.5.min.js"></script>

我也没有输出... 更新

我的文件夹结构：

在此处输入图像描述

4

2 回答 2

3

该<h:outputScript>标签只能用于从resources文件夹加载脚本。如果您希望从文件夹外的其他文件resources夹加载，请使用以下代码：

<script type="text/javascript" src="#{request.contextPath}/path/to/js"></script>

您的站点的上下文路径在哪里request.contextPath（例如：/pacman）。例子：如果你的js文件在这个路径：/waitingScreen/audio/pacman.js 对应代码：

<script type="text/javascript" src="#{request.contextPath}/waitingScreen/audio/pacman.js"></script>

（在 JSF 中已经定义了 request.contextPath，你可以使用它）

该<h:outputScript>标记对于从 primeFaces 加载现有脚本和资源也很有用，例如加载 jquery：

<h:outputScript library="primefaces" name="jquery/jquery.js" />

（library资源文件夹中文件夹路径含义的属性）

于 2013-05-01T13:03:39.867 回答
2

这是完全预期的行为。tag中没有src定义属性。你必须像这样使用它的属性：<h:outputScript>name

<h:outputScript name="pacman.js"/>

附带说明一下，这当然意味着您的文件存储在webapp/resourcesWeb 应用程序的文件夹中。

于 2013-04-30T16:37:16.710 回答