H5——简易马祖

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="xiaoshu.js"></script>
    <style>
        #div1 {
            width: 602px;
            margin: 20px auto;
            border: 1px solid #efdede;
        }
    </style>
</head>
<body>
    <div id="div1">
        <canvas id="ca" width="600" height="600"></canvas>
    </div>
</body>
</html>
<script>
    var OC = document.getElementById('ca');
    var CG = OC.getContext('2d');
    var mx = 0, my = 0;
    var iRoat = 0;
    var ball = [];
    setInterval(function () {
        ball.push({
            x: 200,
            y: 0,
            r: 100,
            num: 0,
            starX: 200,
            starY: 0
        });
    }, 400);
    
    var bollet = [];


    var oImg = new Image();
    oImg.src = "img/person.png";
    oImg.onload = function () {
        //画图运动
        setInterval(function () {
            CG.clearRect(0, 0, OC.width, OC.height);

            CG.save();
            CG.translate(180, 100);
            CG.rotate(iRoat);
            CG.translate(-25, -25);
            CG.drawImage(oImg, 0, 0, 50, 50);
            CG.restore();

            CG.beginPath();
            CG.arc(200, 100, 100, -90 * Math.PI / 180, 180 * Math.PI / 180, false);
            CG.stroke();

            CG.beginPath();
            CG.arc(180, 100, 80, 180 * Math.PI / 180, 360 * Math.PI / 180, false);
            CG.stroke();

            CG.beginPath();
            CG.arc(260, 100, 10, 0, 360 * Math.PI / 180, true)
            CG.stroke();
            CG.closePath();


            for (var i = 0; i < ball.length; i  ) {
                CG.beginPath();
                CG.moveTo(ball[i].x, ball[i].y);
                CG.arc(ball[i].x, ball[i].y, 10, 0, 360 * Math.PI / 180, false);
                CG.closePath();
                CG.fill();
            }

            for (var i = 0; i < bollet.length; i  ) {
                CG.save();
                CG.beginPath();
                CG.fillStyle = 'red';
                CG.moveTo(bollet[i].startX, bollet[i].startY);
                CG.arc(bollet[i].startX, bollet[i].startY, 10, 0, 360 * Math.PI / 180, false);
                CG.closePath();
                CG.fill();
                CG.restore();
            }


        }, 1000 / 60);

        //为运动提供数据
        setInterval(function () {
            for (var i = 0; i < ball.length; i  ) {
                ball[i].num  ;
                if (ball[i].num >= 270) {
                    ball[i].r = 80;
                    ball[i].starX = 180;
                    ball[i].starY = 100;
                    ball[i].x = add(ball[i].starX, mul(Math.sin(ball[i].num * Math.PI / 180), ball[i].r));
                    ball[i].y = add(-mul(Math.cos(ball[i].num * Math.PI / 180), ball[i].r), ball[i].starY);
                    if (ball[i].num == 270   180) {
                        alert('游戏结束');
                        window.location.reload();
                    }

                }
                else if (ball[i].num < 270) {
                    ball[i].x = Math.sin(ball[i].num * Math.PI / 180) * ball[i].r   ball[i].starX;
                    ball[i].y = ball[i].r - Math.cos(ball[i].num * Math.PI / 180) * ball[i].r   ball[i].starY;
                }
            }
            for (var i = 0; i < bollet.length; i  ) {
                bollet[i].startX = bollet[i].startX   bollet[i].sX;
                bollet[i].startY = bollet[i].startY   bollet[i].sY;
            }

            for (var i = 0; i < bollet.length; i  ) {
                for (var j = 0; j < ball.length; j  ) {
                    var a = {
                        x: Math.abs( bollet[i].startX),
                        y: Math.abs(bollet[i].startY),
                        r: 10
                    };
                    var b = {
                        x: Math.abs(ball[j].x),
                        y: Math.abs(ball[j].y),
                        r: 10
                    };
                    if (afoul(a, b))
                    {
                        bollet.splice(i, 1);
                        ball.splice(j, 1);
                        break;
                    }
                }
            }

        }, 30);



    }
    OC.onmousemove = function (ev) {
        var ev = ev || event;
        var a = ev.clientX - OC.offsetLeft - 180;
        var b = ev.clientY - OC.offsetTop - 100;
        var c = Math.sqrt(Math.pow(a, 2)   Math.pow(b, 2));
        if (a >= 0 && b <= 0) {
            iRoat = Math.asin(a / c);
        } else if (a > 0) {
            iRoat = Math.acos(a / c)   90 * Math.PI / 180;
        }
        if (a <= 0 && b <= 0) {
            iRoat = Math.asin(a / c);
        } else if (a < 0) {
            iRoat = -(Math.asin(b / c)   90 * Math.PI / 180);
        }
    }
    OC.onmousedown = function (ev) {
        var ev = ev || event;
        var a = ev.clientX - OC.offsetLeft - 180;
        var b = ev.clientY - OC.offsetTop - 100;
        var c = Math.sqrt(Math.pow(a, 2)   Math.pow(b, 2));
        var iSpeed = 5;
        var sX = iSpeed * a / c;
        var sY = iSpeed * b / c;
        bollet.push({
            startX: 180,
            startY: 100,
            sX: sX,
            sY: sY
        });
    }

     //碰撞检测
    function afoul(a, b) {
        var x = Math.pow((a.x - b.x), 2);
        var y = Math.pow((a.y - b.y), 2);
        var r = Math.pow((a.r   b.r), 2); 
        if (Math.sqrt( x   y) <Math.sqrt(r)) {
            return true;
        } 
        return false;
    }


</script>

  用到的处理小数的js  xiaoshu.js

//加法
function add(a, b) {
    var c, d, e;
    try {
        c = a.toString().split(".")[1].length;
    } catch (f) {
        c = 0;
    }
    try {
        d = b.toString().split(".")[1].length;
    } catch (f) {
        d = 0;
    }
    return e = Math.pow(10, Math.max(c, d)), (mul(a, e)   mul(b, e)) / e;
} 
//减法
function sub(a, b) {
    var c, d, e;
    try {
        c = a.toString().split(".")[1].length;
    } catch (f) {
        c = 0;
    }
    try {
        d = b.toString().split(".")[1].length;
    } catch (f) {
        d = 0;
    }
    return e = Math.pow(10, Math.max(c, d)), (mul(a, e) - mul(b, e)) / e;
}
//乘法
function mul(a, b) {
    var c = 0,
        d = a.toString(),
        e = b.toString();
    try {
        c  = d.split(".")[1].length;
    } catch (f) { }
    try {
        c  = e.split(".")[1].length;
    } catch (f) { }
    return Number(d.replace(".", "")) * Number(e.replace(".", "")) / Math.pow(10, c);
}
//除法
function div(a, b) {
    var c, d, e = 0,
        f = 0;
    try {
        e = a.toString().split(".")[1].length;
    } catch (g) { }
    try {
        f = b.toString().split(".")[1].length;
    } catch (g) { }
    return c = Number(a.toString().replace(".", "")), d = Number(b.toString().replace(".", "")), mul(c / d, Math.pow(10, f - e));
}

 


更多专业前端知识,请上 【猿2048】www.mk2048.com
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值