最强大脑上小四鄙视星际迷航的项目,认为就是放大版的找茬。个人感觉项目难度还是非常高的。闲来无事,用jquery写了一个类似的小游戏。
使用JQuery + Bootstrap 的框架来搭建html,结构如下:
game
--css
--js
--fonts
--game.html
新建一个文件夹game。
从 http://d.bootcss.com/bootstrap-3.3.5-dist.zip 下载bootstrap,解压后把所有的文件夹(css, fonts, js)都copy到game目录下,再从http://code.jquery.com/jquery-1.12.0.js 下载jquery,并copy到game/js目录中,在game/css目录中新建game.css文件,在game/js中新建game.js, 在game目录中新建game.html。
然后用编辑工具打开上面的三个文件,贴上内容:
game.css
body { background-color: gray; } #screens { height: 200px; } #leftScreen { position: relative; height: 100%; background-color: black; border-right: 2px solid gray; padding: 0px; } #rightScreen { position: relative; height: 100%; background-color: black; border-left: 2px solid gray; padding: 0px; } #controllers { height: 40px; line-height: 40px; background-color: green; } #controllers button { height: 40px; } @keyframes circle-show { 0% { transform: scale(0); } 25% { transform: scale(0.25); } 50% { transform: scale(0.5); } 75% { transform: scale(0.75); } 100% { transform: scale(1); } } @-webkit-keyframes circle-show { 0% { -webkit-transform: scale(0); } 25% { -webkit-transform: scale(0.25); } 50% { -webkit-transform: scale(0.5); } 75% { -webkit-transform: scale(0.75); } 100% { -webkit-transform: scale(1); } } .circle { position: absolute; -webkit-animation: circle-show 3s; -moz-animation: circle-show 3s; animation: circle-show 3s; width: 6px; height: 6px; border-radius: 50%; background-color: white; } .circle-hidden { display:none; } .circle-find { background-color: red; }
game.js
var LEVEL = { 1 : { n : 10, t : 20 }, 2 : { n : 20, t : 30 }, 3 : { n : 50, t : 100 }, 4 : { n : 200, t : 500 }, 5 : { n : 500, t : 1000 }, 6 : { n : 1000, t : 2000 } }; var FIND = 5; var timer = false; var data = { status : -1, level : 0, time : -1, pass:false, find : FIND }; var HEIGHT = 0, WIDTH = 0; var resizeWin = function() { var windowHeight = $(window).height(); var screensHeight = windowHeight - 41; $("#screens").css('height', screensHeight); $("#screens").css('max-height', screensHeight); HEIGHT = $("#leftScreen").height(); WIDTH = $("#leftScreen").width(); }; var start = function() { clean(); data.status = 1; fillScreens(); data.time = LEVEL[data.level].t; startTime(); }; var next = function() { if (!data.status || data.status == -1) { alert("客官请点隔壁的开始游戏按钮!"); return; } if (data.status == -2) { alert("客官你当前关卡都伺候不好,还好意思找其他关卡!"); return; } if (data.status == 9) { alert("客官,你太猛啦,没有关卡啦!"); return; } if (data.pass) { data.status = 1; fillScreens(); if (LEVEL[data.level]){ data.time = LEVEL[data.level].t; } } else { alert("客官别着急啊,本轮的关卡你还没有伺候好呢!"); } }; var clean = function() { data = { status : -1, level : 0, time : -1, pass:false, find : FIND }; $("#leftScreen").empty(); $("#rightScreen").empty(); }; var fillScreens = function() { if (data.level >= 6) { alert('更多关卡敬请期待!'); data.level ++; data.status = 9; score(); return; } data.level++; $("#rightScreen .circle").unbind('click'); $("#level").text(data.level); $("#leftScreen").empty(); $("#rightScreen").empty(); var n = LEVEL[data.level].n; for (var i = 0; i < n; i++) { var circleLeft = createCircle(); var circleRight = createCircle(); var position = getPositions(); circleLeft.css(position[0]); circleLeft.addClass("c" + i); circleLeft.attr("index", i); circleRight.css(position[1]); circleRight.addClass("c" + i); circleRight.attr("index", i); $("#leftScreen").append(circleLeft); $("#rightScreen").append(circleRight); } var map = {}; for (var j = 0 ; j < 3; j++) { var rindex = -1; while(rindex == -1) { rindex = randomNumber(n); if (!map[rindex]){ map[rindex] = {find:false}; $("#leftScreen .c"+rindex).addClass('circle-hidden'); } else { rindex = -1; } } } data.points = map; $("#rightScreen .circle").bind('click', clickCircle); }; var clickCircle = function() { var index = $(this).attr('index'); var flag = false; for (var i in data.points){ if (index == i) { if (!data.points[i].find) { flag = true; data.points[i].find = true; $("#rightScreen .c"+ index).addClass('circle-find'); break; } } } if (!flag) { data.time = data.time - 5; data.time = data.time < 0 ? 0 : data.time; } else { checkAnswers(); } }; var createCircle = function() { return $(""); }; var getPositions = function() { var h = HEIGHT - 10 + 1, w = WIDTH - 10 + 1; var l = randomNumber(w); var t = randomNumber(h); return [ { left : l, top : t }, { left : WIDTH - 10 - l, top : t } ]; }; var randomNumber = function(i) { return Math.floor(Math.random() * i); }; var startTime = function() { if (!timer){ data.time = LEVEL[data.level].t; calTime(); timer = true; } }; var calTime = function() { if (data.status == 1) { if (data.time > 0) { $('#time').text(data.time); data.time--; } else { $('#time').text('0'); data.status = -2; score(); } } else if (data.status == 2){ } else { $('#time').text('0'); } setTimeout(calTime, 1000); }; var checkAnswers = function() { var total = 0, finds = 0; for (var i in data.points){ total ++; if (data.points[i].find) { finds++; } } if (total == finds) { data.status = 2; data.pass = true; alert("恭喜客官,闯关成功,下面的关卡更强大哦!手动点下一关把!"); } }; var score = function() { var t = data.level - 1; alert("恭喜客官, 你总共征服了【" + t + "】个关卡!"); }; var find = function() { if (data.find > 0) { var flag = false; for (var i in data.points){ if (!data.points[i].find) { data.points[i].find = true; $("#rightScreen .c"+ i).addClass('circle-find'); flag = true; break; } } if (flag) { data.find --; $("#find .badge").text(data.find); checkAnswers(); } else { alert("当前关卡已经没有可以提示的了,全找出来啦"); } } else { alert("没有机会了!"); } }; $(document).ready(function() { resizeWin(); $("#start").click(start); $("#next").click(next); $("#find").click(find); $("#find .badge").text(FIND); }); $(window).resize(function() { resizeWin(); });
game.html:
星际迷航
这样本地的就搭建好了,双击game.html,就可以打开游戏画面:
点击开始游戏,屏幕中会出现小白点,左边和右边是按中间的白线对称的,每一关左边的都比右边的少3个点,点击右边屏幕里面白点来找出多余的三个点,点错了会扣5秒钟。全部找齐后可以点击下一关。