摆在我面前的问题就是选择什么语言进行编写咯，我首先考虑了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]-centerXjy=ans[1]-centerY
} else
{
jx=ans[2]-centerXjy=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
这个代码的思路就是，如果手指在底座上，那么就把摇杆头移动到手指下方，如果手指在底座外，那就把摇杆移动到底座离手指最近的部分。嗯，就是这样。
由于marquee标签现在用得是越来越少了，所以滚动效果的做法大多也都改用javascript来实现了.H5里面好像没有什么替代marquee的吧。如果有请共享。互相学习。
下面是js实现代码：
body {margin: 0px
font-size: 12px
color: #938C43
line-height: 150%
text-align:center
}
a:link{color: #9D943Afont-size:12px}
a:hover{color: #FF3300font-size:12px}
a:visited{color: #9D943Afont-size:12px}
a.red:link{color: #ff0000font-size:12px}
a.red:hover{color: #ff0000font-size:12px}
a.red:visited{color: #ff0000font-size:12px}
#marqueeBox{background:#f7f7f7border:1px solid silverpadding:1pxtext-align:centermargin:0 auto}
-->
</style>
</head>
<body>
<h4>滚动新闻</h4>
<script language="JavaScript" type="text/javascript">
var marqueeContent=new Array()
marqueeContent[0]="<a href=http://xyq.163.com/news/2006/11/2-2-20061102170913.html target=_blank>用快速取回帐号密码</a>"
marqueeContent[1]="<a href=http://ekey.163.com/ target=_blank>网易将军令官方网站</a>"
marqueeContent[2]="<a href=http://xyq.163.com/download/wallpaper.htm target=_blank>最新壁纸下载</a>"
marqueeContent[3]="<a href=http://xyq.163.com/download/around.htm target=_blank>最新屏保下载</a>"
var marqueeInterval=new Array()
var marqueeId=0
var marqueeDelay=2000
var marqueeHeight=20
function initMarquee() {
var str=marqueeContent[0]
document.write('<div id="marqueeBox" style="overflow:hiddenwidth:250pxheight:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>'+str+'</div></div>')
marqueeId++
marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay)
}
function startMarquee() {
var str=marqueeContent[marqueeId]
marqueeId++
if(marqueeId>=marqueeContent.length) marqueeId=0
if(document.getElementById("marqueeBox").childNodes.length==1) {
var nextLine=document.createElement('DIV')
nextLine.innerHTML=str
document.getElementById("marqueeBox").appendChild(nextLine)
}
else {
document.getElementById("marqueeBox").childNodes[0].innerHTML=str
document.getElementById("marqueeBox").appendChild(document.getElementById("marqueeBox").childNodes[0])
document.getElementById("marqueeBox").scrollTop=0
}
clearInterval(marqueeInterval[1])
marqueeInterval[1]=setInterval("scrollMarquee()",20)
}
function scrollMarquee() {
document.getElementById("marqueeBox").scrollTop++
if(document.getElementById("marqueeBox").scrollTop%marqueeHeight==(marqueeHeight-1)){
clearInterval(marqueeInterval[1])
}
}
initMarquee()
</script>
</body>
<style type="text/css">sup{
background: red
color: white
border-radius: 5px/*圆角*/
padding: 0px 3px/*左右边距*/
top: -1em/*数字离图片右上角的高度*/
}
#shop{
margin-top:10px
}
</style>
<div id="shop">
<img src="images/1.jpg"/ width="25" height="25">
<sup>1</sup>
</div>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）