html 5 cavans 简易祖玛

<!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 简易祖玛

相关推荐
