一.设计思路
页面上有3个金蛋，点击锤子时，锤子砸向金蛋，蛋有砸碎效果，并用对话框弹出中奖结果。
页面地址：砸金蛋小游戏。
二 .总结
1.ajax缓存
这个项目在线上运行时，如果设置为每天用户可以砸蛋3次，如果每次都是中一枚金币，发现后两次中的金币没有添加到用户金币。
同事说查一查是不是ajax请求缓存了，在网上一查，确实是get方式的ajax请求被缓存了。如果采用get请求方式，第一次请求完后，如果第二次请求url地址和第一次一样，浏览器不会向服务器再次请求，而会把第一次请求的数据直接返回。要解决这个问题，只需将get改为post即可。
代码如下：
$.ajax({url: url,type: "post",// 不能使用get方法 timeout: 5000, // 设置请求超时时间dataType: "json",async: true,data: {// 需要将用户ID发送给服务器"username": getUserName()},success: function(data) {prizeInfo=data;｝
2.锤子的动画效果
初始打开页面时，效果如图一所示：
图1
点击金蛋时，锤子应有砸向金蛋的动画。这个可以用jQuery的animate()函数实现，函数如下：
function smashingEggs(eggid, xCoordinate, yCoordinate){document.getElementById('sound').play(); // 砸蛋音效$("#hammerId").animate({// 锤子移动砸蛋动画"left": xCoordinate,"top": yCoordinate,}, 30, function () {if (eggid == "egg3") {$("#hammerId").addClass("hammerRotateY180Deg"); // 如果砸金蛋3，锤子绕Y轴选择180°}if (eggid == "egg3") {$("#" + eggid + " img").attr('src', "/resources/game/egg/images/broken-none.png");// 为保证砸egg3后的显示效果，也为防止egg3图片顶出右边框，扩大包含egg3的div。eeg1和egg2不用改变$("#" + eggid).addClass("egg3NewClass");$("#" + eggid + " img").addClass("brokenEgg3None");}else {$("#" + eggid + " img").attr('src', "/resources/game/egg/images/broken-none.png");$("#" + eggid + " img").addClass("brokenEgg1And2None");}});}
这个函数有3个输入参数，蛋ID、锤子最终位置X轴坐标和Y坐标。这三个参数的获取方式如下：
$(".egg").click(function(){var smashedEggId=$(this).attr("id"); // 获取被砸金蛋的idvar smashedEggX=$(this).offset().left;// 获取被砸金蛋的X坐标var smashedEggY=$(this).offset().top; // 获取被砸金蛋的Y坐标});
这样，点击某个金蛋时，锤子就有砸向这枚金蛋的动画效果，用户看到的就是锤子把蛋砸碎了。页面效果请访问：砸金蛋。
3.先从服务器获取奖品json数据？还是先显示蛋碎的动画？
按照通常的思路，都是先从服务器获取数据，然后显示蛋碎的图片，最后显示中奖结果对话框，一开始我也是这么做的，但是在线上发现了bug。在网速很慢时或者断网的情况下，由于服务器长时间未响应，页面上的效果是锤子已经到了金蛋的位置，但是蛋没有砸碎，整个页面静止不动，给用户感觉好像是死机了，这样肯定是不行的。
为了解决这个问题，我在程序上做了一些调整，先砸蛋，再请求数据。这样就解决这个问题了。如果网络很慢，获取奖品数据失败，弹出网络异常的对话框。如下图所示：
4.砸蛋后样式的变化
砸蛋后，应该用蛋碎的图片替换原图片，但是美工做图一般都不会考虑到前端设计需要的图片大小需求，这个时候就可以使用CSS样式调整蛋碎图片的大小和位置，但是对于最右侧的金蛋，蛋碎后很可能超出屏幕右侧，这个时候可以使用css样式：overflow:hideen;来解决。
还有就是砸蛋后需要用蛋碎的图片替换完整金蛋的图片，js代码如下：
$("#" + eggid + " img").attr('src', "../resources/images/broken-none.png");$("#" + eggid + " img").addClass("broken-egg-1-and-2-none");
CSS样式如下：
.broken-egg-1-and-2-none{ /*未中奖和中奖图片大小不一样，添加不同的样式*/position: relative;left: -62%;margin-top: 70%;width: 248%;}
由于美工做的两种图片大小不一样，我使用了CSS样式把蛋碎的照片放大到248%，但是如果broken-none.png加载未完成，就已经执行了“$("#"+ eggid +" img").addClass("broken-egg-1-and-2-none");”，后果是什么？后果就是完整的蛋就有一个突然变大的效果，怎么解决这个问题？img的load事件在这里不适用，因为图片其实已经加载了，只是在更换图片。有效的方法是在<body>标签头部添加<img>标签，如下：
<body><img src="../resources/images/broken-none.png" class="broken-none"> <!--预加载，防止切换图片时更换样式导致蛋异常变大-->
当然，这张图片需要隐藏起来，CSS样式如下：
.broken-none {display: none;}
这样就可以解决这个问题了。
