中间写了改 改了写 还是没做出自己满意的效果 ，看来自己的确不是一个走前端的料子。当然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功力不是很够 还在学习阶段 各位就担待着看。欢迎评说！

HTML 5 背离贪吃蛇 写成了类似于屏幕校准的更多相关文章

  1. s3c6410学习笔记-将内核zImage、文件系统写到nandflash、屏幕校准

    1.之前已经将uboot写到nandflash里面了,接下来将内核zImage.文件系统写到nandflash. 2.编译内核 cd linux-2.6.28_smdk6410 make clean ...

  2. JavaScript版—贪吃蛇小组件

    最近在学习JavaScript,利用2周的时间看完了<JavaScript高级编程>,了解了Js是一门面向原型编程的语言,没有像C#语言中的class,也没有私有.公有.保护等访问限制的级 ...

  3. pygame写贪吃蛇

    python小白尝试写游戏.. 学了点pygame不知道那什么练手好,先拿贪吃蛇开刀吧. 一个游戏可以粗略的分为两个部分: 数据(变量) 处理数据(函数,方法) 设计变量 首先预想下,画面的那些部分需 ...

  4. 如何用Python写一个贪吃蛇AI

    前言 这两天在网上看到一张让人涨姿势的图片,图片中展示的是贪吃蛇游戏, 估计大部分人都玩过.但如果仅仅是贪吃蛇游戏,那么它就没有什么让人涨姿势的地方了. 问题的关键在于,图片中的贪吃蛇真的很贪吃XD, ...

  5. 用原生Canvas写贪吃蛇及问题解决

    为了学习Canvas,写了这个小游戏贪吃蛇供自己和大家学习 Github: https://github.com/zhiyishou/Gsnake Play On: http://zhiyishou. ...

  6. Python制作AI贪吃蛇，很多很多细节、思路都写下来了！

    前提:本文实现AI贪吃蛇自行对战,加上人机对战,读者可再次基础上自行添加电脑VS电脑和玩家VS玩家(其实把人机对战写完,这2个都没什么了,思路都一样) 实现效果: 很多人学习python,不知道从何学 ...

  7. 用 Python 写个贪吃蛇，保姆级教程！

    本文基于 Windows 环境开发,适合 Python 新手 本文作者:HelloGitHub-Anthony HelloGitHub 推出的<讲解开源项目>系列,本期介绍 Python ...

  8. 原生js写的贪吃蛇网页版游戏特效

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

  9. C语言用面向对象的思想写贪吃蛇

    大概一年前这时候,接触C语言一个月,那时候知之甚少,对面向对象只觉”可远观而不可亵玩“,而且会看到很多言论说C语言就是面向过程的语言,C++就是面向对象的语言.不过,不记得什么时候在网上看到过一篇博文 ...

随机推荐

  1. SQL语句

    数据查询:SELECT 以下所有的查询都基于以下的表格: 学生表:STUDENT(SNO,Sname,ssex,sage,sdept); 课程表:course(cno,cnama,cpno,ccred ...

  2. [bzoj1670][Usaco2006 Oct]Building the Moat

    Description 为了防止口渴的食蚁兽进入他的农场,$Farmer John$决定在他的农场周围挖一条护城河.农场里一共有$N$股泉水,并且,护城河总是笔直地连接在河道上的相邻的两股泉水.护城河 ...

  3. hdu 4859 海岸线 Bestcoder Round 1

    http://acm.hdu.edu.cn/showproblem.php?pid=4859 题目大意: 在一个矩形周围都是海,这个矩形中有陆地,深海和浅海.浅海是可以填成陆地的. 求最多有多少条方格 ...

  4. Autofac 依赖注入

    介绍 Autofac是一款IOC框架,很轻量级性能非常高,自动注入很给力. NuGet Autofac:Autofac控制反转容器核心 Autofac.MVC5:提供IDependencyResolv ...

  5. 机器学习笔记-----AP（affinity propagat）算法讲解及matlab实现

    大家好,我是人见人爱,花见花开的小花.哈哈~~! 在统计和数据挖掘中,亲和传播(AP)是基于数据点之间"消息传递"概念的聚类算法.与诸如k-means或k-medoids的聚类算法 ...

  6. 写了个项目 Web-Rtmp: 使用 WebSocket 在网页上播放 RTMP 直播流

    http://neue.v2ex.com/t/316766 虽说浏览器里用 js 解码'播放'视频的方案已经有几个了... 为什么不再多一个呢... 基本原理: 服务端使用 websockify 中转 ...

  7. c#.net单例模式的学习记录！

    一. 单例(Singleton)模式 单例模式的特点: 单例类只能有一个实例. 单例类必须自己创建自己的唯一实例. 单例类必须给所有其它对象提供这一实例. 单例模式应用: 每台计算机可以有若干个打印机 ...

  8. SharePoint Online 申请试用链接地址

    SharePoint Online 申请试用链接地址: https://products.office.com/en-us/business/compare-office-365-for-busine ...

  9. React视角下的轮播图

    天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...

  10. 如何在latex 中插入EPS格式图片

    如何在latex 中插入EPS格式图片 第一步:生成.eps格式的图片 1.利用visio画图,另存为pdf格式的图片 利用Adobe Acrobat裁边,使图片大小合适 另存为.eps格式,如下图所 ...