簡易祖瑪--canvas

時間 2019-12-02
標籤簡易 canvas 简体版
原文原文鏈接
<!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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。