1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <style>
  7.     *margin{padding:0;margin:0;}
  8.     body{background:black;}
  9.     #box1{width:600px;height:600px;background:white; margin:20px auto;}
  10.     span{background:white;}
  11. </style>
  12. <script>
  13.     window.onload = function(){
  14.         var oC = document.getElementById('cl');
  15.         var oGc = oC.getContext('2d');
  16.         var yImage = new Image();
  17.         yImage.src = 'person.png';
  18.         var iRotate = 0;
  19.         yImage.onload = function(){
  20.             setInterval(function(){
  21.                 oGc.clearRect(0,0,oC.width,oC.height);
  22.                 oGc.beginPath();
  23.                 oGc.arc(300,200,200,-90*Math.PI/180,180*Math.PI/180,false);
  24.                 oGc.stroke();
  25.  
  26.                 oGc.beginPath();
  27.                 oGc.arc(250,200,150,180*Math.PI/180,0,false);
  28.                 oGc.stroke();
  29.  
  30.                 oGc.beginPath();
  31.                 oGc.arc(400,200,20,0,360*Math.PI/180,false);
  32.                 oGc.closePath();
  33.                 oGc.stroke();
  34.  
  35.                 for(var i=0;i<ball.length;i++){
  36.                     oGc.beginPath();
  37.                     //oGc.moveTo(ball[i].x,ball[i].y);
  38.                     oGc.arc(ball[i].x,ball[i].y,20,0,360*Math.PI/180,false);
  39.                     oGc.closePath();
  40.                     oGc.fill();
  41.                 }
  42.                 oGc.save();
  43.                 oGc.translate(300,200);
  44.                 oGc.rotate(180*Math.PI/180);
  45.                 oGc.rotate(iRotate);
  46.                 oGc.translate(-40,-40);
  47.                 oGc.drawImage(yImage,0,0);
  48.                 oGc.restore();
  49.  
  50.                 for(var i=0;i<bullet.length;i++){
  51.                     oGc.save();
  52.                     oGc.beginPath();
  53.                     oGc.fillStyle = 'red';
  54.                     oGc.moveTo(bullet[i].x,bullet[i].y);
  55.                     oGc.arc(bullet[i].x,bullet[i].y,20,0,360*Math.PI/180,false);
  56.                     oGc.closePath();
  57.                     oGc.fill();
  58.                     oGc.restore();
  59.                 }    
  60.  
  61.             oGc.save();
  62.             oGc.font = '60px impact';
  63.             oGc.textBaseline = 'top';
  64.             oGc.fillStyle = 'red';
  65.             oGc.shadowOffsetX = 10;
  66.             oGc.shadowOffsetY = 10;
  67.             oGc.shadowColor = 'green';
  68.             oGc.shadowBlur = 5;
  69.             var w = oGc.measureText('简易祖玛').width;
  70.             oGc.fillText('简易祖玛',(oC.width-w)/2,450);
  71.             oGc.restore();
  72.             },1000/60); //这个刷新1000/60最好
  73.         }
  74.  
  75.         var ball = [];
  76.         setInterval(function(){
  77.             var ballData = {
  78.                 x:300,
  79.                 y:0,
  80.                 r:200,
  81.                 startX:300,
  82.                 startY:0,
  83.                 num:0
  84.             };
  85.             ball.push(ballData);
  86.         },500);
  87.  
  88.         setInterval(function(){
  89.             for(var i=0;i<ball.length;i++){
  90.                 ball[i].num++;
  91.                 if(ball[i].num == 270){
  92.                     ball[i].r = 150;
  93.                     ball[i].startX = 250;
  94.                     ball[i].startY = 50;
  95.                 }
  96.                 if(ball[i].num == 270+180){
  97.                     alert("游戏结束！");
  98.                     window.location.reload();
  99.                 }
  100.                 ball[i].x = Math.sin(ball[i].num*Math.PI/180)*ball[i].r+ball[i].startX;
  101.                 ball[i].y = ball[i].r-Math.cos(ball[i].num*Math.PI/180)*ball[i].r+ball[i].startY;
  102.             }
  103.  
  104.             for(var i=0;i<bullet.length;i++){
  105.                 bullet[i].x += bullet[i].sX;
  106.                 bullet[i].y += bullet[i].sY;
  107.             }
  108.  
  109.             for(var i=0;i<ball.length;i++){
  110.                 for(var j=0;j<bullet.length;j++){
  111.                     if(crash(ball[i].x,ball[i].y,bullet[j].x,bullet[j].y)){
  112.                         ball.splice(i,1);
  113.                         bullet.splice(j,1);
  114.                         break;
  115.                     }
  116.                 }
  117.             }
  118.         },30);
  119.         oC.onmousemove = function(ev){
  120.             var ev = ev || event;
  121.             var disX = ev.clientX - oC.offsetLeft;
  122.             var disY = ev.clientY - oC.offsetTop;
  123.             var a = disX-300;
  124.             var b = disY-200;
  125.             var c = Math.sqrt(a*a+b*b);
  126.             if(a > 0 && b >0){
  127.                 //右上
  128.                 iRotate = Math.asin(b/c)+90*Math.PI/180;
  129.             }else if(a > 0 ){
  130.                 //右下
  131.                 iRotate = Math.asin(a/c);
  132.             }
  133.  
  134.             if(a < 0 && b > 0){
  135.                 //左下
  136.                 iRotate = -(Math.asin(b/c)+90*Math.PI/180);
  137.             }else if(a < 0 ){
  138.                 //左上
  139.                 iRotate = Math.asin(a/c);
  140.             }
  141.         };
  142.  
  143.         var bullet = [];
  144.         oC.onmousedown = function(ev){
  145.             var ev = ev || event;
  146.             var disX = ev.clientX - oC.offsetLeft;
  147.             var disY = ev.clientY - oC.offsetTop;
  148.             var a = disX-300;
  149.             var b = disY-200;
  150.             var c = Math.sqrt(a*a+b*b);
  151.             var speed = 5;
  152.             var spX = speed*a/c;
  153.             var spY = speed*b/c;
  154.             bullet.push({
  155.                 x:300,
  156.                 y:200,
  157.                 sX:spX,
  158.                 sY:spY
  159.             });
  160.  
  161.         };
  162.  
  163.         function crash(x1,y1,x2,y2){
  164.             var x = x1-x2;
  165.             var y = y1-y2;
  166.  
  167.             var c = Math.sqrt(x*x+y*y);
  168.             if(c <40){
  169.                 return true;
  170.             }else{
  171.                 return false;
  172.             }
  173.         }
  174.  
  175.     };
  176. </script>
  177. </head>
  178.  
  179. <body>
  180. <div id="box1">
  181.     <canvas id="cl" width="600" height="600">
  182.         <span>浏览器不支持canvas</span>
  183.     </canvas>
  184. </div>
  185. </body>
  186. </html>

