中间写了改 改了写 还是没做出自己满意的效果 ，看来自己的确不是一个走前端的料子。当然h5还是学一点好一点
具体说来 就是 在canvas 的画布中 鼠标点击后画上一个圆形 然后就有随机的在画布上面出现小球来 如果随机圆和绘制圆的圆心距=2*R 则撞到了。
其中的问题有：
① 怎么获取鼠标点击的坐标点
解决办法 ：用一个
<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功力不是很够 还在学习阶段 各位就担待着看。欢迎评说！
HTML 5 背离贪吃蛇 写成了类似于屏幕校准的更多相关文章
-
s3c6410学习笔记-将内核zImage、文件系统写到nandflash、屏幕校准
1.之前已经将uboot写到nandflash里面了,接下来将内核zImage.文件系统写到nandflash. 2.编译内核 cd linux-2.6.28_smdk6410 make clean ...
-
JavaScript版—贪吃蛇小组件
最近在学习JavaScript,利用2周的时间看完了<JavaScript高级编程>,了解了Js是一门面向原型编程的语言,没有像C#语言中的class,也没有私有.公有.保护等访问限制的级 ...
-
pygame写贪吃蛇
python小白尝试写游戏.. 学了点pygame不知道那什么练手好,先拿贪吃蛇开刀吧. 一个游戏可以粗略的分为两个部分: 数据(变量) 处理数据(函数,方法) 设计变量 首先预想下,画面的那些部分需 ...
-
如何用Python写一个贪吃蛇AI
前言 这两天在网上看到一张让人涨姿势的图片,图片中展示的是贪吃蛇游戏, 估计大部分人都玩过.但如果仅仅是贪吃蛇游戏,那么它就没有什么让人涨姿势的地方了. 问题的关键在于,图片中的贪吃蛇真的很贪吃XD, ...
-
用原生Canvas写贪吃蛇及问题解决
为了学习Canvas,写了这个小游戏贪吃蛇供自己和大家学习 Github: https://github.com/zhiyishou/Gsnake Play On: http://zhiyishou. ...
-
Python制作AI贪吃蛇，很多很多细节、思路都写下来了！
前提:本文实现AI贪吃蛇自行对战,加上人机对战,读者可再次基础上自行添加电脑VS电脑和玩家VS玩家(其实把人机对战写完,这2个都没什么了,思路都一样) 实现效果: 很多人学习python,不知道从何学 ...
-
用 Python 写个贪吃蛇，保姆级教程！
本文基于 Windows 环境开发,适合 Python 新手 本文作者:HelloGitHub-Anthony HelloGitHub 推出的<讲解开源项目>系列,本期介绍 Python ...
-
原生js写的贪吃蛇网页版游戏特效
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...
-
C语言用面向对象的思想写贪吃蛇
大概一年前这时候,接触C语言一个月,那时候知之甚少,对面向对象只觉”可远观而不可亵玩“,而且会看到很多言论说C语言就是面向过程的语言,C++就是面向对象的语言.不过,不记得什么时候在网上看到过一篇博文 ...
随机推荐
-
C++虚函数示例
和Java不同,CDerive derive语句可以直接生成对象,不需要new关键字 重载虚函数才可以用父类引用调用子类对象,重载普通函数没有效果 #include<iostream> # ...
-
css优先机制
样式的优先级 (外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style (内部样式就是css写在 ...
-
YUV像素和ycbcr
一幅彩色图像的基本要素是什么? 说白了,一幅图像包括的基本东西就是二进制数据,其容量大小实质即为二进制数据的多少.一幅1920x1080像素的YUV422的图像,大小是1920X1080X2=4147 ...
-
【转】研华Adam6060某段时间后无法连接的问题
配合乙方测试,需连接现场Adam模块.一段时间后发现模块无法连接,网上资料甚少,发现此贴,记录下.以前没有多客户端高频次(其实谈不上高)连接,没有考虑连接释放的问题.另外,官方Demo也没有释放连接. ...
-
leetcode Maximum Depth of Binary Tree python
# Definition for a binary tree node. # class TreeNode(object): # def __init__(self, x): # self.val = ...
-
视频 ->; 帧 浅析
原创:转载请注明出处 关于帧率 首先以下几个概念必须弄清楚 1.一个帧就是一个画面 2.视频有无数个帧组成 3.表达时间的量 CMTime 的定义: typedef struct { CMTimeV ...
-
ehcache与redis的比较与应用场景分析（转）
ehcache直接在jvm虚拟机中缓存,速度快,效率高:但是缓存共享麻烦,集群分布式应用不方便.redis是通过socket访问到缓存服务,效率比ecache低,比数据库要快很多,处理集群和分布式缓存 ...
-
UOJ#7. 【NOI2014】购票 点分治 斜率优化 凸包 二分
原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ7.html 题解 这题是Unknown的弱化版. 如果这个问题出在序列上,那么显然可以CDQ分治 + 斜率 ...
-
用360清理了一下电脑后发现Eclipse软件无法打开
今天用360安全卫士清理了一下电脑,然后双击Eclipse软件发现不能打开,弹出以下界面: 解决方法如下: 打开计算机-属性-高级系统设置,修改系统变量里变量名为JAVA_HOME.CLASSPATH ...
-
MySQL架构之keepalived+haproxy+mysql 实现MHA中slave集群负载均衡的高可用（原创）
MySQL的高可用方案一般有如下几种:keepalived+双主,MHA,PXC,MMM,Heartbeat+DRBD等,比较常用的是keepalived+双主,MHA和PXC. HAProxy是一款 ...