<!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. 浅谈Vue之双向绑定

    VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的.那么Object.defineP ...

  2. linux下的缓存机制及清理buffer/cache/swap的方法梳理 （转）

    一.缓存机制介绍 在Linux系统中,为了提高文件系统性能,内核利用一部分物理内存分配出缓冲区,用于缓存系统操作和数据文件,当内核收到读写的请求时,内核先去缓存区找是否有请求的数据,有就直接返回,如果 ...

  3. C# 简单粗暴写日志

    public static void WriteLog(string text) { string path = AppDomain.CurrentDomain.BaseDirectory; path ...

  4. linux设置静态IP及网卡选择

    linux中使用ifconfig命令查看网卡信息时显示为eth1,但是在network-scripts中只有ifcfg-eth0的配置文件,并且里面的NAME="eth0".   ...

  5. 恢复git reset --hard之前尚未push的commit提交

    1.在.git/logs/refs/heads/下有所有分支的操作记录及commit号,可以找到commit提交所在那个分支名称: 2.搜索commit提交的标题,就可以看到相应的记录,包括id号: ...

  6. ActiveReports报表控件 V13 正式发布，提供在线报表设计和自适应报表布局

    重磅消息, ActiveReports V13 正式发布!本次更新 ActiveReports 将给您带来全新的报表设计体验:提供在线报表设计器.提供响应式布局和屏幕尺寸自适应能力.提供全新的图表…… ...

  7. SQL Server監控与診斷

    僅為記錄工作中遇到的問題． 1. 字符串截斷: SQL server里很多job用於運行DTS,經常會收到系統出錯警報,如: ...String ) The statement has been te ...

  8. Vue-admin工作整理（十七）：Mock模拟Ajax请求

    思路:使用Mock拦截actions请求,通过 Mock.mock(/\/getUserInfo/, 'post', getUserInfo) 进行拦截标示,然后将内容返回 export const ...

  9. [数据结构] 2.2 Huffman树

    注:本文原创,转载请注明出处,本人保留对未注明出处行为的责任追究. 1.Huffman树是什么 Huffman树也称为哈夫曼编码,是一种编码方式,常用于协议的制定,以节省传输空间. A - F字母,出 ...

  10. redist命令操作（二）--哈希Hash，列表List

    1.Redis 哈希(Hash) 参考菜鸟教程:http://www.runoob.com/redis/redis-hashes.html Redis hash 是一个string类型的field和v ...