<divid="Page1"class="Page">  
    <divclass="content">  
        <h2>Total Points Scored</h2>  
        <pid="tlt\_points"></p>  
        <divclass="menuList">  
            <ul>  
                <li><ahref="#"id="a\_unlimited">Play as long as you like...<spanclass="li\_i"><imgsrc="img/arrowright.png"/></span></a></li>  
                <li><ahref="#"id="a\_limited">Timelimit (2 mins)...<spanclass="li\_i"><imgsrc="img/arrowright.png"/></span></a></li>  
            </ul>  
            <ul>  
                <li><ahref="#"id="a\_userstats">Your Stats...<spanclass="li\_i"><imgsrc="img/arrowright.png"/></span></a></li>  
                <li><ahref="#"id="a\_about">About...<spanclass="li\_i"><imgsrc="img/arrowright.png"/></span></a></li>  
            </ul>  
        </div>  
    </div>  
</div>

<!--Etc-->

这些页面是用CSS定义的…… 隐藏,复制Code

.Page { position: absolute; display: none; }

然后使用Javascript，给所有的页面div指定设备的宽度，并赋值left=设备宽度，这样所有的页面都将在屏幕的右侧看不见。但是，活动页面或用户正在使用的页面会被捕获并设置为“display: block”和“left: 0”。 隐藏,复制Code

$(document).ready(function () {

$(".Page").css("top", 46);  
$("#Page5").css("top", 0);

updateWidths();

loadPositions();

$('#hdrButton').click(function (event) {  
    event.preventDefault();  
    $('#hdrButton').css('background-color', '#C5D4E2');  
    slide(previouspage);  
});

}); function loadPositions() {
//All pages except the root page should be directly off to the right of the screen
$(".Page").css("left", width());

$(activepage).css("left", 0);  
$(activepage).css("display", "block");  
$('#hdrButton').css("display", "none"); //It's the home scren. Can't go back.  

}

我也动画页转译与下面的代码。这个功能使得从一个页面移动到另一个页面就像幻灯片一样简单。 隐藏,收缩,复制Code

function unit(pageno) {
var soFar = $(pageno).css("left").slice(0, -2);

if (width() / 2 < soFar)  
    return width() / 8;  
else  
    return Math.pow(soFar, .85);// / 10;  

}

function slide(pageno) {
if (issliding) { return; }
window.scrollTo(0, 0);
$(pageno).css("display", "block"); //display the page to the right.
issliding = true;
nextIncrement(pageno);
} function nextIncrement(pageno) {
var current = $(activepage).css("left").slice(0, -2);
var nextCurrent = current - unit(pageno);
$(activepage).css("left", nextCurrent.toString() + "px");
$(pageno).css("left", (nextCurrent + width()).toString() + "px");

if (nextCurrent + width() < 0 || unit(pageno) < .1) {  
    //We're done.  
    $(activepage).css("display", "none");  
    $(activepage).css("left", width());  
    //Change the active page  
    activepage = pageno;  
    $(activepage).css("left", 0);

    //Page-specific actions  
    if (activepage == "#Page1") {  
        document.getElementById('hdrWplText').innerHTML = "OcularHues";  
        $('#hdrButton').css("display", "none");  
    }  
    else {  
        $('#hdrButton').css("display", "block");  
    }  
    //etc for each page as needed

    issliding = false;

    if (codeToRunAfterwards != "") {  
        var \_store = codeToRunAfterwards;  
        setTimeout(\_store, 1);  
        codeToRunAfterwards = "";  
    }  
}  
else {  
    setTimeout(function () { nextIncrement(pageno) }, 10);  
}  

}

画布元素 我使用HTML5的canvas元素创建了这个游戏。它是这样通过程序创建的: 隐藏,复制Code

var view;
var canvas;
$(document).ready(function () {
//Create the drawing board
$('#Page5').prepend('Your browser does not support the canvas element.');
canvas = document.getElementById("view");
view = document.getElementById("view").getContext("2d");
});

创建点颜色 等级越高，区分这些点就越困难。这个功能根据游戏玩法的等级来产生颜色。 隐藏,复制Code

var R = 255;
var G = 0;
var B = 0;
var mainColor = "";
var adjustedColor = "";
function setGameColors() {
mainColor = "rgb(" + R + "," + G + "," + B + ")";
var g = G;
var b = B;
var dd = getRandomInt(2, 3);
isblue = (dd == 3);
if (dd == 2) { g += (11 - level) * 10; }
if (dd == 3) { b += (11 - level) * 10; }
adjustedColor = "rgb(" + R + "," + g + "," + b + ")";
}

一个函数来规则它们，一个函数来绑定它们…… 具有讽刺意味的是，整个游戏中最重要的函数却是最小的函数之一。此函数循环运行游戏。 隐藏,复制Code

function runGame() {
//Update game situation
UpdateMovements(); //Adjust items on the screen
DrawGame(); //Visually render the adjusted items unto the screen

if (is\_playing)  
    setTimeout("runGame()", 20);  

}

