代码如下
<%@ page contentType="text/htmlcharset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>测试</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function drawThis(obj){
if(obj.style.border=="1px solid red"){
obj.style.border="1px solid blue"
}else{
obj.style.border="1px solid red"
}
var div = document.getElementsByTagName("div")
var leftX = ""
var leftY = ""
var rightX=""
var rightY=""
for ( var i = 0i <div.lengthi++) {
if(div[i].style.border=="1px solid blue"){
if(div[i].className=="left"){
leftX = $(div[i]).position().left+70
leftY = $(div[i]).position().top+35
}else if(div[i].className=="right"){
rightX = $(div[i]).position().left
rightY = $(div[i]).position().top+35
}
}
}
if(rightX!=""&&leftX!=""){
for ( var i = 0i <(rightX-leftX)/2i++) {
var newDiv = document.createElement("div")
var y = (rightY-leftY)/((rightX-leftX)/2)
$(newDiv).css("background-color", "red")
$(newDiv).css("z-index","2")
$(newDiv).css("left",(leftX+i*4))
$(newDiv).css("top",(leftY+i*y))
$(newDiv).css("height",y+"px")
$(newDiv).css("width","4px")
$(newDiv).css("position","absolute")
$("#detail").append(newDiv)
}
}
}
</script>
</head>
<body>
<div align="center" style="margin-top: 20pxmargin-left: 30%" id="detail">
<div class="left" style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-right: 200px" onclick="drawThis(this)">a</div>
<div style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-left: 200px">1</div>
<br />
<br />
<br />
<br />
<br />
<div style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-right: 200px">b</div>
<div style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-left: 200px">2</div>
<br />
<br />
<br />
<br />
<br />
<div style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-right: 200px">c</div>
<div class="right" style="cursor:pointerborder: 1px solid redtext-align: centerfloat:leftwidth: 70pxheight: 70pxfont-size: 40pxline-height: 70pxmargin-left: 200px" onclick="drawThis(this)">3</div>
</div>
</body>
</html>
1，html写好界面，定义好class和id2，为了模拟出扑克牌21点游戏，应先定义卡牌池中有1-10，J,Q,K每个数字和字母分别有4个
3，js中实现界面交互，如点击开始按钮，随机从卡牌池中抽取一个数字或字母存入临时变量a，并附于点数之和num其相应的点数
4，点击抽牌按钮随机从卡牌池剩余的卡牌中抽取，对应的卡牌存入变量a中，点数之和num=num+本次抽卡的点数
5，当num>21时提示玩家爆点，小于21点时可选按钮抽牌，等于21点时提示恭喜之类的话，如果点击完成抽牌则记录此玩家点数
6，同理可扩充玩家至2,3,4....个，原理相同，不同玩家存储对应的变量就可以了，最终通过所有<=21点的玩家num,num1,num2来判断输赢
7，同理可设置庄家，庄家在与其他玩家点数相同时赢得对方
8，在此基础上就能增添许多功能了，比如每个玩家默认100金币，有底注，每轮开始的时候可加注，如玩家不跟则底注输掉无法参加游戏，等等之类的各种规则随便发挥
有是有，但并不是很多，而且都是贪吃蛇之类的，非常小的游戏，即便是页游也一样。能运行在浏览器端的语言，确实只有JS，但在开发阶段，却并不一定要使用JS写。而是用其他语言写，直接使用JS写游戏，实在太自虐了。
JS本身的缺点非常严重，如果只是写DOM的话，其实并没什么感觉，因为代码量太少。
但如果写类似游戏这种复杂逻辑，代码量一变大，瞬间就令人崩溃了。弱类型，回调地狱问题，即便将来版本更新到ES10，也不可能完全解决。
如果你看过一个游戏项目的JS源码，你会发现一个非常恐怖的现象。在代码的最底部，有几百个，甚至几千个大括号。。。。所有大型程序的JS源码，拉到最底部，大概都是长这个样子的：
} } } } } } } } } } } } } } } } } } } } } } } } } } } }} } } } } } }} } } } } } } } } } } } } } } } } } } }.Listen(127.0.0.1) } } } } } } } } } } } } } } } } } } } } }} } } } } } } } } } } } } } } }}
大括号的数量还必须绝对精准，少一个，或者多一个，都无法正常运行。。。这就是平时所说的回调地狱。由于JS项目总是函数里面套函数，层层相套，这叫做回调函数。层数一多，就算你是N年的老手，也照样懵比。。。。
所有的游戏项目，都比网页特效的代码量要多的多。。。比如写一个斗地主，就需要4，5万行的JS代码。。。。。最底部的大括号数量，轻松上千。。。。
弱类型的缺陷更严重，但由于解释起来篇幅会很长，所以这里就不提了。
所以为了避开JS本身太多的语法缺陷，一般游戏项目，都是使用其他语言编写，最后再通过一些手段，编译成JS。。。就如同你用一般编程语言编写，最终运行的时候，只有1和0的道理一样。。。在制作页游的时候，一般都是用强类型语言编写，最后开发完成之后，把那些强类型语言编写的代码，通过一些手段“转换”成JS代码。
“转换”成JS代码的方法有很多，其中在游戏行业比较主流的，一共有三种：
1，ActionScript语言，简称AS语言。也就是当年FLASH使用的那个语言。。。当年也曾辉煌过，后来随着FLASH的没落而逐渐没落。。。但有很多H5游戏引擎，也同样使用AS语言。比如LayaAir引擎等。
2,TypeScript语言，简称TS语言。由微软出品，微软和谷歌共同维护的一门完全符合ECMA标准的语言，可以视作JS的超集。超集这个概念怎么理解呢？就是“所有的JS语言，同时也是TS语言，而TS比今天的JS，更像未来的JS”。就比如目前的JS版本只出到了ES6或ES7。那么ES10是啥样？现在并没人见过，连ECMA组织也不知道。。。但有一点可以确定的是，它和TypeScript长的很像。而TS是包含JS的。换言之，JS本身也可以视作是TS的一部分。只是TS里的内容要远比JS多的多。这语言主要有两种用法，一是像AS语言一样结合游戏引擎，比如cocos creator，白鹭等引擎都支持。还有一种用法就是。。。结合Three.JS之类的库，完全按照JS本身的用法去使用。
3，C#语言。虽然JS得名字里面带个Java。但和它长的最像的语言，却并不是JAVA，而是C#。简单说就是：“JS的名字和JAVA有多像，语法就和C#有多像”。所以C#也比较容易转换成JS。但这并不是重点，重点是有一个超级牛的游戏引擎，是使用C#作为开发语言的。就是大名鼎鼎的Unity3D。Unity3D可以直接把C#编写的游戏项目，虚拟现实项目等，编译发布到WebGL。
