用html5做一个遥控汽车应用程序

用html5做一个遥控汽车应用程序

摆在我面前的问题就是选择什么语言进行编写咯，我首先考虑了JAVA，首先我从来没写过JAVA的程序，而且IDE装起来很麻烦，而且还是英文的，那更加完全不懂了。然后是C#，很多人都不知道C#可以写Android应用。其实是可以的，但是Android Studio我上次用着卡卡的，印象不是很好，不想用。那还剩下什么选择呢？还有一个：HTML5。 
好了我去装了个Hbuilder： 
 
中文的，很好用，问题在于我也从来没用过javascript，不过这是小问题啦。 
打开Hbuilder，设置一些护眼什么的，然后点左上角[文件]-[新建]-[移动APP]。然后我选了个模板： 
 
嗯，这就是这个程序在手机上执行的时候的样子。然后我模仿着加了一个列表项到index.html里面去：

Controller        小车遥控器
12345

好的，于是这个列表就加了一个选项了。： 
 
继续，在plus文件夹里边添加一个controller.html，这就是我们的摇杆所存在的页面。在这个页面上，我们需要一个canvas标签和一个js脚本共同来绘制摇杆：
















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)){
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+b
var 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 = 0
var 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

这个代码的思路就是，如果手指在底座上，那么就把摇杆头移动到手指下方，如果手指在底座外，那就把摇杆移动到底座离手指最近的部分。嗯，就是这样。

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息