h5 canvas 简易祖玛游戏

最新推荐文章于 2021-02-22 03:34:05 发布

石界星空

最新推荐文章于 2021-02-22 03:34:05 发布

阅读量824

点赞数

分类专栏： h5开发 js 文章标签： canvas 游戏

本文链接：https://blog.csdn.net/stone10086/article/details/73249453

版权

js 同时被 2 个专栏收录

69 篇文章 0 订阅

订阅专栏

h5开发

8 篇文章 0 订阅

订阅专栏

效果图：
这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>祖玛游戏</title>
        <style type="text/css">
            body{
                background: #000;
            }
            .canvas{
                width: 600px;
                height: 600px;
                margin: 10px auto;
                border: 1px solid red;
            }
            canvas{
                background: #fff;
            }
        </style>
    </head>
    <body>
        <div class="canvas">
            <canvas id="box" width="600" height="600">

            </canvas>
        </div>
    </body>
    <script type="text/javascript">
        var box=document.getElementById('box');
        var oc=box.getContext('2d');

        var a=-0.5*Math.PI;
        var b=1*Math.PI;

        var dia;

        var diy;
        var dix;
        var bull=[];

        var iround=0;
        box.onmousemove=function(e){
            var x2=e.clientX-box.offsetLeft;
            var y2=e.clientY-box.offsetTop;
            console.log("x2="+x2)
            console.log("y2="+y2)
            var a1=x2-300;
            var b1=y2-250;
            var c1=Math.sqrt(a1*a1+b1*b1);
            console.log("c1="+c1)
            if (a1>0&&b1>0) {
                iround=Math.asin(b1/c1)+0.5*Math.PI;
            }else if (a1>0) {
                iround=Math.asin(a1/c1);
            }
            if(a1<0&&b1>0){
                iround=-(Math.asin(b1/c1)+0.5*Math.PI);
            }else if(a1<0){
                iround=Math.asin(a1/c1);
            }
            console.log(iround)
        }

        var img=new Image();
        img.src='img/person.png'
        img.onload=function(){
            tab()
        }

        //生成子弹
        var bullet=[];
        box.onclick=function(e){
            var x3=e.clientX-this.offsetLeft;
            var y3=e.clientY-this.offsetTop;
            var a3=x3-300;
            var b3=y3-250;
            var c3=Math.sqrt(a3*a3+b3*b3);

            var speed=5;

            var xs=speed*a3/c3;
            var ys=speed*b3/c3;

            bullet.push({
                x:300,
                y:250,
                xs:xs,
                ys:ys
            });
        }

        function pz(x1,y1,x2,y2){
            var disx=x1-x2;
            var disy=y1-y2;
            var c=Math.sqrt(disx*disx+disy*disy)
            if (c<40) {
                return true;
            } else{
                return false;
            }
        }

        function tab(){
        var timer1=setInterval(function(){
            bull.push({
                x:300,
                y:0,
                na:-0.5*Math.PI
            });
        },400);

        var timer2=setInterval(function(){

//          console.log(na)
            for (var i=0;i<bull.length;i++) {
                bull[i].na+=1*Math.PI/180;
                if (bull[i].na>2*Math.PI) {
    //              bull[i].na=a;
                    alert('再来一次');
                    clearInterval(timer1);
                    clearInterval(timer2);
                    clearInterval(timer3);
                }
                if (bull[i].na<1*Math.PI) {
                    dia=bull[i].na-a;
                    bull[i].y=250-250*Math.cos(dia);
                    bull[i].x=250*Math.sin(dia)+300;
                } else{
                    dia=bull[i].na-b;
                    bull[i].x=175-175*Math.cos(dia)+50;
                    bull[i].y=250-175*Math.sin(dia);
                }
            }


            for (var i=0;i<bullet.length;i++) {
                bullet[i].x=bullet[i].x+bullet[i].xs;
                bullet[i].y=bullet[i].y+bullet[i].ys;
            }

            for (var i=0 ;i<bull.length;i++) {
                for (var j=0;j<bullet.length;j++) {
                    if(pz(bull[i].x,bull[i].y,bullet[j].x,bullet[j].y)){
                        bull.splice(i,1);
                        bullet.splice(j,1);
                        break;
                    }
                }
            }
        },30);


        var timer3=setInterval(function(){
            oc.clearRect(0,0,box.width,box.height);
//          oc.clearRect(0,0,box.width,box.height);
            oc.beginPath();
            oc.arc(300,250,250,-90*Math.PI/180,180*Math.PI/180,false);
            oc.stroke();

            oc.beginPath();
            oc.arc(225,250,175,1*Math.PI,2*Math.PI,false);
            oc.stroke();

            oc.beginPath();
            oc.arc(400,250,20,2*Math.PI,false);
            oc.stroke();

            for (var i=0;i<bull.length;i++) {
                oc.beginPath();
                oc.arc(bull[i].x,bull[i].y,20,2*Math.PI,false);
                oc.closePath();
                oc.fill();
            }


//          绘制青蛙
            oc.save();
            oc.translate(300,250);
            oc.beginPath();
            oc.rotate(iround);
            oc.translate(-40,-40);
            oc.drawImage(img,0,0)
            oc.closePath();
            oc.restore();

//          绘制子弹
            for (var i=0;i<bullet.length;i++) {
                oc.save();
                oc.fillStyle='red';
                oc.beginPath();
                oc.arc(bullet[i].x,bullet[i].y,20,2*Math.PI,false);
                oc.closePath();
                oc.stroke();
                oc.fill();
                oc.restore();
            }

            //绘制文字
            oc.save();
            oc.font='60px impact';
            oc.textBaseline='top';
            oc.fillStyle='red';
            oc.shadowOffsetX=10;
            oc.shadowOffsetY=10;
            oc.shadowColor='green';
            oc.shadowBlur=5;
            var w=oc.measureText('祖玛游戏').width;
            var h=60;
            oc.fillText('祖玛游戏',(box.width-w)/2,450);
            oc.restore();
        },1000/24);



    }
    </script>
</html>

石界星空

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
h5 canvas 简易祖玛游戏

效果图： <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>祖玛游戏</title> <style type="text/css"> body{ background: #000; }
复制链接

扫一扫