如何在HTML游戏中保存进度

Question

我想知道如何保存玩家在我正在制作的游戏中所取得的进步.我可以通过cookie或者如何保存到播放器计算机吗？感谢您的帮助!

Answer 1

使用Javascript保存localy有两个选项,即cookies和localStorage.

使用Cookies:

该document.cookie属性用于设置,读取,更改和删除浏览器cookie.

• 要设置cookie,document.cookie="cookiename=Foo Bar";或者如果您想要一个到期日期,请设置如下:document.cookie="cookiename=Foo Bar; expires=Mon, 18 Jan 2016 12:00:00 UTC";
• 要阅读cookie,只需该代码document.cookie将返回该页面上您网站的所有Cookie.它不会将它们放在数组中,而是将其格式化为单个字符串cookiename=foobar; nextcookiename=foobar;等.您可以轻松地将其转换为数组document.cookie.split("; ");
• 要更改cookie,只需按上述方法再次设置它,因为它会覆盖它
• 要删除cookie,请使用过去的过期日期再次设置它.这将覆盖它,然后它将过期,删除它.

使用localStorage:

新的HTML5 localStorage对象是另一种在本地存储数据的方法:

• 要在localStorage中设置项目,请使用 localStorage.setItem('itemname','contents');
• 要阅读一个项目,它就是localStorage.getItem('itemname');.您可以使用"truthy"值检查项目是否存在(即if(localStorage.getItem('itemname')))
• 您可以使用localStorage.setItem上述方法更改localStorage项目.
• 您可以使用删除localStorage项目localStorage.removeItem('itemname').

我应该使用哪个？

您可以想到的几乎任何浏览器都支持Cookie,但它们会过期(它们会在一段时间后被删除),也可能被用户禁用.就个人而言,我也发现document.cookie了一个笨重的界面.

另一方面,localStorage不能被用户轻易禁用,并为程序员提供了更易于访问的界面.据我所知,localStorage没有过期.由于localStorage是HTML5的新功能,因此它可能无法在某些旧版浏览器中使用(但它在新浏览器上有很大的覆盖率,请参阅http://caniuse.com/#feat=namevalue-storage).请注意,在整个网站上存储数据是有限制的,而不仅仅是针对一个项目.

最后,这取决于你.选择一个你认为最适合你游戏的游戏 - 如果你已经在使用其他HTML5内容(例如<canvas>),那么localStorage没有任何损害,你将使用更可靠的存储方法.但是,如果您对cookie感到满意,那么它们是成千上万非常受欢迎的网站使用的完美可行选项 - 有些甚至同时使用它们!Cookie的一个优点是它们可以由您的Web服务器访问,而localStorage则不能.

无论哪种方式,您都需要查看cookie法律,该法律通过Web应用程序影响用户计算机上的所有类型的存储.

Answer 2

这个问题最困难的部分不是找到一种保存数据的方法，而是以这样的方式设计游戏，让你有一个可以序列化以在会话之间保存的“游戏状态”。

\n\n

想象一下，您正在编写一个带有玩家和分数的游戏，并且您使用两个变量来表示它们。

\n\n

var player = { x: 4, y: 3 };\nvar score = 10;\n

\n\n

使用 localStorage 保存这些变量相对容易。

\n\n

function save() {\n  localStorage.setItem(\'player\', JSON.stringify(player));\n  localStorage.setItem(\'score\', JSON.stringify(score));\n}\n\nfunction load() {\n  player = JSON.parse(localStorage.getItem(\'player\'));\n  score = JSON.parse(localStorage.getItem(\'score\'));\n}\n

\n\n

我们必须记住在存储之前将它们转换为 JSON，因为 localStorage 只能接受字符串值。

\n\n

每次您使游戏状态变得更加复杂时，您都必须返回并编辑这两个函数。它还具有强制用全局变量表示游戏状态的不良效果。

\n\n

另一种方法是用一个原子 \xe2\x80\x94 来表示整个状态，在本例中是一个 Javascript 对象。

\n\n

var state = {\n  player: { x: 4, y: 3 },\n  score: 10\n};\n

\n\n

现在您可以编写更直观的保存和加载函数。

\n\n

var SAVE_KEY = \'save\';\n\nfunction save(state) {\n  localStorage.setItem(SAVE_KEY, JSON.stringify(state));\n}\n\nfunction load() {\n  return JSON.parse(localStorage.getItem(SAVE_KEY));\n}\n

\n\n

此模式允许您将状态保留为局部变量并使用这些函数来处理它。

\n\n

var state = load();\nstate.score += 10;\nsave(state);\n

\n\n

实际上，在存储机制之间切换非常容易，但localStorage可能是最容易上手的。

\n\n

对于小型游戏，您可能永远不会达到 5MB 大小限制，如果达到了，您还会发现同步JSON.stringify和localStorage.setItem操作会导致您的游戏在保存时冻结几秒钟。

\n\n

如果这成为一个问题，那么您可能应该寻找一种更有效的方法来构建状态，并且可能考虑设计一种增量保存技术，针对IndexedDB而不是 localStorage。

\n