html 5 cavans 简易祖玛的更多相关文章

  1. 简易祖玛--canvas

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. h5-10 canvas 简易祖玛

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. .NET里简易实现AOP

    .NET里简易实现AOP 前言 在MVC的过滤器章节中对于过滤器的使用就是AOP的一个实现了吧,时常在工作学习中遇到AOP对于它的运用可以说是很熟练了,就是没想过如果自己来实现的话是怎么实现的,性子比 ...

  4. 在.Net中实现自己的简易AOP

    RealProxy基本代理类 RealProxy类提供代理的基本功能.这个类中有一个GetTransparentProxy方法,此方法返回当前代理实例的透明代理.这是我们AOP实现的主要依赖. 新建一 ...

  5. .NET Core的文件系统[5]：扩展文件系统构建一个简易版“云盘”

    FileProvider构建了一个抽象文件系统,作为它的两个具体实现,PhysicalFileProvider和EmbeddedFileProvider则分别为我们构建了一个物理文件系统和程序集内嵌文 ...

  6. 自己来实现一个简易的OCR

    来做个简易的字符识别 ,既然是简易的 那么我们就不能用任何的第三方库 .啥谷歌的 tesseract-ocr, opencv 之类的 那些玩意是叼 至少图像处理 机器视觉这类课题对我这种高中没毕业的人 ...

  7. php+websocket搭建简易聊天室实践

    1.前言 公司游戏里面有个简单的聊天室,了解了之后才知道是node+websocket做的,想想php也来做个简单的聊天室.于是搜集各种资料看文档.找实例自己也写了个简单的聊天室. http连接分为短 ...

  8. 用Go实现的简易TCP通信框架

    接触到GO之后,GO的网络支持非常令人喜欢.GO实现了在语法层面上可以保持同步语义,但是却又没有牺牲太多性能,底层一样使用了IO路径复用,比如在LINUX下用了EPOLL,在WINDOWS下用了IOC ...

  9. .NET里简易实现IoC

    .NET里简易实现IoC 前言 在前面的篇幅中对依赖倒置原则和IoC框架的使用只是做了个简单的介绍,并没有很详细的去演示,可能有的朋友还是区分不了依赖倒置.依赖注入.控制反转这几个名词,或许知道的也只 ...

随机推荐

  1. CPU时间分片、多线程、并发和并行

    1.CPU时间分片.多线程? 如果线程数不多于CPU核心数,会把各个线程都分配一个核心,不需分片,而当线程数多于CPU核心数时才会分片. 2.并发和并行的区别 并发:当有多个线程在操作时,如果系统只有 ...

  2. 初级vector

    标准库vector类型 #include<vector> using std::vector; vector为一个类模板. vector的初始化 vector<T> v1; v ...

  3. SpringMVC学习笔记一:采用注解式搭建简单springMVC环境

    搭建的环境使用的是maven项目 项目目录树: 搭建环境使用的jar包,pom.xml文件 <project xmlns="http://maven.apache.org/POM/4. ...

  4. Nginx笔记总结二十:nginx索引目录配置

    location / { autoindex on; autoindex_localtime on; }

  5. 在Docker内安装jenkins运行和基础配置

    这里是在linux环境下安装docker之后,在doucer内安装jenkins --------------------docker 安装 jenkins---------------------- ...

  6. Python测试开发-浅谈如何自动化生成测试脚本

    Python测试开发-浅谈如何自动化生成测试脚本 原创: fin  测试开发社区  前天 阅读文本大概需要 6.66 分钟. 一 .接口列表展示,并选择 在右边,点击选择要关联的接口,区分是否要登录, ...

  7. C++求解N阶幻方

    由一道数学题的联想然后根据网上的做法瞎jb乱打了一下,居然对了代码精心附上了注释,有兴趣的童鞋可以看一看..不说了,上代码!(自认为结构很清晰易懂) 1234567891011121314151617 ...

  8. 01Java代码是怎么运行的

    从虚拟机视角来看,执行 Java 代码首先需要将它编译而成的 class 文件加载到 Java 虚拟机中.加载后的 Java 类会被存放于方法区(Method Area)中.实际运行时,虚拟机会执行方 ...

  9. e代驾狂野裁员 O2O逐渐恢复理智？

    O2O逐渐恢复理智?" title="e代驾狂野裁员 O2O逐渐恢复理智?">     近段时间以来,O2O行业堪称"哀鸿遍野",十分凄惨.巨头 ...

  10. 通俗易懂DenseNet

    目录 写在前面 Dense Block与Transition Layer DenseNet网络架构与性能 理解DenseNet Plain Net.ResNet与DenseNet 参考 博客:博客园 ...