用html5做一个遥控汽车应用程序
发布网友
发布时间：2022-04-28 17:06
共1个回答
热心网友
时间：2022-04-20 01:22
摆在我面前的问题就是选择什么语言进行编写咯，我首先考虑了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+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
这个代码的思路就是，如果手指在底座上，那么就把摇杆头移动到手指下方，如果手指在底座外，那就把摇杆移动到底座离手指最近的部分。嗯，就是这样。
