砸金蛋html5小游戏设计总结

最新推荐文章于 2024-04-27 20:17:24 发布

yz06061079

最新推荐文章于 2024-04-27 20:17:24 发布

阅读量1w

点赞数

分类专栏： html5 文章标签： javascript html5 砸金蛋小游戏

本文链接：https://blog.csdn.net/yangzhen06061079/article/details/52464775

版权

本文总结了一款HTML5砸金蛋小游戏的设计思路与遇到的问题及解决方案。包括ajax请求缓存问题，锤子动画效果实现，砸蛋动画顺序调整以优化用户体验，以及砸蛋后图片样式变化的处理方法。通过这些优化，提高了游戏的流畅性和用户体验。

摘要由CSDN通过智能技术生成

一.设计思路

页面上有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) {