<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .div1 {

                width: 600px;

                height: 600px;

                background: #f7fcfc;

                margin: 20px auto;

            }

        </style>

    </head>

    <body>

        <div class="div1">

            <canvas id="c1" width="600" height="600"></canvas>

        </div>

        <script type="text/javascript">

            var canvas = document.getElementById("c1");

            var ctx = canvas.getContext('2d');

            var yImg = new Image();

            yImg.src = 'img/siteRotate.png';

            yImg.onload = function() {

                setInterval(function() {

                    ctx.clearRect(0, 0, canvas.width, canvas.height);

                    ctx.beginPath();

                    ctx.arc(300, 200, 200, -90 * Math.PI / 180, 180 * Math.PI / 180, false);

                    ctx.stroke();

                    ctx.beginPath();

                    ctx.arc(250, 200, 150, 180 * Math.PI / 180, 360 * Math.PI / 180, false);

                    ctx.stroke();

                    ctx.beginPath();

                    ctx.arc(400, 200, 20, 0 * Math.PI / 180, 360 * Math.PI / 180, false);

                    ctx.stroke();

                    for(var i = 0; i < ball.length; i++) {

                        ctx.beginPath();

                        ctx.moveTo(ball[i].x, ball[i].y);

                        ctx.arc(ball[i].x, ball[i].y, 18, 0 * Math.PI / 180, 360 * Math.PI / 180, false);

                        ctx.fill();

                    }

                    ctx.save();

                    ctx.translate(300,200);

                    ctx.rotate(iRotate);

                    ctx.translate(-50,-50);

                    ctx.drawImage(yImg,0,0);

                    ctx.restore();

                    for(var i = 0; i < bullet.length; i++) {

                        ctx.save();

                        ctx.fillStyle = 'red';

                        ctx.beginPath();

                        ctx.moveTo(bullet[i].x, bullet[i].y);

                        ctx.arc(bullet[i].x, bullet[i].y, 18, 0 * Math.PI / 180, 360 * Math.PI / 180, false);

                        ctx.fill();

                        ctx.restore();

                    }

//                    ctx.save();

//                    ctx.font = '60px impact';

//                    ctx.textBaseline = 'top';

//                    ctx.fillStyle = 'red';

//                    ctx.shadowOffsetX = 10;

//                    ctx.shadowOffsetY = 10;

//                    ctx.shadowColor = 'green';

//                    ctx.shadowBlur = 5;

//                    var w = ctx.measureText('简易祖玛').width;

//                    var h = 60;

//                    ctx.fillText('简易祖玛',(canvas.width - w)/2 , 450);

//                    ctx.restore();

                }, 1000 / 60);            

                setInterval(function() {

                    for(var i = 0; i < ball.length; i++) {

                        ball[i].angle++;

                        if(ball[i].angle == 270) {

                            ball[i].r = 150;

                            ball[i].startX = 250;

                            ball[i].startY = 50;

                        }

                        if(ball[i].angle == 450) {

                            alert('游戏结束');

                            window.location.reload();

                        }

                        ball[i].x = Math.sin(ball[i].angle * Math.PI / 180) * ball[i].r + ball[i].startX;

                        ball[i].y = ball[i].r - Math.cos(ball[i].angle * Math.PI / 180) * ball[i].r + ball[i].startY;

                    }

                    for( var i = 0; i < bullet.length; i++){

                        bullet[i].x = bullet[i].x + bullet[i].sX;

                        bullet[i].y = bullet[i].y + bullet[i].sY;

                    }

                    for( var i = 0; i < bullet.length; i++){

                        for(var j = 0; j < ball.length; j++){

                            if( knock(bullet[i].x,bullet[i].y,ball[j].x,ball[j].y)){

                                bullet.splice(i,1);

                                ball.splice(j,1);

                                break;

                            }

                        }

                    }

                }, 30);

                var ball = [];    //小球进洞

                setInterval(function() {

                    ball.push({

                        x: 300,

                        y: 0,

                        r: 200,

                        startX: 300,

                        startY: 0,

                        angle: 0

                    })

                }, 500)

                var iRotate = 0;    //中心旋转

                canvas.onmousemove = function (ev){

                    var ev = ev || window.event;

                    var x = ev.clientX - canvas.offsetLeft;

                    var y = ev.clientY - canvas.offsetTop;

                    var a = x - 300;

                    var b = y - 200;

                    var c = Math.sqrt(a*a + b*b);

                    if( a>0 && b>0){    //第二象限

                        iRotate = Math.asin(b/c) + 90*Math.PI/180;

                    }else if(a>0){      //第一象限

                        iRotate = Math.asin(a/c);

                    }

                    if( a<0 && b>0){    //第三象限

                        iRotate = -(Math.asin(b/c) + 90*Math.PI/180);

                    }else if(a<0){      //第四象限

                        iRotate = Math.asin(a/c);

                    }

                }

                var bullet = [];  //子弹发射

                canvas.onmousedown = function (ev){

                    var ev = ev || window.event;

                    var x = ev.clientX - canvas.offsetLeft;

                    var y = ev.clientY - canvas.offsetTop;

                    var a = x - 300;

                    var b = y - 200;

                    var c = Math.sqrt(a*a + b*b);

                    var speed = 5;

                    var sX = speed * a/c;

                    var sY = speed * b/c;

                    bullet.push({

                        x: 300,

                        y: 200,

                        sX: sX,

                        sY: sY

                    })

                }

                function knock(x1,y1,x2,y2){  //碰撞检测

                    var a = x1 - x2;

                    var b = y1 - y2;

                    var c = Math.sqrt(a*a + b*b);

                    if( c < 36){

                        return true;

                    }else{

                        return false;

                    }

                }

            }

        </script>

    </body>

