登录和注册页面切换
游戏在启动后，访问/client/index.html ，默认显示注册页面，如果已经注册过，则显示用户登录页面。
由于客户端的js代码基于jquery框架实现，因此需要具备一定的js能力，如果没有jquery的相关知识也没有关系，基本的流程也可以看明白。
打开client/index.html里面，在页面最后有如下代码
if(!Modernizr.localstorage) { //是否支持本地存储
var alert = document.createElement("div");
alert.className = 'alert';
alertMsg = document.createTextNode("You need to enable cookies/localStorage to play BrowserQuest");
alert.appendChild(alertMsg);
target = document.getElementById("intro");
document.body.insertBefore(alert, target);
} else if(localStorage && localStorage.data) { //如果本地存储数据，则显示登录页面
parchment.className = "loadcharacter";
}
到这里，我们可以看到是通过修改CSS样式来实现页面的切换。
同时，我们也接触到了localStoreage的用法，数据的存取访问，只需要引用localStorage.data对象
注册页面的实现
如果localStorage.data没有存储任何信息，仍然显示最开始的注册页面
<article id="createcharacter">
在这个里面可以看到注册页面所需要的信息，只有一个输入用户名的文本框
当输入文字后，Play按钮和上半部分的小人修改状态，相关的触发代码在 client/js/main.js，line 91-93.
$('#nameinput').bind("keyup", function() {
app.toggleButton();
});
使用的jquery语法，当在用户名文本框有键盘输入消息时候，调用toggleButton修改状态，具体代码位于client/js/app.js
登录页面的实现
如果切换登录页面，查看client/index.html文件
<article id="loadcharacter">
在这个里面可以看到没有了文本框，出现了另外一个元素
<div id="playername" class="stroke">
在 client/js/main.js，line 139 中，从localstorage中读取上次保存的用户名，设置到这个div里面
var data = app.storage.data;
if(data.hasAlreadyPlayed) {
if(data.player.name && data.player.name !== "") {
$('#playername').html(data.player.name);
$('#playerimage').attr('src', data.player.image);
}
}
到此，已经完成了注册和登陆页面的流程。