最近对js的小游戏开发来了兴趣，前段时间由于回答度娘知道的提问写了个贪吃蛇，虽然难度不大并不复杂，感觉还挺有意思。感觉小时候玩过的什么俄罗斯方块，坦克大战什么的都可以试着用js实现下，这天来了兴致又想写一个，其实我小时候最喜欢玩的游戏就是打砖块了，当时五年级时在学校上微机课时总是在那偷偷玩打砖块还有个雪地的保龄球还有个潜艇在深海的游戏，都忘了名字了，玩儿的不亦乐乎。可能叫法不一样，就是下图这种，想必大家都玩儿过，这里就不废话了
了解需求
大家玩打砖块都是一关一关过的，每一关（这里就打算做一关）砖块码成一个图形保持不变，飞球起于挡板弹起按直线远动，不受重力约束，遇到墙壁则按反射角方向反弹。遇到砖块则砖块消失继续反弹，同时计分，下落回来时需控制下方的挡板左右移动去接住飞球，继续弹起，砖块被打完或者飞球没接住则游戏结束。再复杂点打掉砖块时偶尔还会有道具下落，用平台接住后道具作用生效。还有那个底部的挡板有点特殊，我记得小时候玩的时候如果球打在了挡板的左方，不管球从哪个方向飞回来的都会继续反弹回左方，越偏左反弹的越厉害，右边同理。游戏的运行需求大概就是这些。
这里用js去写的话我还真没写过，但可以试试，本文算是边写代码边记录博客，如果觉得废话太多可以直接看最后的完整代码。
开发思路
首先我想到的运行原理大概是砖块都是一个个的div,飞球是会移动的div，如果飞球的div与砖块的div有重合，则砖块消失即消除掉这个html元素，砖块的坐标，飞球的坐标应该都是用div的position设为absolute，控制left,top坐标来操作的。具体飞球的移动位置应该是用向量去计算。大概就是这个思路，感觉应该不是太难。不知道是否有更好的方法去实现，也查阅过一些其它人的代码，基本都是黑色一片，绿色注释一句没有，让人有点费解。干脆先自己做一个再说。
搭建模型
首先先做个不会动的模型出来，四壁，砖块，球，挡板，计分板，首先就是四壁，画个div,这里div的width，height取值上我是这样想，既然这个游戏按坐标去运行会涉及到很多的计算。长宽最好取个整数，而不是用百分数。当然不要设的太大，最好打开网页就能全部显示没有滚动条，这样方便玩。这里我设的是600*600居中显示。代码如下：
<body style="background-color:grey;"> <div align="center"> <div style="width:600px;height:600px;background-color:#BFEFFF;border:5px groove #87CEFA;position:relative;" id="mainDiv"> </div> </div> <body>
运行一下如下：
然后是砖块，就是一个个div用固定位置拼上去，但得先想好个形状。记得小时候玩的时候最大的乐趣就是努力让飞球能从一个缺口上去在上面自己飞行。想来想去大盖想到这么个形状：
这些div都是固定的，用left top来固定坐标。为了实现对称居中效果，四壁的宽是600，那左眼处的最上方第一个div中心距离应该是四分之一处，取150.至于砖块的长宽，我取的是width:28px;height:13px;因为左右上下我都加了1px做缝隙，这样可以让每个砖块能独立出来显示分明，有人说给每个div加上border不用行了么。这里我试了有的浏览器默认border算在宽度里，即加了border宽度还是28，有的浏览器加了border则宽度变为了30.所有这里就不用border了。这样加上缝隙的话每个砖块站位刚好为整数30*15；每下一层比上一层多一个。第一层的左侧距离左壁是150 - （30/2）等于145，每下一层靠近左侧15。到第九层时靠左侧10.刚好留了个空隙。下面的排列基本都是边写变推算。不再傲述。
画完砖块再画两个div,一个挡板，一个飞球。均居中底部显示，还有一个计分板放最上面居中，坐标left,top可以自己算出代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style>
#mainDiv div{
width:28px;height:13px;background-color:blue;position:absolute;
}
</style>
<script>
var $ = function (id) {//方便按id提取
return document.getElementById(id);
};
window.onload=function(){
var x =150;var y = 15;
var m = $("mainDiv");
for(var i=1;i<=9;i++){
for(var j=0;j<i;j++){//左眼媚
var di = document.createElement("div");
di.style.top = y+(i-1)*15;//每列向下移动一行
di.style.left= x-i*15+j*30;//每列向左移动15，同行的每一个向右移动一个div宽度30
m.appendChild(di);//即i控制列的换行，j控制每行的输出这里写了个x,y其实就是从上向下画图时的起点，下面加150，加450等其实是换位置画图的意思，完全可以直接用算好的数字而不用x,y。只为清楚计算过程
//右眼媚
var di1 = document.createElement("div");
di1.style.top = y+(i-1)*15;
di1.style.left= x+300-i*15+j*30;
m.appendChild(di1);
}
}
for(var i=1;i<=10;i++){//左眼眼睛处不用j去控制每行，因为每行的个数位置是一样的
var di = document.createElement("div");
di.style.top = y+150+(i-1)*15;
di.style.left= x-15;
m.appendChild(di);
//右眼
var di1 = document.createElement("div");
di1.style.top = y+150+(i-1)*15;
di1.style.left= x-15+300;
m.appendChild(di1);
}
for(var i=1;i<=10;i++){//大嘴
for(var j=0;j<i*2-1;j++){
var di = document.createElement("div");
di.style.top = y+450-(i-1)*15;
di.style.left= x+165-i*30+j*30;
m.appendChild(di);
}
}
}
</script>
</head>
<body style="background-color:grey;">
<div align="center">
<div style="width:600px;height:600px;background-color:#BFEFFF;border:5px groove #87CEFA;position:relative;" id="mainDiv">
<div id="markDiv" style="width:60px;height:25px;top:0;left:270;border:1px dotted blue;background-color:#BFEFFF"></div>
<div id="qiuDiv" style="width:10px;height:10px;top:580;left:295;background-color:red;"></div>
<div id="bangDiv" style="width:150px;height:10px;bottom:1;left:225;background-color:black;"></div>
</div>
</div>
<body>
运行结果如下
火狐，IE,谷歌，360，显示结果基本一样。如果大家有更好的图形画法可以自己设计。
加入控制
游戏开始前是可以先找个好位置出击的，即飞球飞起前可以随挡板左右移动，就先做个左右的移动。这里就用在body上加键盘监听事件了。用左右箭头控制好了。同时还得有一个boolean值来确定当前游戏是否已经开始，如果已经开始了飞球就不要随挡板移动了，代码如下：
var bangleft = 225;//取挡板当前的左坐标，就是left距离
var qiuleft = 295;//取飞球当前的左坐标
var bs = 10;//按一次键移动多少，
var kflag = false;//标记游戏是否已经开始
//键盘处理事件
function keydownEvent(event){
var bang = $("bangDiv");//取挡板div
var qiu = $("qiuDiv");//取飞球的div
if(event.keyCode==37){//如果是左箭头
for(var i = 0;i<bs;i++){
if(bangleft-1!=0){//0即left为0，即已经到左移动到了墙壁，就不再起作用。
bangleft-=1;//每一次向左移动1，其实上面做了for循环，结果就是每按一次向左移动了bs=10，为什么要循环着去加而不一次性去加，原因很简单就是为了防止一次就加过了超出了范围，同时我们可以通过设定bs参数的值来改变挡板移动的快慢
bang.style.left = bangleft+"px";//改变挡板位置
if(!kflag){//如果游戏没开始
qiuleft-=1;
qiu.style.left = qiuleft+"px";//改变飞球位置
}
}
}
}
if(event.keyCode==39){//如果是右箭头同理
for(var i = 0;i<bs;i++){
if(bangleft+1!=450){//检测是否碰右壁
bangleft+=1;
bang.style.left = bangleft+"px";
if(!kflag){
qiuleft+=1;
qiu.style.left = qiuleft+"px";
}
}
}
}
}
body要加上<body style="background-color:grey;" onkeydown="keydownEvent(event)">
飞球的运行
然后先不考虑打砖块，先让飞球可以飞起来，无视砖块自由在四壁内运动，这里还有一点我们应该都知道，小时候玩的时候飞球飞起时并不是直线飞起的，总是偏左或偏右那么一点，因为如果设定直线向上的话挡板也保持不动，游戏开始后飞球就回一直来回上下做运动。
先不管角度问题，先想怎么移动，这里要复习一下中学的课程了看下图：
假设球在x轴y轴的（0，0）为起点，以α角移动，假设每个单位时间内移动了s（速度）.就是图中的斜线距离。到了坐标(x1,y1).那已知s的值和α的值就可求出移动的距离x1,y1。赋值给球的坐标做为新坐标，球就移动了，这样我们用setTimeout函数不断去调用这个方法球就可以以直线自己前进了。也先不考虑撞不撞强，假设α=30度，s=1;那单位时间内飞球的新坐标就是（s*sin30,s*cos30)如果忘了正弦余弦的用法可以去百度，我确实忘了。。所以飞球按30度角直线运行的方法就是如下代码：
var qx = 295;//飞球初始坐标left
var qy = 580;//飞球初始坐标top
function go(){
var qiu = $("qiuDiv");
qx = qx +1*Math.cos((2*Math.PI/360)*30);
qy = qy -1*Math.sin((2*Math.PI/360)*30);
qiu.style.left = qx+"px";
qiu.style.top = qy+"px";
setTimeout("go()",10)
}
这里要说明js里cos，sin的用法，Math.sin(x) 表示的是x 的正弦值。Math.cos(x) 是 x 的余弦值。但js里的这个x是弧度而不是角度，假设角度是α，转化为弧度就是
2*Math.PI/360*α我们这里假设的是α=30度。直角三角形里知道一个锐角α和斜边长s=1,求α的对边y1的长就是s*sin(α)在此例中即为
1*Math.sin((2*Math.PI/360)*30);
求a的邻边x1就是cos....同理
由于我们现在假想的是左上飞，所以是x取加值，y取减。然后循环调用go(),10是间隔时间，即0.01秒。s=1相当于限制了每次移动的位移，如果s设的过大，则球会变快而且平滑效果很差几乎是瞬移，所以是s设的小，然后让间隔时间变短，这样平滑效果好点，大家可以自己更改调试。现在大概飞行的原理知道。然后就考虑撞墙了。
一开始我钻了牛角尖（此段为本人的一段傻瓜笨蛋推理，容易严重误导人，不愿看的可以直接看下面的红字‘最终其实原理是这样的’），总是考虑要是碰的是左壁，或者右壁，去区分这些，然后去改变角度什么的，后来一些如果详细区分的话后面还要考虑砖块，那就要去考虑碰的是砖块的上下左右，太麻烦了，就好像那个故事有个皇帝要在每条街铺上地毯防止脚踩伤，而大臣建议何不让脚去穿个鞋呢，忘了故事大概了就是这样。我们应该考虑的是这个飞球是上下左右哪个边碰壁了。这样需要考虑的就少了。
如何判断碰壁呢，这里不考虑砖块的情况下很简单。就是去计算坐标罢了。那角度是怎么改变的呢，原理那提到是反射角，飞球的右边如下图：
后来我又继续画图上边碰壁右边碰壁画完我发现
最终其实原理是这样的其实折腾来折腾去这里都是四方形，α的值是不会变的，角度的改变都是在围绕α在做文章。同样单位时间内的移动距离s也是不会变的，x方向y方向的移动距离的绝对值也是不会边的，其实撞墙就是改变x，或y位移的正负而已，至于角度我们没必要去考虑。添加代码如下：
var qx = 295;//飞球初始坐标left
var qy = 580;//飞球初始坐标top
var jiao = 89;//初始飞行角度
var zx = 1;//控制left位移的正负
var zy = -1;//控制top位移的正负
var rp = null;//控制游戏进程
function go(){
var qiu = $("qiuDiv");
qx = qx +zx*Math.cos((2*Math.PI/360)*30);
qy = qy +zy*Math.sin((2*Math.PI/360)*30);
qiu.style.left = qx+"px";
qiu.style.top = qy+"px";
if(qy>=580){
//alert(qx)
//alert(qx<bangleft||qx>bangleft+150)
if(qx<bangleft||qx>bangleft+150){//判断是否接住
clearTimeout(rp);
}else{
zy=-1;
rp = setTimeout("go()",1);
}
}else{
if(qx>=600)zx=-1;
if(qx<=0)zx=1;
if(qy<=0)zy=1;
rp = setTimeout("go()",1);
}
}
判断与砖块碰撞
这样基本实现了接球并移动。但不管怎么接球都是按原来的角度走的，运行起来球是一直走一条轨道。这里就用到开始需求那里说的。
如果球打在了挡板的左方，不管球从哪个方向飞回来的都会继续反弹回左方，越偏左反弹的越厉害，右边同理。而且碰到砖块虽然不会改变虽然α没变都轨迹会变。这里要解决两个问题了。一个是改变角度，一个是碰撞砖块。貌似后一个更难点，但刚写完撞墙顺思路可以继续想如何判断撞砖块。
我又一次想到了数组。就是生成砖块的同时把每个砖块放入数组中去，然后飞球每移动就与所有砖块进行比较是否碰撞。则开始的加载代码改为：
var zdivs = new Array();//用于存储所有的砖块。
window.onload=function(){
var x =150;var y = 15;
var m = $("mainDiv");
for(var i=1;i<=9;i++){
for(var j=0;j<i;j++){
var di = document.createElement("div");
di.style.top = y+(i-1)*15;
di.style.left= x-i*15+j*30;
m.appendChild(di);
var di1 = document.createElement("div");
di1.style.top = y+(i-1)*15;
di1.style.left= x+300-i*15+j*30;
m.appendChild(di1);
zdivs[zdivs.length]=di;
zdivs[zdivs.length]=di1;
}
}
for(var i=1;i<=10;i++){
var di = document.createElement("div");
di.style.top = y+150+(i-1)*15;
di.style.left= x-15;
m.appendChild(di);
var di1 = document.createElement("div");
di1.style.top = y+150+(i-1)*15;
di1.style.left= x-15+300;
m.appendChild(di1);
zdivs[zdivs.length]=di;
zdivs[zdivs.length]=di1;
}
for(var i=1;i<=9;i++){
for(var j=0;j<i*2;j++){
var di = document.createElement("div");
di.style.top = y+450-(i-1)*15;
di.style.left= x+150-i*30+j*30;
m.appendChild(di);
zdivs[zdivs.length]=di;
}
}
}
然后在飞球移动的js后面加上循环判断，如果相碰则将此砖块在数组中移除同时设置display为none;然后难点就是如何判断飞球与某一个div相碰，相碰又是以何种方式反弹。想想就这几种情况，飞球的右边与砖块左边碰，或者下边与砖块上边碰等等
判断两个div是否相碰，即有重合点的方法其实是数学上判断两个矩形是否重叠。
假设两个矩形的位置如图，两个矩形a和b，分别有4个边，ax1是左边的x坐标，ay1是上班的y坐标，ax2是右边的x坐标，。。。。。我们取a,b的同侧边最大的那一边组成的新坐标sx,sy,如果这个坐标同时存在与两个矩形内就说明两个矩形重合。即ax1与bx1比较取最大的bx1,ay1与by1取最大的by1。因为这里是用的top，left所以越靠左left越大，越靠下top越大。这个的具体道理就不好说了，好好看几何吧。
相碰的问题解决了，那飞球是从哪侧碰撞的呢？该反弹回哪边？这里我的思路是飞球a,砖块b，可能的撞击方式是a左碰b右，a右碰b左，a上碰b下，a下碰b上四种，这里暂不考虑角碰角原路返回。按四种情况的话a左碰b右的话，a左与b右的left差值，与后面三个a右b左的left差值，a上b下的top差值，a下b上的top差值，这四个差值的绝对值应该是哪个最小判定为是哪种情况相撞。个人是这么理解，如有异议欢迎提出。所以知道了是那种情况的碰撞，也就明白了该如何去改变方向即zx,zy的值。
然后有了思路则飞球每走一步就去与数组里的div遍历去对比是否相碰。继续写在上面top<=580后面
function go(){
var qiu = $("qiuDiv");
qx = qx +zx*Math.cos((2*Math.PI/360)*jiao);
qy = qy +zy*Math.sin((2*Math.PI/360)*jiao);
if(qy>=580){
if(qx<bangleft||qx>bangleft+150){//判断是否接住
clearTimeout(rp);
}else{
zy=-1;
rp = setTimeout("go()",1);
}
}else{
for(var i=0;i<zdivs.length;i++){
var io = checkIsP(qx,qy,zdivs[i].offsetLeft,zdivs[i].offsetTop);
if(io!=0){
zdivs[i].style.display = "none";
zdivs.splice(i,1);
if(io==1){
zx=1;
}
if(io==2){
zx=-1;
}
if(io==3){
zy=1;
}
if(io==4){
zy=-1;
}
break;
}
}
if(qx>=600)zx=-1;
if(qx<=0)zx=1;
if(qy<=0)zy=1;
qiu.style.left = qx+"px";
qiu.style.top = qy+"px";
rp = setTimeout("go()",1);
}
}
function checkIsP(qx,qy,zx,zy){
var f = {
x:qx,
y:qy,
x1:qx+10,
y1:qy+10
}
var z = {
x:zx,
y:zy,
x1:zx+30,
y1:zy+15
}
var sx;var sy;
sx = f.x>=z.x?f.x:z.x;
sy = f.y>=z.y?f.y:z.y;
if(sx >= f.x && sx <= f.x1 && sy >= f.y && sy <= f.y1 && sx >= z.x && sx <= z.x1 && sy >= z.y && sy <= z.y1){
return seSmall(Math.abs(f.x-z.x1),Math.abs(f.x1-z.x),Math.abs(f.y-z.y1),Math.abs(f.y1-z.y));
}else{
return 0;
}
}
function seSmall(a,b,c,d){
if(a<b&&a<c&&a<d){
return 1;
}
if(b<a&&b<c&&b<d){
return 2;
}
if(c<a&&c<b&&c<d){
return 3;
}
if(d<b&&d<c&&d<a){
return 4;
}
}
这样碰撞问题基本解决了
更改角度
开篇还提到要按挡板的接球位置来更改反弹的角度。其实这个想想就简单，就按接触挡板时的距离对角度做百分比就行了与挡板接触处代码改为如下
if(qy>=580){
if(qx<bangleft||qx>bangleft+150){//判断是否接住
clearTimeout(rp);
}else{
zy=-1;
if((qx-bangleft)>(75)){
jiao = 90-(qx-bangleft+10-75)/75*90;
zx = 1;
}else{
jiao = 90 - (75-(qx-bangleft+10))/75*90;
zx=-1;
}
rp = setTimeout("go()",1);
}
基本这个游戏就完成了，感觉还是设计的挺烂的，每次移动都耗那么多计算，其实在挡板与最下层砖块间的空白可以省去不用计算，因为这一空间根本没砖块，所有在计算for循环前加上
else{if(qy<=480)
for(var i=0;i<zdivs.length;i++){
还有一点也可以优化下，就是砖块都是一行一行排列的。所有可以对砖块进行按行分组。当飞球飞到此行的高度时只对比此行的砖块，还有积分模块也不是很难，这里就不再写了，太长了。源代码见上文，算是抛砖引玉。
（转载请注明出处http://blog.csdn.net/uucai）
相关推荐
【JS实现的打砖块小游戏】是一个典型的前端应用实例，主要使用JavaScript这门客户端脚本语言来构建。JavaScript，简称JS，是Web开发中的重要工具，尤其在网页交互和动态效果方面发挥着巨大作用。这款小游戏完全依赖...
总结，使用Cocos Creator和TypeScript开发打砖块小游戏，能够让我们体验到游戏开发的乐趣，同时掌握2D游戏开发的基本流程和技巧。从组件设计、物理引擎的应用到TypeScript的脚本编写，每一部分都是提升游戏开发能力...
打砖块游戏是20世纪70年代末期诞生的一种简单但具有挑战性的电子游戏，玩家通过移动一个平台来反射弹球，目标是打破屏幕上排列的砖块。 在HTML5中，我们可以使用Canvas元素来绘制游戏画面。Canvas是一个基于矢量...
总的来说，这款“打砖块游戏源码”充分利用了JavaScript的面向对象编程特性、事件驱动和DOM操作，实现了一个无需额外图形库的纯JavaScript游戏。通过研究源码，开发者可以学习到JavaScript游戏开发的基本技巧和思维...
总的来说，HTML5弹珠打砖块游戏的开发涉及了前端开发的多个方面，包括HTML5的Canvas绘图、JavaScript的游戏逻辑实现、CSS3的视觉设计以及可能的Web Audio API和本地存储的运用。通过学习和理解这个项目，开发者不仅...
这段代码实现了一个简单而经典的游戏：打砖块。这个游戏通过 HTML、CSS 和 JavaScript 技术构建，在其中运用了三项核心技术：碰撞检测、画图和事件监听。 首先，游戏的基本规则很简单：玩家通过控制底部的板来反弹...
【弹球打砖块HTML5源码】是一个基于HTML5技术开发的游戏项目，它展示了HTML5在游戏开发领域的强大功能。HTML5是超文本标记语言的第五次重大修订，为网页开发者提供了更多元化和现代化的工具，尤其在多媒体内容和交互...
【jQuery网页版打砖块小游戏源码】是一个利用JavaScript库jQuery和HTML5技术构建的趣味互动游戏。在这款游戏中，玩家通过控制一个可移动的挡板来反弹小球，击碎屏幕上排列的砖块，每击碎一块砖，分数就会增加。游戏...
通过下载并研究这个"html5网页版打砖块小游戏源码"，你可以深入理解HTML5、JavaScript以及它们在游戏开发中的实际运用，这对于提升你的前端技能和游戏开发能力大有裨益。同时，这也是一个实践与理论相结合的好机会，...
打砖块小游戏是一种经典的街机游戏，玩家通过移动挡板来反射小球，击碎屏幕上方的砖块。这个项目的目标是用Canvas API来创建游戏的逻辑和视觉表现。 描述中提到，“界面比较丑”，这意味着开发者可能只关注了游戏的...
总的来说，这个"网页打砖块游戏html代码_html_网页打砖块参考"提供了全面的学习资源，不仅展示了HTML、CSS和JavaScript在游戏开发中的应用，也提供了实践机会，有助于提升开发者在Web交互设计方面的专业能力。...
本教程将通过一个经典的小游戏——“网页打砖块”来深入探讨JavaScript的逻辑以及编程思想，旨在帮助初学者更好地理解和掌握这一强大的脚本语言。 首先，我们要了解JavaScript的基础知识。JavaScript是一种解释型的...
《JS抖音弹球打砖块小游戏》是一款基于JavaScript编写的网页游戏，深受用户喜爱，尤其在抖音等社交媒体上广泛传播。这款游戏充分利用了HTML5的技术特性，为玩家提供了一个轻松愉快的娱乐体验。以下是对这个游戏的...
在本项目中，我们主要探讨的是如何使用JavaScript语言制作一个打砖块（Breakout）游戏。打砖块游戏是一款经典的街机游戏，玩家通过控制一个移动的平台来反弹一个小球，目的是击碎屏幕上排列的砖块。在这个JavaScript...
在开发过程中，我们可能还需要使用到一些JavaScript库或框架，如jQuery简化DOM操作，或者使用Three.js这样的3D图形库，为游戏添加更多维度的视觉体验。同时，对于性能优化，我们需要注意合理地使用...
本篇文章将深入解析一款基于jQuery实现的网页版打砖块小游戏，旨在帮助读者理解如何利用jQuery进行游戏开发，并从中学习到JavaScript编程技巧。 首先，我们要明白jQuery的核心是DOM操作、事件处理和动画效果。在这...
在本文中，我们将深入探讨如何使用JavaScript（JS）来实现一个经典的打砖块游戏。打砖块游戏是一种简单而有趣的游戏，玩家通过控制一个挡板防止小球落下，并利用小球击碎屏幕顶部的砖块。以下是实现这个游戏所需的...
【简易打砖块游戏v1.4.zip】是一款基于互联网技术开发的休闲娱乐游戏，它融合了经典打砖块游戏的玩法与现代游戏设计元素。在这个版本v1.4中，开发者可能对游戏进行了功能优化、性能提升或者修复了一些已知问题，以...
6. **物理引擎**: 虽然打砖块游戏的物理规则相对简单，但Phaser的内置物理引擎（如P2.js或Arcade Physics）仍能帮助处理碰撞检测和物体运动，使得游戏更真实且易于调试。 7. **WebGL渲染**: Phaser支持WebGL渲染...
在本文中，我们将深入探讨如何使用Java EE技术开发一个简单的打砖块小游戏。作为一个初学者的项目，这个小游戏虽然可能存在不足，但它提供了一个实践Java编程基础和理解Web应用程序架构的良好机会。 首先，Java EE...