所谓web游戏我已知的有两种，一种是通过浏览器引入C或者AS的客户端，进行socket交互
还有一种是你玩完了，最后发送一个请求去结算。
推荐楼主去看下HTML5游戏怎么进行通讯的，还有php做socket的实例
1、市场前景前端程序员缺口非常大，因为它正式成为一个岗位才几年，国内最早出现前端招聘岗位在2012年左右。随着现代互联网应用的火爆，前端难度加大，导致后台程序员不能完全搞定，所以企业们急切需要真正懂前端技术的“前端人员”。
近十年以来，IT行业发展火热，衍生了很多新职业，例如UI设计师、开发工程师、软件测试工程师等等，在众多备受瞩目的新生职业中，Web前端工程师是其中的一员。
随着互联网的迅猛发展，各种互联网项目也不断兴起，对用户体验提出了更高的要求，前端开发也由此逐渐成为了重要的研发角色。从2012年至今，“Web前端工程师”的需求持续走高，薪酬也是水涨船高，所以，有不少人立志要成为前端开发工程师。
2、就业形势
Web前端可选择的岗位有：前端开发工程师、资深前端开发工程师、网站重构工程师、前端架构师等等。
虽然近两年大数据、人工智能等很火，但Web前端开发依然是十分热门的，特别是随着谷歌、YouTube、FireFox等大型企业纷纷将视线转向HTML5，前端开发已经进入HTML5时代，所以，Web前端在今后十年仍有很大的发展空间。
据统计，我国HTML5前端工程师人员的缺口将达到10多万，因此，Web前端工程师是一个非常有“钱”途的职业，并且薪酬会根据技能的深入而有不同程度的增长，其中北京、上海、广州、深圳等地前端工程师的薪资待遇更是一路飙升。
3、说完了前景状况，接下来就是学习前端了，前端入门虽简单，但也并不是人人都能从事这个行业的，如何鉴定自己适不适合学前端呢？
1. 你是否能耐得住性子？学习web前端接触得最多就是各种繁复的字母代码，需要你耐得住性子安安静静地坐下来研究技术。如果你做事经常三分钟热度，容易半途而废、或是性格急躁急于求成，编程可能不太适合你。
2. 你是否有持之以恒的毅力？web前端不仅知识点多，而且前端发展得快，新的框架和思想被不断的提出，对于新手来会有不小的心理压力，过快的节奏让新手学起来比较吃力，想要学习web前端就要做好做好长期学习，更新自己知识库的准备，持之以恒的毅力才能让你在长途跋涉的工作过程中坚持下来。
3. 是否具备基本的逻辑思维？选择工科专业的人一般逻辑思维能力一般要强于文科生，web前端需要用逻辑思维处理问题的能力。针对甲方用代码实现，首先要自己理解透彻，编写出来的程序才能拒绝bug。
如果以上提到问题，你都能从容攻克，那么你是适合学习web前端的。
4、到这里呢，先恭喜你进入前端行业，接下来就是如何学习前端了，前端的学习路线是什么呢？
零基础学习路线：
1、HTML、CSS基础、JavaScript语法基础。学完基础后，可以仿照电商网站（例如京东、小米）做首页的布局。
2、JavaScript语法进阶。包括：作用域和闭包、this和对象原型等。相信我，JS语法，永远是面试中最重要的部分。
3、jQuery、Ajax等。jQuery没有过时，它仍然是前端基础的一部分。
4、ES6语法。这部分属于JS新增的语法，面试必问。其中，关于 promise、async 等内容要尤其关注。
5、HTML5和CSS3。要熟悉其中的新特性。
6、移动Web开发、Bootstrap等。要注意移动开发中的适配和兼容性问题。
7、前端框架：Vue.js和React。这两个框架至少要会一个。入门时，建议先学Vue.js，上手相对容易。但无论如何，同时掌握 Vue 和 React 才是合格的前端同学。
8、Node.js。属于加分项，如果时间不够，可以先不学，但至少要知道 node 环境的配置。
9、自动化工具：构建工具 Webpack、构建工具 gulp、CSS 预处理器 Sass 等。注意，Sass 比 Less 用得多，gulp 比 grunt 用得多。
10、前端综合：HTTP协议、跨域通信、安全问题（CSRF、XSS）、浏览器渲染机制、异步和单线程、页面性能优化、防抖动（Debouncing）和节流阀（Throtting）、lazyload、前端错误监控、虚拟DOM等。
11、编辑器相关。Sublime Text 是每个学前端的人都要用到的编辑器。另外，前端常见的IDE有两个：WebStorm 和 Visual Studio Code。WebStorm 什么都好，可就是太卡顿；VS Code就相对轻量很多。个人总结一下：用VS Code 的人越来越多，用 WebStorm 的人越来越少。
12、TypeScript（简称TS）。ES 是 JS 的标准，TS 是 JS 的超集。TS属于进阶内容，建议把上面的基础掌握之后，再学TS。
鼠标划过显示二级菜单：<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>jquery下拉菜单</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<style>
* { margin: 0 padding: 0 }
body {font-family: Arial, Tahoma, sans-serif font-size: 11px color: #232323 }
.wrap { width: 800px margin: 0 auto }
#nav { margin: 0 padding: 0 list-style: none border-left: 1px solid #d5dce8 border-right: 1px solid #d5dce8 border-bottom: 1px solid #d5dce8 border-bottom-left-radius: 4px -moz-border-radius-bottomleft: 4px -webkit-border-bottom-left-radius: 4px border-bottom-right-radius: 4px -moz-border-radius-bottomright: 4px -webkit-border-bottom-right-radius: 4px height: 50px padding-left: 15px padding-right: 15px background: #edf3f7 }
#nav li { float: left display: block background: none position: relative z-index: 999 margin: 0 1px }
#nav li a { display: block padding: 0 font-weight: 700 line-height: 50px text-decoration: none color: #818ba3 zoom: 1 border-left: 1px solid transparent border-right: 1px solid transparent padding: 0px 12px }
#nav li a:hover, #nav li a.hov { background-color: #fff border-left: 1px solid #d5dce8 border-right: 1px solid #d5dce8 color: #576482 }
#nav ul { position: absolute left: 1px display: none margin: 0 padding: 0 list-style: none -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2) -o-box-shadow: 0 1px 3px rgba(0,0,0,0.2) box-shadow: 0 1px 3px rgba(0,0,0,0.2) -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2) padding-bottom: 3px }
#nav ul li { width: 180px float: left border-top: 1px solid #fff text-align: left }
#nav ul li:hover { border-left: 0px solid transparent border-right: 0px solid transparent }
#nav ul a { display: block height: 20px line-height: 20px padding: 8px 5px color: #666 border-bottom: 1px solid transparent text-transform: uppercase color: #797979 font-weight: normal }
#nav ul a:hover { text-decoration: none border-right-color: transparent border-left-color: transparent background: transparent color: #4e4e4e }
* html #nav ul { margin: 0 0 0 -2px }
.clearfix:after { content: "." display: block clear: both visibility: hidden line-height: 0 height: 0 }
.clearfix { display: inline-block }
html[xmlns] .clearfix { display: block }
* html .clearfix { height: 1% }
</style>
</head>
<body>
<div class="wrap">
<ul id="nav">
<li><a href="#">网站主页</a></li>
<li><a href="#">关于我</a>
<ul>
<li><a href="#">Company</a></li>
<li><a href="#">Authors</a></li>
<li><a href="#">Advertising</a></li>
</ul>
</li>
<li><a href="#">RSS订阅</a>
<ul>
<li><a href="#">PSD</a></li>
<li><a href="#">Patterns</a></li>
<li><a href="#">Icons</a></li>
</ul>
</li>
<li><a href="#">精美博文</a>
<ul>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">MySQL</a></li>
</ul>
</li>
<li><a href="#">Web工具</a>
<ul>
<li><a href="#">Performance</a></li>
<li><a href="#">CMS Plugins</a></li>
<li><a href="#">Cheat Sheets</a></li>
</ul>
</li>
<li><a href="#">Originals</a>
<ul>
<li><a href="#">Website Design</a></li>
<li><a href="#">Mobile</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#nav li').hover(function() {
$('ul', this).slideDown(200)
$(this).children('a:first').addClass("hov")
}, function() {
$('ul', this).slideUp(100)
$(this).children('a:first').removeClass("hov")
})
})
</script>
</body>
</html>
