1、 目 录 一、开发背景 4 1 设计背景 4 2 项目意义 4 3 作品简介 4 4,开发环境 4 5,运行环境 5 二、软件详细设计 5 1,WEB开始界面 5 2,进入游戏界面 6 3,游戏浮层 6 4,游戏流程界面 7 三、项目设计 14 1,数据库 14 2,项目结构 16 四、相关代码 16 1,接口代码 19 2,实现接口代码 19 3,JS运行环境 21 4,JS相关内容 22 5,框架代码 32 五、总结和建议 42 参考文献 42 致谢 42
2、 一、开发背景 1 设计背景 宝马汽车一直是汽车界的名牌产品,随着微信的日益普及,宝马决定在微信平台上发布宣传活动的WEB网站。得以更一步扩大宝马的知名度,让大众都了解到宝马的魅力。 2 项目意义 微信是腾讯集团发布的大众交流平台,拥有极大的玩家基数,是宣传和广告的不二之选,宝马为了提升新产品的知名度,决定在微信上发表这个WEB网站,可行性十分之高。 微信的玩家十分普及,大到集团老板,小到居家人群,宝马在中国的定位仅是代步工具,更是身份与富贵的象征,因此宝马所代表的意义被无限的扩大,是人们追求的名牌。从适应性而言,绝对也是明智之选。 3 作品简介 1.宝
3、马汽车展示, 2.互动游戏闯关, 3.用户数据上传. 4.抽取幸运用户发奖。 4,开发环境 (1) 操作系统:Windows 7 (2) 数据库:SQLSERVER (3) 开发工具包:FTP (4) 开发平台:VSS (5) 项目管理工具:VSS 5,运行环境 (1) 服务器:apache (2) windows7、windowsXP 二、软件详细设计 1,WEB开始界面 2,进入游戏界面 3,游戏浮层 4,游戏流程界面 1. 游戏
4、开始页面 2. 321倒计时准备 3. 根据音频按下快门键捕捉汽车图片 4. 根据按下的时机会有不同的汽车图片 5. 最后算出总分 6. 动态填充的排行榜 三、项目设计 1,数据库 用户表 2,项目结构 四、相关代码 1,接口代码 2,实现接口代码 public partial class ajax_ajax : System.Web.UI.Page { private Cmn.JsonItf _Jso
5、n = new Cmn.JsonItf("IsSuccess", "ErrMsg");
///
6、 _ref = AddUsrGame(); break; case "GetTop": _ref = GetTop(); break; default: _ref = _Json.Get(false, "method方法不存在"); break; } Response.Write(_ref); }
7、
///
8、gameResultCount = Cmn.Request.Get("GameResultCount"); string _userID = Cmn.Func.GetUserID(); bool _bool = false; if (_userID == "") { return _Json.Get(false, "未登录"); } if (_gameResultCount == "") { return _Json.Get(false, "综合完整度不
9、能为空"); } if (_gameResult1 == "") { return _Json.Get(false, "第一关完整度不能为空"); } if (_gameResult2 == "") { return _Json.Get(false, "第二关完整度不能为空"); } if (_gameResult3 == "") { return _Json.Get(false, "第三关完整度不能为空");
10、 } string _a = Cmn.DB.getFieldValue("SELECT UserID from usr_Games where UserID = '" + _userID + "'"); if (_a == "") { _bool = Cmn.DB.execSql(@"insert into usr_Games(GameResult1,GameResult2,GameResult3,GameResultCount,UserID)
11、 VALUES ('" + _gameResult1 + "','" + _gameResult2 + "','" + _gameResult3 + "','" + _gameResultCount + "','" + _userID + "') "); if (!_bool) { return _Json.Get(false, "1数据库连入失败!"); } } else { string _gameCount = Cm
12、n.DB.getFieldValue("SELECT top 1 GameResultCount from usr_Games where UserID = '" + _userID + "'"); if (_gameCount == "" || _gameCount == null) { } else { if (Convert.ToInt32(Convert.ToSingle(_gameCount)) < Convert.ToInt32(
13、Convert.ToSingle(_gameResultCount))) { _bool = Cmn.DB.execSql(@"update usr_Games set GameResult1 = '" + _gameResult1 + "',GameResult2 = '" + _gameResult2 + "',GameResult3 = '" + _gameResult3 + "',GameResultCount = '" + _gameResultCount + "', UserID = '" + _userID + @"'
14、 where UserID = '" + _userID + "' "); if (!_bool) { return _Json.Get(false, "数据库连入失败!"); } } } } string _count = (int.Par
15、se(Cmn.DB.getFieldValue("select count(1) from usr_Games where usr_Games.GameResultCount > cast((select usr_Games.GameResultCount from usr_Games where UserID = '" + _userID + "') as numeric(18,2)) "))).ToString(); Cmn.Log.WriteToFile("count",_count); _Json.AddProperty("count", _co
16、unt);
return _Json.ToJsonString();
}
///
17、e usr_Users.UserID = usr_Games.UserID order by cast(usr_Games.GameResultCount as numeric(18,2)) desc");
}
}
3 页面运行环境
3,JS运行环境
///
21、tartCatch = 0; this.StartCatch = function (e) { if (keyStartCatch == 0) { keyStartCatch = 1; if (SiteFunc.MidPicClick) { SiteFunc.adezgu(); _index = index; SiteFunc.AudioLoad(); SiteFunc.Close
22、TimeOut(); SiteFunc.MidPicClick = false; SiteFunc.MidPicClicktrue = true; SiteFunc.Audiobofangdian(); if ($(e).hasClass("jsc_MidBorder1")) { //第一关事件 a = 6; SiteFun
23、c.Score1(SiteFunc.AudiocurrentTime()); if (SiteFunc.WinOrLos(Score1)) { SiteFunc.SpanShow(Score1); SiteFunc.CarPicShow(SiteFunc.AudiocurrentTime()); SiteFunc.Win(); } else {
24、 SiteFunc.Lose(); }; //SiteFunc.indexN(); } if ($(e).hasClass("jsc_MidBorder2")) { //第二关事件 SiteFunc.Score2(~~(SiteFunc.AudiocurrentTime() / 2));
25、 Soc = Score2; if (key == 0) { SiteFunc.dierguanPicshow(); setTimeout(function () { // setTimeout(function () { SiteFunc.pingmudia
26、njipanding = true; SiteFunc.tishi(); }, 2000); }, $("audio").eq(_index)[0].duration - $("audio").eq(_index)[0].currentTime + 500) } if (key == 1) {
27、 if (SiteFunc.WinOrLos(Score2)) { SiteFunc.SpanShow(Score2); SiteFunc.CarPicShow(SiteFunc.AudiocurrentTime()); SiteFunc.Win(); Score2 = Score2; Soc = 0;
28、 } else { SiteFunc.Lose(); }; } //SiteFunc.indexN(); key++; if (key == 2) { key = 0; }
29、 } if ($(e).hasClass("jsc_MidBorder3")) { //第三关事件 SiteFunc.Score3(((SiteFunc.AudiocurrentTime() + "").split(".")[0] + "." + (SiteFunc.AudiocurrentTime() + "").split(".")[1][0]) / 3); Soc = Score3;
30、 if (key == 0 || key == 1) { if (key == 0) { SiteFunc.disanguanPicshow1(); setTimeout(function () { SiteFunc.tishi2(); }, 2000)
31、 } else if (key == 1) { SiteFunc.disanguanPicshow2(); setTimeout(function () { SiteFunc.tishi3(); }, 2000) } setTimeou
32、t(function () { // key++; setTimeout(function () { SiteFunc.pingmudianjipanding = true; }, 2000); }, $("audio").eq(_index)[0].
33、duration - $("audio").eq(_index)[0].currentTime + 500) } if (key == 2) { key++; SiteFunc.CarPicShow(SiteFunc.AudiocurrentTime()); //SiteFunc.Jscshow(); if (
34、SiteFunc.WinOrLos(Score3)) { SiteFunc.SpanShow(~~(Score3)); SiteFunc.Win(); Score3 = Score3; Soc = 0; setTimeout(function () {
35、 //3S后事件 //关闭图片以及得分 SiteFunc.SpanHide(); SiteFunc.Jschide(); AnimateFrame.SlideTo(5); SiteFunc.param();
36、 $(".jsc_jscpic").eq(0).find('img').attr("src", $(".Part1CarPic").find("img").attr("src")); $(".jsc_jscpic").eq(1).find('img').attr("src", $(".Part2CarPic1").find("img").attr("src")); $(".jsc_jscpic").eq(2).find('img').attr("src"
37、 $(".Part2CarPic2").find("img").attr("src")); $(".jsc_jscpic").eq(3).find('img').attr("src", $(".Part3CarPicPart1").find("img").attr("src")); $(".jsc_jscpic").eq(4).find('img').attr("src", $(".Part3CarPicPart2").find("img").attr("src
38、")); $(".jsc_jscpic").eq(5).find('img').attr("src", $(".Part3CarPicPart3").find("img").attr("src")); SiteFunc.BackPagePicPart(); //SiteFunc.MidPicClick = true; }, 5000);
39、 } else { SiteFunc.Lose(); }; } //SiteFunc.indexN(); if (key == 3) { key = 0; } }
40、 //通用事件得分以及图片显示 //$(".MidPic").removeClass("jsc_MidPic"); //setTimeout(function () { // SiteFunc.MidPicClicktrue = false; // //SiteFunc.MidPicClick = true; //}, 5000); } setTime
41、out(function () { keyStartCatch = 0; }, 100); } } //点击进入下一关 this.StartNextGame = function () { //SiteFunc.indexN(); SiteFunc.MidPicClick = false; $(".ResultPercent").hide(); $(".jsc_Pic").hide(); $("
42、PassBtn2").hide(); SiteFunc.IsLockScenes(); $(".jsc_hide").show(); $(".PassBtn").show(); } this.tishi = function () { //提示点击屏幕开始 $(".EnterNextRound").eq(0).show(); } this.tishi2 = function () { $(".EnterNextRound").eq(1).
43、show(); } this.tishi3 = function () { $(".EnterNextRound").eq(2).show(); } this.canguan = function () { //展览浮层显示 //$(".jsc_PublicScenes").show(); } this.canguanClose = function () { //展览浮层显示 //$(".jsc_PublicScenes").hide();
44、 } //分享浮层 this.fenxiangshow = function () { $(".ShareFucWrap").show(); } this.fenxianghide = function () { $(".ShareFucWrap").hide(); } //活动规则事件 this.huodongguize = function () { $(".ActivityRuleWrap").delay().fadeIn(); }
45、 this.huodongClose = function () { $(".ActivityRuleWrap").delay().fadeOut(); } //再来一次 初始化 this.NextNewGame = function () { key = 0; index = 0; Number = 1; AnimateFrame.SlideTo(0); SiteFunc.LoseHide(); SiteFunc.Jscshow
46、); SiteFunc.PassBtnShow(); SiteFunc.CarPicHide(); Score1 = 0; Score2 = 0; Score3 = 0; $(".jsc_PassBtn2").hide(); SiteFunc.MidPicClick = false; SiteFunc.SpanHide(); //Soc = 0; } //失败了重玩 this.Replay = fun
47、ction () { var _index = AnimateFrame.CurScenes.ScenesNo; key = 0; SiteFunc.LoseHide(); SiteFunc.Jscshow(); SiteFunc.PassBtnShow(); SiteFunc.CarPicHide(); $(".jsc_PassBtn2").hide(); SiteFunc.MidPicClick = false;
48、 SiteFunc.SpanHide(); if (_index == 2) { Score1 = 0; index = 0; } else if (_index == 3) { Score2 = 0; index = 1; } else if (_index == 4) { Score3 = 0; index = 3 } } this.P
49、icpanduan = function (soc) { if (soc < 50) { SiteFunc.GamePic1(); } else if (soc < 70) { SiteFunc.GamePic2(); } else if (soc < 80) { SiteFunc.GamePic3(); } else if (soc < 90) { SiteFunc.GamePic4(); } els
50、e { SiteFunc.GamePic5(); } } this.GamePic1 = function () { //小于50 if (index == 1) { $(".Part1CarPic").find("img").attr("src", "images/Carround/round1/mountain_50.jpg"); } else if (index == 2) { $(".Part2CarPic1






