HTML 5 背离贪吃蛇 写成了类似于屏幕校准
中间写了改 改了写 还是没做出自己满意的效果 ，看来自己的确不是一个走前端的料子。当然h5还是学一点好一点
具体说来 就是 在canvas 的画布中 鼠标点击后画上一个圆形 然后就有随机的在画布上面出现小球来 如果随机圆和绘制圆的圆心距=2*R 则撞到了。
其中的问题有：
① 怎么获取鼠标点击的坐标点
解决办法 ：用一个
包含canvas画布 而且将其宽度和高度设为一致的 同时调用div 的点击事件就可以获取到 此时canvas 中的坐标了 。
<div onclick="draw_location(event)" style="float:left;width:600;height:900;border:1px solid #c3c3c3"> <!--onmousemove="draw_location(event)" 也可以动态读取鼠标到哪里就显示器坐标 --> <canvas id="canvas_Main" width="600" height="900"></canvas> </div>
js当中的代码就非常的简单了 function draw_location(e) { faixed_X=e.clientX; faixed_Y=e.clientY; if(number>0) { ClearCanvas(); if(confirm('确定绘制在这里吗？')) { draw_panl(faixed_X,faixed_Y);//此处为调用画圆方法 feel_ball(); } number--; }else { alert("所选次数已用完 请点击下面的按钮"); } btnHide_Show(number); }
② 怎么求圆心距
js当中有一个开方的高阶函数： Math.sqrt();
既然图中涉及到平方 那就先来一个平方的方法
function squre(num) { return num*num; } //计算圆心距 //x y为活动圆心坐标 //半径已设定为 15 如需要要更改 以后加上 function cylinder_spacing(x,y,r) { var result; var temp=squre(faixed_X-x)+squre(faixed_Y-y) result=Math.sqrt(temp); if(result<=2*r) { goldnum=goldnum+100; //金额加100 document.getElementById("xycoordinates").innerText=goldnum; }else { //提示没有中奖 } }
③随机圆
解决办法
因为是随机的 而且还要时时的更新位置 当然就要用到定时器 setInterval( function(){}①,time②)
①=》function(){ 代码片 } || 别处定义好的方法 name
②=》毫秒
定时器是一个全局变量 一处声明 处处就可以调用了
var panl=setInterval(draw_panl,300)// panl 为当前计时器的名字 //如果你要暂停这个计时器就要用到 clearInterval(③) ③=》计时器名字 //*****-- 一个页面中必须要给计时器命名字 当你停止之后又开始 时 如果不指定名字 则会导致计时器的时间嵌套出错 间隔时间 越来越小---**** //暂停计时器 clearInterval(panl); //开始计时器 panl=setInterval(functionName,time);
以上是自己写成了随机碰的代码
还是完完整整的附上类似于屏幕校准的代码吧
HTML 部分
<!DOCTYPE html> <html > <head> <meta charset="utf-8"> <title></title> </head> <body> <div onclick="cnvs_getCoordinates(event)" style="float:left;width:600;height:900;border:1px solid #c3c3c3"> <canvas id="canvas_Main" width="600" height="900"></canvas> </div> <label id="xycoordinates"></label> <div style=" clear: both" id="btnlist"> <li> <input type="button" value="100/1" id="gold1" onclick="get_chance(1)"> <input type="button" value="300/2" id="gold2" onclick="get_chance(2)"> <input type="button" value="500/3" id="gold3" onclick="get_chance(3)"> <input type="button" value="1000/4" id="gold4" onclick="get_chance(4)"> </li> </div > </body>
</html>
js部分
//类似于屏幕校准 // 出现的问题是 ： var rand_X ; var rand_Y; var goldnum=0; var lost_number=0; var chance=0; //获取可以丢失次数 function get_chance(k) { var that=document.getElementById('btnlist'); chance=k; if(chance>0) { that.style.display="none"; var time=setInterval(draw_panl(),500); }else { that.style.display=""; } } //----------------------------------------------------------- //var time=setInterval(draw_panl(),500); //获取随机颜色 function Get_Color() { var color='#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6); return color; } //获取随机坐标 function RandomCoords() { rand_X=Randinterval(15,585); rand_Y=Randinterval(15,885); } //平方 function squre(num) { return num*num; } //随机函数 function Randinterval(minval,maxval) { return Math.floor(Math.random()*maxval+minval); } //-------------------------------------------------------------------- //画圆 function draw_panl() { RandomCoords(); var c=document.getElementById("canvas_Main"); var cxt=c.getContext("2d"); cxt.fillStyle=Get_Color(); //可以加上 阴影 cxt.shadowOffsetX = 5; // 阴影Y轴偏移 cxt.shadowOffsetY = 3; // 阴影X轴偏移 cxt.shadowBlur = 5; // 模糊尺寸 cxt.shadowColor =Get_Color(); // 颜色*/ cxt.beginPath(); cxt.arc(rand_X,rand_Y,25,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); } //清除画布 function clear_panl () { var c=document.getElementById("canvas_Main"); var cxt=c.getContext("2d"); cxt.clearRect(0,0,600,900); } //获取鼠标坐标 function cnvs_getCoordinates(e) { x=e.clientX; y=e.clientY; cylinder_spacing(x,y); } //-------------- 我只是在PC上面这么做了 移动端暂时还没试验 调试的时候 也有用手机模式调试了一番-------------------------------- //计算圆心距 //x y为活动圆心坐标 //半径已设定为 15 如需要请更改 如果真的写屏幕校准的话 那就简单多了
//想法 ：自己知道canvas的大小=》继而知道坐标
// 在四个边角先后绘制圆 根据圆心距来判断 你所要求的精度误差
// 没有选中就在判断一次
function cylinder_spacing(x,y) { var result; var temp=squre(rand_X-x)+squre(rand_Y-y) result=Math.sqrt(temp); //在此处加上 没点中之后发生的事情 if(result<=20) { goldnum=goldnum+100; //金额加100 document.getElementById("xycoordinates").innerText=goldnum; clear_panl(); time=setInterval(draw_panl(),500); }else { lost_number++; clear_panl(); time=setInterval(draw_panl(),200); if(lost_number==chance&&lost_number!=0) { alert("丢失越多，则速度会越快 直到停止"); clear_panl(); //将该计时器停止 clearInterval(time); lost_number=0; get_chance(0); } } }
贪吃蛇的代码是我自己不能控制它的长度 就不把最后写废了的代码给大家看了， 免得自己下不来台。
自己的js功力不是很够 还在学习阶段 各位就担待着看。欢迎评说！
