我想在 jsf/primefaces 项目中实现一个 pacman 游戏。
游戏可以找到here .
这是我的 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>
我也没有输出... 更新
我的文件夹结构:
最佳答案
<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>
(request.contextPath 已经由 JSF 定义，你可以使用它)
<h:outputScript>标记对于从 primeFaces 加载现有脚本和资源也很有用，例如加载 jquery:
<h:outputScript library="primefaces" name="jquery/jquery.js" />
(资源文件夹中文件夹路径含义中的library属性)
关于JSF 中的 Javascript - 没有库、没有名称和正文内容的 outputScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16304060/