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


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

    

</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(''" height="' + height() + '">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

你可能感兴趣的:(Android和CraigDJ)