html5简易小游戏

最新推荐文章于 2021-05-30 23:57:57 发布
chuansheng8940
最新推荐文章于 2021-05-30 23:57:57 发布
阅读量375
点赞数 1
文章标签：游戏
原文链接：https://my.oschina.net/strip/blog/738190
版权
有点啰嗦，将就的看看吧
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0}
        body{background: black}
        #div1{background: white;width: 600px;margin: 20px auto;}
    </style>
    <script>
        window.onload = function () {
            var oC = document.getElementById('c1');
            var oGC = oC.getContext('2d');
            var i = 0;

            var yImg = new Image();
            yImg.src = '1.png';//准备一个命名为1.png的图片
            yImg.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,360*Math.PI/180,false);
                    oGC.stroke();

                    oGC.beginPath();
                    oGC.arc(400,200,20,0,360*Math.PI/180,false);
                    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.fill();
                    }
                    oGC.save();
                    oGC.translate(300,200);
                    oGC.rotate(iRotate);
                    oGC.translate(-40,-40);
                    oGC.drawImage(yImg,0,0);
                    oGC.restore();

                    for (var i = 0 ; i < bullet.length; i++){
                        oGC.save();
                        oGC.fillStyle = 'red';
                        oGC.beginPath();
                        oGC.moveTo(bullet[i].x,bullet[i].y);
                        oGC.arc(bullet[i].x,bullet[i].y,20,0,360*Math.PI/180,false);
                        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;
                    var h = 60;
                    oGC.fillText('小游戏',(oC.width - w)/2,450);
                    oGC.restore();

                },1000/60);

                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].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(pz(bullet[i].x,bullet[i].y,ball[j].x,ball[j].y)){
                                bullet.splice(i,1);
                                ball.splice(j,1);
                                break;
                            }
                        }
                    }

                },30);

                var ball = [];
                ball[0] = {
                    x : 300,
                    y : 0,
                    r : 200,
                    num : 0,
                    startX : 300,
                    startY : 0
                };

                setInterval(function () {
                    ball.push({
                        x : 300,
                        y : 0,
                        r : 200,
                        num : 0,
                        startX : 300,
                        startY : 0
                    });
                },350);
                var iRotate = 0;
                oC.onmousemove = function (ev) {
                    var ev = ev || window.event;
                    var x = ev.clientX - oC.offsetLeft;
                    var y = ev.clientY - oC.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 = [];
                oC.onmousedown = function (ev) {
                    var ev = ev || window.event;
                    var x = ev.clientX - oC.offsetLeft;
                    var y = ev.clientY - oC.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 pz(x1,y1,x2,y2) {
                var a = x1 - x2;
                var b = y1 - y2;
                var c = Math.sqrt(a*a + b*b);
                if(c < 40){
                    return true;
                }else{
                    return false;
                }
            }


        }
    </script>
</head>
<body>
<div id="div1">
    <canvas id="c1" width="600" height="600"></canvas>
</div>
</body>
</html>
转载于:https://my.oschina.net/strip/blog/738190