09月22日, 2014 99次
文档已上传 请下载 满意请采纳回答 本回答由提问者推荐
我这里有自己写的，和网上下载的！ 本回答由提问者推荐
模板站上太多了，都非常高质量，自己下载呗 追问 那你给我下一个过来啊
你采纳，然后给我留邮箱地址。我给你发过去 追问 1653125365@qq 先邮件，不信那就算了
去百度上搜一下，太多了 追问 那你就下一个啊
摆在我面前的问题就是选择什么语言进行编写咯，我首先考虑了JAVA，首先我从来没写过JAVA的程序，而且IDE装起来很麻烦，而且还是英文的，那更加完全不懂了。然后是C#，很多人都不知道C#可以写Android应用。其实是可以的，但是Android Studio我上次用着卡卡的，印象不是很好，不想用。那还剩下什么选择呢？还有一个：HTML5。 好了我去装了个Hbuilder： 中文的，很好用，问题在于我也从来没用过javascript，不过这是小问题啦。 打开Hbuilder，设置一些护眼什么的，然后点左上角[文件]-[新建]-[移动APP]。然后我选了个模板： 嗯，这就是这个程序在手机上执行的时候的样子。然后我模仿着加了一个列表项到index.html里面去：<li id="plus/controller.html" onclick="clicked(this.id);"><span class="item">Controller <div class="chs">小车遥控器</div></span></li>12345好的，于是这个列表就加了一个选项了。： 继续，在plus文件夹里边添加一个controller.html，这就是我们的摇杆所存在的页面。在这个页面上，我们需要一个canvas标签和一个js脚本共同来绘制摇杆：<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><meta name="HandheldFriendly" content="true" /><meta name="apple-mobile-web-app-capable" content="yes" /><!--<meta name="MobileOptimized" content="320" />--><title>小车遥控器</title><script type="text/javascript" src="../js/common.js"></script></head><body><div class="leftjoystick"><canvas id="joystick" width="120" height="120"></canvas><script src="../js/Joystick.js"></script></div></body></html>12345678910111213141516171819好了，开始写代码绘制摇杆之前，我先做了两幅图，这样绘制摇杆时候就比较省力气了，效果也比较好。。 然后经过了一整天来熟悉javascript。我把控制摇杆的js代码捣鼓出来了。放代码咯：var ji = new Image(); //内摇杆图片var jo = new Image(); //外摇杆图片var joystick = document.getElementById('joystick'); //画板var josize = joystick.height; //外摇杆大小var jisize = josize * 0.6; //内摇杆大小var centerX = josize / 2; //摇杆中心x坐标var centerY = josize / 2; //摇杆中心y坐标window.addEventListener('load', load, false);var jc = joystick.getContext('2d'); //画布//摇杆头应当移动到的位置var jx = 0,jy = 0;//图片加载完成时执行这俩函数ji.onload = function() {jc.drawImage(ji, centerX - jisize / 2, centerY - jisize / 2, jisize, jisize); //首次绘制内摇杆}jo.onload = function() {jc.drawImage(jo, centerX - josize / 2, centerY - josize / 2, josize, josize);}//绘图函数（绘制图形的时候就是用户观察到摇杆动了，所以取名是move）function move() {jc.clearRect(centerX - josize / 2, centerY - josize / 2, josize, josize);//清空画板jc.drawImage(jo, centerX - josize / 2, centerY - josize / 2, josize, josize);//画底座jc.drawImage(ji, centerX - jisize / 2 + jx, centerY - jisize / 2 + jy, jisize, jisize);//画摇杆头requestAnimationFrame(move); //下一次绘图}ji.src = '../img/joystickin.png';//加载图片jo.src = '../img/joystickout.png';//加载图片//页面加载时执行该函数function load() {document.addEventListener('touchstart', touch, false);document.addEventListener('touchmove', touch, false);document.addEventListener('touchend', touch, false); //加载的时候先把摇杆绘制出来再说move(); //var effectiveFinger = 0; //当前有效手指//触摸事件触发函数function touch(event) {var event = event || window.event; var oInp = document.getElementById("inp"); switch(event.type) { case "touchstart": // //判断是否击中摇杆头// if(Math.abs(event.touches[event.identifier].clientX - 100 - jx) <= 40 &&// Math.abs(event.touches[event.identifier].clientY - 100 - jy) <= 40) {// effectiveFinger = event.identifier; //若是,则将此手指设为有效手指// }//这个不知道为啥不能起作用，获取不到event.identifier。break; case "touchend"://手指离开的时候//若手指离开,那就把内摇杆放中间jx = 0;jy = 0; break; case "touchmove"://手指移动的时候：//是否触摸点在摇杆上if(Math.sqrt(Math.pow(event.touches[effectiveFinger].clientX - centerX, 2) + Math.pow(event.touches[effectiveFinger].clientY - centerY, 2)) <=josize / 2 - jisize / 2) {jx = event.touches[effectiveFinger].clientX - centerX;jy = event.touches[effectiveFinger].clientY - centerY;} else//否则计算摇杆最接近的位置{ var x = event.touches[effectiveFinger].clientX,y = event.touches[effectiveFinger].clientY,r = josize / 2-jisize/2; var ans=GetPoint(centerX,centerY,r,centerX,centerY,x,y); //圆与直线有两个交点，计算出离手指最近的交点if(Math.sqrt((ans[0]-x)*(ans[0]-x)+(ans[1]-y)*(ans[1]-y))<Math.sqrt((ans[2]-x)*(ans[2]-x)+(ans[3]-y)*(ans[3]-y))){jx=ans[0]-centerX;jy=ans[1]-centerY;} else{jx=ans[2]-centerX;jy=ans[3]-centerY;}} //move();event.preventDefault();//防止页面滑动，取消掉默认的事件break;}}requestAnimationFrame(move);//开始绘图}//计算圆于直线的交点（这一块好难啊）function GetPoint(cx, cy, r, stx, sty, edx, edy) {//(x-cx)^2+(y-cy)^2=r^2//y=k*x+bvar k = (edy - sty) / (edx - stx); var b = edy - k * edx; //(1 + k^2)*x^2 - x*(2*cx -2*k*(b -cy) ) + cx*cx + ( b - cy)*(b - cy) - r*r = 0var x1, y1, x2, y2; var c = cx * cx + (b - cy) * (b - cy) - r * r; var a = (1 + k * k); var b1 = (2 * cx - 2 * k * (b - cy)); var tmp = Math.sqrt(b1 * b1 - 4 * a * c);x1 = (b1 + tmp) / (2 * a);y1 = k * x1 + b;x2 = (b1 - tmp) / (2 * a);y2 = k * x2 + b; return [x1,y1,x2,y2];}123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116这个代码的思路就是，如果手指在底座上，那么就把摇杆头移动到手指下方，如果手指在底座外，那就把摇杆移动到底座离手指最近的部分。嗯，就是这样。