基于JavaScript的网页游戏的设计与制作

摘要：本文以基于JavaScript的网页游戏的设计与制作为题目展开相关探讨。首先对其进行了概述，主要从网页游戏的开发工具与设计思路方面进行介绍和框架说明，着重阐述了网页游戏在设计中的各个环节及需要实现它的各个流程，最后介绍了关于网页游戏的演示、测试方面的问题。希望通过本文初步论述可以引起更多的交流与讨论，同时希望可以为该方面的研究提供一些可资利用的信息，以供参考。

关键词：JavaScript 网页游戏 设计制作

中图分类号：TP393.092 文献标识码：A 文章编号：1007-9416（2015）12-0000-00

伴随时展、科技进步，以计算机为基础、互联网络为支撑的信息化技术已经成为了当今时代中的主要因素，不但给人类的生活形态与精神面貌带来了较大的转变，最重要的是在很大程度上改变了人们的生存方式，使人类拥有了另一种生存的可能，同时由于它的发展，也催生了游戏方面的变革，尤其是“网游”的出现，俘获了千万颗童心未泯的心，其利弊得失是当今颇受争议的问题。然而，还是应该对于这一项技术加以关注，对基于JavaScript的网页游戏的设计与制作进行分析研究。

1 概述

网页游戏通过浏览器实现无端网游，只需拥有一根网线、一台电脑即可实现无客户端下载的Web游戏。其最大优势在于程序设计者完全能够一面进行设计、一面进行调整、修改、补充工作。因其系统可以为操作人员提供一个人机交互的界面，从而采用问答的方式，在接收信息后，进行处理，这种在系统――操作者间的交互式处理方式，主要是进行交互作用的信息处理。相对而言，其直观性、可控性与灵活度有了很大的提升，是非交互式处理无法完成的优势所在，依目前发展情况来看，其普遍性在增加，应用范围在逐步扩大，而且备受广大用户喜爱，免除了来自于单道任务所带来的诸多效率问题，因而当操作者较慢的时候，它却可以进行其他任务的处理，节省了时间，使资源得到了充分利用，并且提高了计算机的工作效率。在结合工作方面，将分时处理、交互式处理两种处理方式有效结合起来，不但可以使多个用户进行同时对话；还可以与批处理方式结合起来；在每种结合方式中，都可体现出其独特的优势与特征，而且应用起来也比较方便。

2 开发工具和设计构思分析

2.1 JavaScript

HTML技术用来制作网页，而JavaScript即是通过其自身作为脚本语言的功能对其网页进行功能添加，主要集中于动态功能方面，从而达到命名用户的操作得到响应的效果。其最大特点即是，当其源代码发送至客户端，尤其是在运行之前，没有必要进行任何过程的编译处理，通常来讲，主要是把文本格式中的字符代码发往浏览器，然而让浏览器独自进行解释性运行。由于它是动态、弱类型、基于原型的语言，内置支持类，所以在安全性方面，相对较差，其联系程度较高，独立性不强，因而如果出现一条无法运行的情况时，便会出现其下的语言也不能继续运作，从该方面来看，解译次数有时会偏多，所以，速度慢是其最大缺点。另一方面，作为编译语言，Java的源代码却需要编译，才能传递到客户端运行，因此，就需要搭建起一个平台，使解释器、仿真器，将特定的编译代码加以适度化的约束，以此来达到安全可靠的保障作用。

2.2 CSS

层叠样式表或级联样式表，全称为Cascading Style Sheet，简称CSS.其作用在于对浏览网页进行控制，主要是通过一组格式设置规则加以实现，也就是通过CSS来达到这一目标。功能在于分离页面中的形式与内容，使二者可以独立存放于HTML文档之中。这样，有助于将维护站点的外观变得更加简便，也可以简化HTML文档代码，减少浏览器在加载过程中的时间。从CSS的特征分析，在修改页面方面易于实施，压缩网页体积，同时还能保持页面风格的完全统一。从其功能与作用的价值看，可降低成本，增加工作效率，因为它可以同时管理多个页面，并且根据保存方式，又可以通过改变CSS文档，达到从外部样式到站点中页面的格局的充化。也就是说，对于样式的更新，即可以将网站中的全部元素加以更新。

3 网页游戏设计及制作流程

3.1 游戏背景、素材及举设计举例

根据要上的说明可知游戏需要其可玩性、效果性，所以，先应该以层叠式样表对将要完成的游戏所给定的各要素片理好，做了版面的整理工作，比如，游戏元素的图像选择以及整理工作等。另一方面，游戏素材应该能够透过它来实现一定的吸引人注意的效果。一般而言，除了网站中的撷取，还应该进行PS处理、自绘画等。

举例，为了明白起见，以下以“打地老鼠”为具体的说明，呈现出交互式网页游戏的设计方法。首先，需通过鼠标，完成每一个操作，规则之一，即是不能击打那些白色的地老鼠，打击一次，会让玩家丢一次命。其次，设置一些带有炸弹的地老鼠，分别将其放置在游戏屏幕的左右两边，需对其进行不断打击，否则，即会发生爆炸，当爆炸发生后，也会损失一次命。第三，为玩家设置三次性命，全部丢掉即算GAME OVER。最后，在界面显示出玩家的最终成绩，即打死地老鼠的最终个数。而且在该界面继续显示开始或结束的选项，供玩家选择。该游戏的基础在于地老鼠的出现，需要有相应的控制方法，以使其可以随机在屏幕中出现，其实质即是地老鼠对应元素出现的高度伴随情况之出现。在击打地老鼠时，需要先将选中，再进行鼠标点击即可。

