砸金蛋html5小游戏设计总结

一.设计思路

页面上有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");            // 获取被砸金蛋的id
        var 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事件在这里不适用，因为图片其实已经加载了，只是在更换图片。有效的方法是在标签头部添加标签，如下：

当然，这张图片需要隐藏起来，CSS样式如下：

.broken-none {
            display: none;
        }

这样就可以解决这个问题了。