</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. mysqli_query($conn, $sql)的返回值类型

    SQL语句的分类: DDL: Data Define Language,数据定义语言——定义列 CREATE / DROP / ALTER / TRUNCATE DML: Data Manipulat ...

  2. php登录注册

    php 登录注册 注册代码:register.php <style type="text/css"> form{ width:300px; background-col ...

  3. 【BZOJ5194】Snow Boots

    [原题题面]传送门 [简化题意] 给定一个长度为n的序列. 有m次询问,每次询问给定两个数si,di.你一开始站在0,每次你可以走不超过di,但你到达的位置的数不能超过si.问能否走到n+1. n,m ...

  4. xueping wang 记录

    https://www.bbsmax.com/A/lk5aVBod1O/ https://pkgs.org/statistics/ 在firefox的调试控制台, 下面有一个独立的分割的控制台窗口, ...

  5. Privoxy教程

    简介 Privoxy 是一个 代理软件 简单说,就是进出你电脑的流量守门人.借由 Privoxy,我们可以控制出去的请求,还可以改写返回的响应.不必要的请求 – 比如视频广告的地址.图片广告的地址,我 ...

  6. 虚拟现实外包—动点飞扬软件专门承接VR/AR场景、游戏、项目外包

    VR外包AR外包公司(虚拟现实外包公司)承接虚拟现实项目开发(企业.教育.游戏.企业大数据展示等) 有VR/AR.Unity3D项目.游戏外包业务欢迎 联系我们 QQ:372900288 TEL:13 ...

  7. bzoj 2286: [Sdoi2011]消耗战 虚树+树dp

    2286: [Sdoi2011]消耗战 Time Limit: 20 Sec  Memory Limit: 512 MB[Submit][Status][Discuss] Description 在一 ...

  8. .NET常用功能

    1.判断对象判不为null或不为""或不为"undefined" public static bool isNotNullOrBlank(Object obj) ...

  9. 怎么样启用红米手机5的ROOT权限

    红米手机5能如何拥有了root超级权限?各位清楚,android机器有root超级权限,一旦手机拥有了root相关权限,就能够实现更强的功能,举个栗子各位公司的营销部门的妹纸,使用较多营销工具都需要在 ...

  10. .net扩展方法

    http://www.cnblogs.com/landeanfen/p/4632467.html 看了博客才知道定义一个Util工具类并且在工具类里面写静态扩展方法并不是最好的选择.