创建点 我可以复制和粘贴更多代码，但这篇文章已经太长了。我只是说点的坐标存储在数组中，一个数组存储X值，另一个数组存储Y值。实际上只有15个正常的(“坏的”)点和5个不寻常的变色点。在UpdateMovements()中，这些点以稳定的速度沿屏幕向下移动，直到它们被点击或穿过屏幕底部，在这两种情况下，它们都被重新分配新的X值并放置在scre之上在屏幕顶部以上的另一个设备的最大高度，在那里它们重新开始向下滑动。 如果您想查看代码，您可以从本文顶部下载源代码。 星星 像点一样，星星也有存储在数组中的X和Y坐标。当游戏开始时，将调用LoopStars()，启动下面的循环，直到游戏结束。 隐藏,复制Code

function CreateStar() {
var postY = getRandomInt(-1 * height(), 0);
var postX = getRandomInt(_r, width() - _r);
while (overlaps(postX, postY)) {
postY = getRandomInt(-1 * height(), 0);
postX = getRandomInt(_r, width() - _r);
}
s_X[stars] = postX;
s_Y[stars] = postY;
++stars;
}

function LoopStars() {
//Skip the very first time.
if (!first_star)
CreateStar();

first\_star = false;  
if (is\_playing) {  
    var wait = getRandomInt(50000, 120000); //50-120 sec  
    star\_timeout = setTimeout(function () { LoopStars(); }, wait);  
}  

}

肾上腺素模式 我想要在游戏中添加一些东西来打破那些从屏幕上掉下来的点的monotomy。在肾上腺素模式下，屏幕变紫，速度增加三倍。在肾上腺素模式下点的价值远远超过在正常游戏中点的价值。肾上腺素模式是由这个循环控制，启动与start肾上腺素inemeter(真): 隐藏,复制Code

function doAdrenaline() {
isadren = true;
fatfinger = 2; //It's harder to be accurate during adrenaline mode.

//End it in 10 sec  
var wait = 10000;  
adren\_timeout = setTimeout(function () { StartAdrenalineMeter(false); }, wait);  

}
function StartAdrenalineMeter(varcheck) {
if (!varcheck) {
//Finished
isadren = false;
fatfinger = 1.3;
//Now Start again
adren_timeout = StartAdrenalineMeter(true);
}
else {
//Start again
if (is_playing) {
var wait = getRandomInt(10000, 40000); //10-40 sec
adren_timeout = setTimeout(function () { doAdrenaline(); }, wait);
}
}
}

创建一个Timelimit模式 我们几乎完成了!创建一个timelimit模式非常简单。我是通过每次游戏开始时运行这段代码来实现的…… 隐藏,复制Code

//Let's do this!!
if (istimelimit) {
d_Date = new Date();
startTime = d_Date.getTime();
time_checker = setInterval(function () {
d_Date = new Date();
var t_now = d_Date.getTime();
if (t_now - startTime > 120000) {
if (navigator.notification) {
navigator.notification.alert("Two minutes have elapsed.", null, "Time's Up!", "OK");
} else {
alert("Time's Up! Two minutes have elapsed.");
}
QuitGame();
}
}, 5000);
}

存储用户数据 我不会复制粘贴应用程序这一部分的所有代码，但我将用一个非常基本的示例演示我是如何做到的。 我使用了一个新的HTML5特性Localstorage。Localstorage是这样使用的: 隐藏,复制Code

if (!localstorage.stored)
{
localstorage.foobar = 10;
localstorage.stored = "true";
}
else
{
alert(localstorage.foobar);
}

//Imagaine the page closes. Then the user opens it again…
//<--Imagining--->
//Result: 10

因此，保持用户统计数据就像监控点和点击一样简单，并将它们存储在localstorage中。同样，如果您想要完整的代码，您可以随时下载源代码。: -), 出版 代码完成了!是时候签署和发布了… 在www目录中打开config.xml，并更新其中的详细信息。我的app id是app。lufroloc。ocularhues (lufroloc是向后彩色的)。保存。在您的项目目录中，导航到platform /android目录并打开AndroidManifest.xml将android:debuggable设置为false。保存。还记得我们在本文开始时创建的Android项目吗——在Android IDE中?在Eclipse中再次打开它。在屏幕右侧的Package Explorer中，右键单击您的项目目录，现在Android Tools>>导出签名的应用程序包，按照步骤创建一个密钥存储库和一个密钥。你需要这些来签署你的应用程序。确保你保留你的密码和别名!你需要他们更新你的应用程序，还需要他们签名!现在登录build.phonegap.com，注册或创建一个账户。当被要求上传。zip文件时，压缩整个项目目录(不仅仅是www文件夹)并上传它。PhoneGap的网站将从这里开始。很直观。完成之后，就可以下载编译和签名的APK文件了。 已知问题: 我意识到我的应用程序目前有些问题。如果你发现更多，请在下面留言:-) 模拟器上的性能很差。我不确定有多少是我的应用，有多少是模拟器。模拟器本身就非常的慢…因此，如果我有机会在实际设备上运行我的应用，我就能更好地了解实际性能。听起来不工作。由于一些奇怪的原因，声音似乎不工作在应用程序 结束 就是这样!谢谢你留下来陪我!我希望你喜欢我的Android提交。如果你使用的是安卓系统，请随意安装我的应用程序(可以从这个页面顶部的.zip文件下载)。任何反馈将非常感谢。: -) 历史 2013年12月23日-第一版28/12/2013 -第二版。创建了这个游戏的alpha版。31/12/2013 -第三版。完成了应用程序，至少现在是这样。13/01/2014——修正了一些打字错误，对文本进行了一些润色。 本文转载于：http://www.diyabc.com/frontweb/news30657.html