<html>
<head>
<title>Number game</title>
<style>
body{text-align : center}
.Win{color : green}
.Fail{color : red}
</style>
</head>
<body>
<div id="Title">规则...</div>
<div id="Control">
<input id="Input">
<button id="Go">Go</button>
</div>
<div id="Log"></div>
<script type="text/javascript" >
~function(window,document)
{
var MessageWin = function(I,R){return '胜利: 输入为' + I + ', 随机为' + R + ', 相加结果为' + (I + R) + ', 在目标范围内'},
MessageFaill = function(I,R){return '失败: 输入为' + I + ', 随机为' + R + ', 相加结果为' + (I + R) + ', 不在在目标范围内'},
MessageError = function(){return '输入有误, 请输入范围为[-' + Range + ',' + Range + ']的数字'},
Range = 50,
RangeRnd = 80,
RangeWin = 30,
$ = function(Q){return document.getElementById(Q)},
Hint = function(Q,C)
{
var LogElement = document.createElement('div')
LogElement.innerText = Q
C && LogElement.setAttribute('class',C)
LogLast ?
Log.insertBefore(LogElement,LogLast) :
Log.appendChild(LogElement)
LogLast = LogElement
},
Input = $('Input'),
Button = $('Go'),
Log = $('Log'),
LogLast
Button.addEventListener('click',function()
{
var I = parseFloat(Input.value),
R = -RangeRnd + parseInt(2 * Math.random() * RangeRnd + 1)
if (I !== I || Math.abs(I) > Range) return Hint(MessageError())
Math.abs(I + R) <= RangeWin ?
Hint(MessageWin(I,R),'Win') :
Hint(MessageFaill(I,R),'Fail')
})
}(window,document)
</script>
</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金币，有底注，每轮开始的时候可加注，如玩家不跟则底注输掉无法参加游戏，等等之类的各种规则随便发挥