以“打地老鼠”为例，其中需要四种办法达到对地老鼠出现的控制。第一种方法是randomBunny（）函数，第二种方法 是bunnyJumpl（）函数，第三种方法是bunnyJump2（）函数，第四种方法是bunnyJump3（）函数。第一个主要是用来控制地老鼠的随机出现，而对于其它的三种方法，则可依次表述为对于各类伴随情况出现的控制。对于击打，需要通JavaScript中的两个函数来完成，分别是其中的onmousedown/onclick，其交互作用发生在击打地老鼠之时，两个函数在不同的时间发生，前者发生于点击时的事件发生，而后者是点击后放开时事件发生。具体来讲，若要击打到地老鼠，先应该有一个函数，也就是说，clientX，，clientY，getPosition，通过后面的数，即可得到对应的元素的横向与纵向坐标，当地老鼠处于所要打击的坐标范围内，即会被鼠标的点击所打中，也就是说，利用规范与判定来达到所需要的结果。上面未提到的白色地老鼠无需打击以及其他条件及要求，都需要对应的功能来实现。

当出现白色地老鼠与带有炸弹时，便会失去生命，因此，需要根据这一条件设定一个lostlife的函数，其主题简单，在判别条件的设置时，只需要调动该函数，使其值与发生丢失生命值相合即合，也就是说，令lives.lostlife=1，当其不为空值时，执行的是live.lostlife++，当判断live.lostlife>=3时，即可调用函数endgame（）去终止游戏，此时计时停止，等级信息、分数等一一输出到游戏界面。在开始与结束的菜单上，还需要设置两个不同的按钮，分别通过相应的函数进行设置。其中的基本原理是相通的，而且对于各种功能设置及处理方式区别也不是很大，主要是以对应元素与所需功能间的规范化与控制来达到最终所要达到的效果。

除了这些功能设置外，还需要对整个游戏进行相应的控制。其主要内容即是通常玩家可以看到的时间与升级问题，在此中，需要通过计时条、计时条时间被控制来达到。比如，在计时条中，resumlevel（）控制，可以将计时条透明性、计时性进行相应规定，还可以利用计时条的滚动进行提与计时时间控制，这里就需要另一个函数leaveup（）来完成，当这走完时，即可将其设计到升级条件之下，升级的根据也就是地老鼠所停留的时间的长短、数量等。

3.2 演示及测试

首先，安装网页浏览器，以上面所说的“打地老鼠”网页游戏可知，不同的ID可以对不同的地老鼠进行控制，而每个对象的出现都是随机的，当击中白色掉一条命，当击不中带有炸弹者，发生爆炸，也会掉一条命。在演示与测试过程中，可以通过调试功能，对图片的变换进行闪烁界定即可。

3.3 标准及要求

在基于JavaScript的网页游戏的设计与制作中，需要对JavaScript客户端脚本语言有一个明确的认识、对其基于对象的编程思想加以把握，在具体的游戏开发项目中，先应该有一个合理的计划书与备忘录的制作，然后根据项目设计要求及标准，利用一些模块进行网页游戏制作。以下以最为基础，用途最广泛的连连看为例，来介绍作为一个可行项目的基于JavaScript的网页游戏的设计与制作实施过程。

首先，应该在项目设计的基础之上，以设计方案，依次将网页制作、程序开发、测试、文档编写等完成。其要求在于将JavaScript 客户端作为脚本编程技术出发点，进行开发。在设计连连看网页游戏时，先对其网页界面进行整体上的布局，比如，从审美角度的要求，从广大客户需的角度来设定一些原则，将操作系统与界面之间的可操作性进行细致区分，比如在界面的上端可进行时间、初始化等信息的显示；比如设置难度系数易、难、困难等供玩家自主选择等；在界面下端可以设置游戏主体界面，将其位置布置到中位，调整好整体的比例与效果，其实也可以将其反过来，上下换位处理，只是在设计时，给定了一种习惯性，因而导致了最终的适应性，如果反过来，以手机自带的方式提供给广大用户，大多是可以形成其新的玩家习惯的。其次，在连连看游戏网页中，应该对其功能模块设计加以认真分析，功能模块设计，主要是需要了解清楚其中的基本功能需求为何，也就是说，如同上面的“打地老鼠”游戏一般，先确定清楚项目中的对象，并创建根对象；在游戏区的控制或能模块设计方面、游戏区功能模块设计方面等等，都应该先在程序中分级管理，也就是说按照文件的上录入进行分类管理，以项目工程的主到子进行分别建立，最后在完成一系列具体的制作之后，进行测试与演示，然后对其中的效果加以评估。无论是根据模板进行直接的设计，还是利用代码的方式进行编程设计，其结果都可达到最终的网页游戏效果。但是最主要的还是以上面所说的JavaScrip技术、CSS技术为运用基础，把交互式技术引入到网页中，从而实现网页游戏功能。

4 结语

总之，笔者认为从技术的角度而言，基于JavaScript的网页游戏的设计与制作把网络在线小游戏变成了可能，提升了游戏的动态性，增加了机与人之间的交互作用，使可玩性得到了在线升级，随着文化主题的带入，该方面的游戏越来越受到追捧，但同时也应该防止因游戏上瘾所带来的麻烦，尽可能的在游戏的设计与制作方面，根据不同年龄阶级设置一些适应各层级的游戏项目，从而保护未成年人的健康成长。

参考文献

[1] 方蓓.基于JavaScript的简易游戏的实现[J].软件导刊，2013（3）.

[2] 冯科融，王和兴，连加美等.基于HTML5的3D多人网页游戏实现方案[J].微型机与应用，2013（1）.

[3]黎志雄，黄彦湘，陈学中等.基于HTML5游戏开发的研究与实现[J].东莞理工学院学报，2014（5）.

[4] 平淑文，潘珏羽，张学金等.基于HTML5和JavaScript轻量型动画框架开发[J].计算机技术与发展，2013（12）.