1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title></title>
  7.         <style type="text/css">
  8.             .div1 {
  9.                 width: 600px;
  10.                 height: 600px;
  11.                 background: #f7fcfc;
  12.                 margin: 20px auto;
  13.             }
  14.         </style>
  15.     </head>
  16.  
  17.     <body>
  18.         <div class="div1">
  19.             <canvas id="c1" width="600" height="600"></canvas>
  20.         </div>
  21.         <script type="text/javascript">
  22.             var canvas = document.getElementById("c1");
  23.             var ctx = canvas.getContext('2d');
  24.             var yImg = new Image();
  25.             yImg.src = 'img/siteRotate.png';
  26.             yImg.onload = function() {
  27.                 setInterval(function() {
  28.                     ctx.clearRect(0, 0, canvas.width, canvas.height);
  29.  
  30.                     ctx.beginPath();
  31.                     ctx.arc(300, 200, 200, -90 * Math.PI / 180, 180 * Math.PI / 180, false);
  32.                     ctx.stroke();
  33.  
  34.                     ctx.beginPath();
  35.                     ctx.arc(250, 200, 150, 180 * Math.PI / 180, 360 * Math.PI / 180, false);
  36.                     ctx.stroke();
  37.  
  38.                     ctx.beginPath();
  39.                     ctx.arc(400, 200, 20, 0 * Math.PI / 180, 360 * Math.PI / 180, false);
  40.                     ctx.stroke();
  41.  
  42.                     for(var i = 0; i < ball.length; i++) {
  43.                         ctx.beginPath();
  44.                         ctx.moveTo(ball[i].x, ball[i].y);
  45.                         ctx.arc(ball[i].x, ball[i].y, 18, 0 * Math.PI / 180, 360 * Math.PI / 180, false);
  46.                         ctx.fill();
  47.                     }
  48.  
  49.                     ctx.save();
  50.                     ctx.translate(300,200);
  51.                     ctx.rotate(iRotate);
  52.                     ctx.translate(-50,-50);
  53.                     ctx.drawImage(yImg,0,0);
  54.                     ctx.restore();
  55.  
  56.                     for(var i = 0; i < bullet.length; i++) {
  57.                         ctx.save();
  58.                         ctx.fillStyle = 'red';
  59.                         ctx.beginPath();
  60.                         ctx.moveTo(bullet[i].x, bullet[i].y);
  61.                         ctx.arc(bullet[i].x, bullet[i].y, 18, 0 * Math.PI / 180, 360 * Math.PI / 180, false);
  62.                         ctx.fill();
  63.                         ctx.restore();
  64.                     }
  65.  
  66. //                    ctx.save();
  67. //                    ctx.font = '60px impact';
  68. //                    ctx.textBaseline = 'top';
  69. //                    ctx.fillStyle = 'red';
  70. //                    ctx.shadowOffsetX = 10;
  71. //                    ctx.shadowOffsetY = 10;
  72. //                    ctx.shadowColor = 'green';
  73. //                    ctx.shadowBlur = 5;
  74. //                    var w = ctx.measureText('简易祖玛').width;
  75. //                    var h = 60;
  76. //                    ctx.fillText('简易祖玛',(canvas.width - w)/2 , 450);
  77. //                    ctx.restore();
  78.  
  79.                 }, 1000 / 60);            
  80.  
  81.                 setInterval(function() {
  82.                     for(var i = 0; i < ball.length; i++) {
  83.                         ball[i].angle++;
  84.                         if(ball[i].angle == 270) {
  85.                             ball[i].r = 150;
  86.                             ball[i].startX = 250;
  87.                             ball[i].startY = 50;
  88.                         }
  89.                         if(ball[i].angle == 450) {
  90.                             alert('游戏结束');
  91.                             window.location.reload();
  92.                         }
  93.                         ball[i].x = Math.sin(ball[i].angle * Math.PI / 180) * ball[i].r + ball[i].startX;
  94.                         ball[i].y = ball[i].r - Math.cos(ball[i].angle * Math.PI / 180) * ball[i].r + ball[i].startY;
  95.                     }
  96.  
  97.                     for( var i = 0; i < bullet.length; i++){
  98.                         bullet[i].x = bullet[i].x + bullet[i].sX;
  99.                         bullet[i].y = bullet[i].y + bullet[i].sY;
  100.                     }
  101.  
  102.                     for( var i = 0; i < bullet.length; i++){
  103.  
  104.                         for(var j = 0; j < ball.length; j++){
  105.  
  106.                             if( knock(bullet[i].x,bullet[i].y,ball[j].x,ball[j].y)){
  107.                                 bullet.splice(i,1);
  108.                                 ball.splice(j,1);
  109.                                 break;
  110.                             }
  111.                         }
  112.                     }
  113.                 }, 30);
  114.  
  115.                 var ball = [];    //小球进洞
  116.                 setInterval(function() {
  117.                     ball.push({
  118.                         x: 300,
  119.                         y: 0,
  120.                         r: 200,
  121.                         startX: 300,
  122.                         startY: 0,
  123.                         angle: 0
  124.                     })
  125.                 }, 500)
  126.  
  127.                 var iRotate = 0;    //中心旋转
  128.                 canvas.onmousemove = function (ev){
  129.                     var ev = ev || window.event;
  130.                     var x = ev.clientX - canvas.offsetLeft;
  131.                     var y = ev.clientY - canvas.offsetTop;
  132.                     var a = x - 300;
  133.                     var b = y - 200;
  134.                     var c = Math.sqrt(a*a + b*b);
  135.  
  136.                     if( a>0 && b>0){    //第二象限
  137.                         iRotate = Math.asin(b/c) + 90*Math.PI/180;
  138.                     }else if(a>0){      //第一象限
  139.                         iRotate = Math.asin(a/c);
  140.                     }
  141.                     if( a<0 && b>0){    //第三象限
  142.                         iRotate = -(Math.asin(b/c) + 90*Math.PI/180);
  143.                     }else if(a<0){      //第四象限
  144.                         iRotate = Math.asin(a/c);
  145.                     }
  146.                 }
  147.  
  148.                 var bullet = [];  //子弹发射
  149.                 canvas.onmousedown = function (ev){
  150.                     var ev = ev || window.event;
  151.                     var x = ev.clientX - canvas.offsetLeft;
  152.                     var y = ev.clientY - canvas.offsetTop;
  153.                     var a = x - 300;
  154.                     var b = y - 200;
  155.                     var c = Math.sqrt(a*a + b*b);
  156.  
  157.                     var speed = 5;
  158.                     var sX = speed * a/c;
  159.                     var sY = speed * b/c;
  160.                     bullet.push({
  161.                         x: 300,
  162.                         y: 200,
  163.                         sX: sX,
  164.                         sY: sY
  165.                     })
  166.  
  167.                 }
  168.  
  169.                 function knock(x1,y1,x2,y2){  //碰撞检测
  170.                     var a = x1 - x2;
  171.                     var b = y1 - y2;
  172.                     var c = Math.sqrt(a*a + b*b);
  173.                     if( c < 36){
  174.                         return true;
  175.                     }else{
  176.                         return false;
  177.                     }
  178.                 }
  179.  
  180.             }
  181.         </script>
  182.     </body>
  183.  
  184. </html>

