<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

    *margin{padding:0;margin:0;}

    body{background:black;}

    #box1{width:600px;height:600px;background:white; margin:20px auto;}

    span{background:white;}

</style>

<script>

    window.onload = function(){

        var oC = document.getElementById('cl');

        var oGc = oC.getContext('2d');

        var yImage = new Image();

        yImage.src = 'person.png';

        var iRotate = 0;

        yImage.onload = function(){

            setInterval(function(){

                oGc.clearRect(0,0,oC.width,oC.height);

                oGc.beginPath();

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

                oGc.stroke();

                oGc.beginPath();

                oGc.arc(250,200,150,180*Math.PI/180,0,false);

                oGc.stroke();

                oGc.beginPath();

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

                oGc.closePath();

                oGc.stroke();

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

                    oGc.beginPath();

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

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

                    oGc.closePath();

                    oGc.fill();

                }

                oGc.save();

                oGc.translate(300,200);

                oGc.rotate(180*Math.PI/180);

                oGc.rotate(iRotate);

                oGc.translate(-40,-40);

                oGc.drawImage(yImage,0,0);

                oGc.restore();

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

                    oGc.save();

                    oGc.beginPath();

                    oGc.fillStyle = 'red';

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

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

                    oGc.closePath();

                    oGc.fill();

                    oGc.restore();

                }    

            oGc.save();

            oGc.font = '60px impact';

            oGc.textBaseline = 'top';

            oGc.fillStyle = 'red';

            oGc.shadowOffsetX = 10;

            oGc.shadowOffsetY = 10;

            oGc.shadowColor = 'green';

            oGc.shadowBlur = 5;

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

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

            oGc.restore();

            },1000/60); //这个刷新1000/60最好

        }

        var ball = [];

        setInterval(function(){

            var ballData = {

                x:300,

                y:0,

                r:200,

                startX:300,

                startY:0,

                num:0

            };

            ball.push(ballData);

        },500);

        setInterval(function(){

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

                ball[i].num++;

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

                    ball[i].r = 150;

                    ball[i].startX = 250;

                    ball[i].startY = 50;

                }

                if(ball[i].num == 270+180){

                    alert("游戏结束！");

                    window.location.reload();

                }

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

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

            }

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

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

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

            }

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

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

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

                        ball.splice(i,1);

                        bullet.splice(j,1);

                        break;

                    }

                }

            }

        },30);

        oC.onmousemove = function(ev){

            var ev = ev || event;

            var disX = ev.clientX - oC.offsetLeft;

            var disY = ev.clientY - oC.offsetTop;

            var a = disX-300;

            var b = disY-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 = [];

        oC.onmousedown = function(ev){

            var ev = ev || event;

            var disX = ev.clientX - oC.offsetLeft;

            var disY = ev.clientY - oC.offsetTop;

            var a = disX-300;

            var b = disY-200;

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

            var speed = 5;

            var spX = speed*a/c;

            var spY = speed*b/c;

            bullet.push({

                x:300,

                y:200,

                sX:spX,

                sY:spY

            });

        };

        function crash(x1,y1,x2,y2){

            var x = x1-x2;

            var y = y1-y2;

            var c = Math.sqrt(x*x+y*y);

            if(c <40){

                return true;

            }else{

                return false;

            }

        }

    };

</script>

</head>

<body>

<div id="box1">

    <canvas id="cl" width="600" height="600">

        <span>浏览器不支持canvas</span>

    </canvas>

</div>

</body>

</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. deeplearning.ai 神经网络和深度学习 week3 浅层神经网络

    1. 第i层网络 Z[i] = W[i]A[i-1] + B[i],A[i] = f[i](Z[i]). 其中, W[i]形状是n[i]*n[i-1],n[i]是第i层神经元的数量: A[i-1]是第 ...

  2. android翻译应用、地图轨迹、视频广告、React Native知乎日报、网络请求框架等源码

    Android精选源码 android实现高德地图轨迹效果源码 使用React Native(Android和iOS)实现的 知乎日报效果源码 一款整合百度翻译api跟有道翻译api的翻译君 RxEa ...

  3. FPGA模N计数器的实现

    module ModuloN_Cntr(Clock, Clear, Q, QBAR); , UPTO = ;//计数器位数以及模数 input Clock, Clear; :]Q, QBAR; :]C ...

  4. Nginx笔记总结十三:sub_filter内容替换

    Nginx变异安装加上参数 --with-http_sub_module 配置文件: location ~* ^/portalproxy/([-]*)/portal(.*)$ { #sub_filte ...

  5. 为何印度打车软件Ola，也难逃“资本合并”命运？

    从全球市场来看,共享经济已经引发了多场具有颠覆性的风暴.尤其是在与大众关系紧密的衣食住行方面,诞生了具有强势影响力的独角兽企业.如,共享打车企业Uber.共享房屋出租企业Airbnb等.而鉴于每个国家 ...

  6. 吴裕雄--天生自然python编程：turtle模块绘图（2）

    #彩色螺旋线 import turtle import time turtle.pensize(2) turtle.bgcolor("black") colors = [" ...

  7. R的基础数据结构

  8. 亚马逊Prime会员的杀价，能说明会员+会越来越便宜吗？

    前段时间,京东又坑了!京东调整了物流方案--从原来的购物不满49元只需6元运费,调整到购物不满46元运费15元,运费猛涨了9元!原本京东PLUS会员每月有5张免运费券,但在运费涨价后运费券限制在6元, ...

  9. 我是青年你是良品－魅蓝NOTE 2

    2" title="我是青年你是良品-魅蓝NOTE 2">   明天魅蓝即将迎来自己的新品发布会.选择儿童节的第二天后最喜爱的手机品牌.让其成为真正青年的良品. 在 ...

  10. 奇葩念头：微信能取代WP应用吗

         墙倒众人推,原本是再平常不过的事,但每次发生都显得特别凄凉--就和楼市买房买涨不买跌一样,在互联网行业,用户数量越多的产品或服务,就会越受到行业和大众青睐.而越是小众的产品或服务,虽然是要走 ...