Android和CraigDJ

• 下载HTML source - 46.8 KB
• 下载APK - 8.1 MB

Introduction  大家好，欢迎来到我的Android应用程序项目! 我必须承认,我仍然对原生安卓环境几乎一无所知——这是我鲁莽的深入Android的CP。而不是学习一个全新的环境和语言,我已经建立了我的游戏使用HTML5, CSS和Javascript,并移植到Android使用一个名为PhoneGap的开源项目。随着项目的进展，我一直在更新这篇文章——但请继续关注，不要忘记投票和评论! 我的应用程序创意是什么? 如今，我们的液晶显示器可以显示数百万种颜色，而我们的眼睛也应该能够识别数百万种颜色。我设想了一个简单的游戏，它可以将人眼的视力发挥到极致。 有几种方法可以做到这一点，但我脑海中最重要的是计算机生成的点在屏幕上向下滑动。想象所有的几乎所有的点都是一样的颜色除了少数,应用程序通过添加或修改略小的R, G, b或用户的目标是利用低俗的点(也许拍摄他们的屏幕)。 可以创建多种游戏模式-时间限制，在线(对抗其他玩家)，只要你喜欢就可以玩，只要你喜欢就可以得到点数和小配件，以及多种颜色(额外的难度) 用户可以自定义基本颜色。这些点甚至可以与音乐同步。 该应用程序可以跟踪用户最擅长的颜色变化，并根据用户的兴趣将这些信息显示在用户的个人资料中。一些游戏中收集的东西(漂浮在地上的点)可以是颜色增强器(使发现差异更容易)，点数，炸弹(不要收集这些!)和暂时的减速。 设置Up  我承认自己是Android新手。假设你们是相同的，这是你们开始时需要做的。 您将需要一个Java开发工具包(JDK)。从这里下载并安装。这个工具包还包括一个完整的JRE(如果您还没有的话)。下载并安装Android SDK。SDK没有安装程序，所以我建议你创建一个新的文件夹来放置SDK文件(可能在程序文件中，或者在你的文档/图片/视频旁边)。如果您还没有，我建议您安装GIMP，这是一个免费且非常强大的图像编辑器。我用它在这个游戏中创建了一些图形。 签出本机SDK 现在你应该已经拥有了为Android开发所需的一切。现在花一点时间和我拨弄SDK。看看这是什么感觉。 打开Eclipse(双击/ Eclipse / Eclipse .exe)。导航到File>>New> Android应用程序项目并单击。坚持到底，不做任何改变。你可以附加你的android设备(如果你有的话)并在上面运行你的第一个应用程序。我没有Android，所以我没有做这一步。 在停止之前，我到达了app的这个阶段。突然之间，学习一个全新的环境和语言似乎太痛苦了。我有设备，但我不知道如何使用它。 HTML5吗?node . js ?什么……? 我真的不喜欢仅仅为了写这个应用而学习本地Android开发。我意识到应用可以使用web技术来构建，所以我决定探索这条道路。我还是学到了很多，只是没那么痛苦! 下面是一个对比: 本地环境 完全不熟悉(IDE，语言，一切) PhoneGap,朋友 适度强大(使用PhoneGap，可以使用相机，加速计，文件系统，GPS，通知)适度的性能相当熟悉(我知道HTML等) 我要证明使用HTML5的合理性吗?简短的回答是否定的。长话短说，网络技术既有趣又只有一次生命，所以我只是想使用它们。我们开始吧。请随意发表意见。 摇滚时间到了——介绍PhoneGap PhoneGap Build - Build Bot V2 by Adobe / Yohei Shimomae基于知识共享属性- noncommercial 3.0非移植许可。, “PhoneGap是一个使用HTML5、Javascript和CSS快速构建跨平台移动应用的开源框架。”- http://phonegap.com/about/基本上，PhoneGap是web代码的本地包装器，允许web编码的应用程序被移植到本地应用程序中并在应用程序商店中分发。它支持iOs, Android, WebOS, Windows Phone, Symbian, Bada，甚至黑莓:P。它还允许web应用程序访问目标设备的本地特性，如指南针、加速计、摄像头、地理位置和文件系统。它还支持定制警报、声音和振动。安装PhoneGap 这里有你需要的一切(好吧，现在它是我所需要的)来创建使用HTML5、CSS和Javascript的本地Android应用。 如果你还没有，download，并安装Node.js。现在，正如你在这个链接上看到的，打开node.js命令行，确保你在C:\目录下，输入npm install -g phonegap并回车。让魔法开始吧!PhoneGap安装后，您将需要“Ant”。我尝试自己安装Ant，但失败了。因此，我强烈建议你使用WinAnt，它是由一些了不起的捐助者写的。WinAnt会为你做一切。现在重新启动计算机。现在需要配置一些环境变量。打开控制面板，在搜索框中输入“envi”，然后点击“编辑系统环境变量”。现在创建一个名为ANDROID_HOME的新用户变量，设置为您放置sdk的文件夹的路径(例如。C:\Users\...\Android\ adt - bundle - windows - x86_64 - 20131030 \ adt bundle - windows - x86_64 - 20131030 \ sdk)。现在编辑PATH变量，附加";%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools"。再次重启。痛苦但值得。现在你可以创建你的应用程序了。打开Node.js命令行，使用cd命令导航到你想要创建你的项目的地方，然后运行phonegap创建你的应用程序名。 这是所有安装和我们的第一个应用程序创建!启动eclipse，并单击Android SDK管理器图标。 现在导航到Tools>>Manage avd。我们需要设置一个虚拟的Android设备。 , 转到“设备定义”选项卡并选择一个设备。起初，我选择了Nexus 7，但是…… …已经使用模拟器一段时间了，现在我强烈建议你使用较小的设备，比如Nexus S。不管怎样，模拟器相当慢，但是选择较重的设备会让它慢得难以忍受。现在点击“创建AVD…”。设备将被设置。完成设置后,返回到命令行,运行以下命令:cd your-app-name,移动到您的项目目录,phonegap运行android,同时将android添加到您的项目并运行你的应用程序在模拟器只,我把这个截图的空白phonegap android应用程序——由HTML、CSS和JavaScript !, 在我们开始之前…… www目录 如果你在文件资源管理器中打开你的项目的根文件夹，你会看到一个名为“www”的目录。这是我们将使用和修改(大多数情况下)来创建应用程序的目录。 关于发展的一个词 不要在Android模拟器中进行所有的调试和测试，这是一个非常慢的过程。用PhoneGap编译一个应用程序可能需要几分钟时间，而Android模拟器本身非常慢，反应非常迟钝。因此，我在desktop Chrome和Windows Phone上进行了大部分调试。为了最有效地做到这一点，我将此代码片段添加到每个页面的头标记中，并在Android上编译时将其删除。 隐藏,复制Code

<!--Delete this later-->
<metaname="viewport"content="user-scalable=no, width=device-width"/>
<metaname="msapplication-tap-highlight"content="no"/>

开发我的应用程序创意 在本节中，我将简要解释这个游戏是如何工作的。 页面 我的游戏中最关键的部分就是导航UI。整个游戏是从只有一个HTML页面运行的，索引页面，所以我把HTML分成可视化的“页面”在一个大容器内，像这样: 隐藏,收缩,复制Code

<divid="container"onresize="updateWidths()">
    <divid="header">
        <h1id="hdrWplText">OcularHues</h1>
        <ahref="#"id="hdrButton">Back</a>
    </div>

    <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-->

</div>

这些页面是用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('<canvas id="view" width="' + width() + '" height="' + height() + '">Your browser does not support the canvas element.</canvas>');
    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