简易祖玛--canvas的更多相关文章

  1. h5-10 canvas 简易祖玛

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

  2. html 5 cavans 简易祖玛

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 简易的canvas画板

    没事仿照windows画板工具用canvas实现了一个简易版的画板. html: <!doctype html> <html> <head> <meta ch ...

  4. canvas绘制简易时钟

    时钟绘制的非常简易,但该有的都有了. 效果图如下, <!DOCTYPE html> <html> <head lang="en"> <me ...

  5. 通过Canvas + JS 实现简易时钟实战

    最近通过各种渠道学习了下html5中的canvas元素,为了练练手就随手写了一个简易的时钟.时钟本身不复杂,没有使用图片进行美化,下面就与大家分享一下具体的代码: 这是最终实现的效果: 部分的启发点来 ...

  6. html5 canvas简易版捕鱼达人游戏源码

    插件描述:html5利用canvas写的一个js版本的捕鱼,有积分统计,鱼可以全方位移动,炮会跟着鼠标移动,第一次打开需要鼠标移出背景图,再移入的时候就可以控制炮的转动,因为是用的mouseover触 ...

  7. canvas简易画板。

    在学canvas的时候,想到可以做一个自己用来画画的简易画板,加上canvas的基础都已经学完,便尝试做了一个画板.如图 1.获取标签. var c=document.getElementById(' ...

  8. canvas简易画板

    代码展示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  9. 用canvas绘制一个简易时钟

    在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数 ...

随机推荐

  1. RESTClient的基本使用

    1.本人使用的是火狐浏览器,其他浏览器应该也有(没试过),安装插件RESTClient. 2.1.打开RESTClient:

  2. showdoc 自动脚本安装

    ========================== showdoc 简介==========================在线文档管理系统很多, 比如阿里的语雀.腾讯的 TAPD 平台也包括文档管 ...

  3. VUE之图表操作

    参考 v-charts文档有详细说明,不多做介绍. 感谢博主的梳理,我在此基础之上稍作修改 效果展示: 在工作中遇到了就记录下来,留作备用,以便今后查阅: 安装 npm install vue-sch ...

  4. React---简单实现表单点击提交插入、删除操作

    import React,{Component,Fragment} from 'react' class App extends Component { constructor(){ super() ...

  5. Pycharm快捷键设置（鼠标滚动控制字体大小）

    一.pycharm字体放大的设置 File —> setting —> Keymap —>在搜寻框中输入:increase —> Increase Font Size(双击) ...

  6. 报错：keep must be either "first", "last" or False

    data_mac_set = data_mac.drop_duplicates(['std_mac']) 此时会报错:keep must be either "first", &q ...

  7. Activity的介绍

    Activity类是Android应用程序的重要组成部分,activity的启动和组合方式是平台应用程序模型的基本组成部分.Android系统通过调用与其生命周期的特定阶段相对应的特定回调方法来启动A ...

  8. hdu-1536 S-Nim SG函数

    http://acm.hdu.edu.cn/showproblem.php?pid=1536 给出能够取的方法序列,然后求基本石子堆问题. 只要用S序列去做转移即可. 注意has初始化的一些技巧 #i ...

  9. 关于list中移除某种数据类型的方法

    众所周知,list在不泛型的情况下是可以存放各种数据类型的,代码如下: public static void main(String[] args) { List list=new ArrayList ...

  10. XVI Open Cup named after E.V. Pankratiev. GP of Ekaterinburg--I.Iron man

    n个服务器,k类任务,每个服务器完成一个任务都有特定的花费$cost_{i,j}$,但是你设置好某台机器去完成某项任务时他只能去完成这类任务,除非你可以花费$C$去更改配置.第$i$天要求去完成$q_ ...