HTML 5 背离贪吃蛇写成了类似于屏幕校准

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

中间写了改改了写还是没做出自己满意的效果，看来自己的确不是一个走前端的料子。当然h5还是学一点好一点

具体说来就是在canvas 的画布中鼠标点击后画上一个圆形然后就有随机的在画布上面出现小球来如果随机圆和绘制圆的圆心距=2*R 则撞到了。
其中的问题有：
① 怎么获取鼠标点击的坐标点
解决办法 ：用一个

包含canvas画布而且将其宽度和高度设为一致的同时调用div 的点击事件就可以获取到此时canvas 中的坐标了。

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();

既然图中涉及到平方那就先来一个平方的方法

③随机圆

解决办法
因为是随机的而且还要时时的更新位置当然就要用到定时器 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);
}
}
}