模仿微信"转你妹"游戏

2023-10-26 13:29:28
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>微信小游戏-转你妹</title>
</head>
<body>
<div>
    <canvas width="600" height="600" id="canvas" style="border:1px solid red;"></canvas>
    <script>

        var canvas = document.getElementById('canvas');
        var cxt = canvas.getContext('2d');

        var index = 0;
        var timer;
        var iStop = false;
        var ladderLen = 60;
        var outerLen = 200;
        var boxLen = 20;
        var score = 0;
        var isCal = false;

        var ladderA = {'degree':0, 'boxes':[{'index':1,'color':'red'}, {'index':2,'color':'green'}]};
        var ladderB = {'degree':60, 'boxes':[{'index':1,'color':'yellow'}]};
        var ladderC = {'degree':120, 'boxes':[]};
        var ladderD = {'degree':180, 'boxes':[]};
        var ladderE = {'degree':240, 'boxes':[]};
        var ladderF = {'degree':300, 'boxes':[{'index':1,'color':'blue'}]};

        var ladderX = [{'degree':300, 'index':7, 'color':'red'}, {'degree':240, 'index':7, 'color':'red'}];

        var colors =  ['yellow', 'blue', 'green', 'red'];

        function drawBg(){

            /*********外部六边形**********/
            cxt.save();
            cxt.beginPath();
            cxt.fillStyle = 'gray';
            cxt.translate(300, 300);

            cxt.moveTo(outerLen, 0);
            cxt.rotate(60*Math.PI/180);
            cxt.lineTo(outerLen, 0);
            cxt.rotate(60*Math.PI/180);
            cxt.lineTo(outerLen, 0);
            cxt.rotate(60*Math.PI/180);
            cxt.lineTo(outerLen, 0);
            cxt.rotate(60*Math.PI/180);
            cxt.lineTo(outerLen, 0);
            cxt.rotate(60*Math.PI/180);
            cxt.lineTo(outerLen, 0);

            cxt.closePath();
            cxt.fill();
            cxt.restore();

            /********内部六边形***********/
            cxt.save();
            cxt.beginPath();
            cxt.translate(300, 300);

            cxt.moveTo(ladderLen, 0);
            cxt.rotate(60*Math.PI/180);
            cxt.lineTo(ladderLen, 0);
            cxt.rotate(60*Math.PI/180);
            cxt.lineTo(ladderLen, 0);
            cxt.rotate(60*Math.PI/180);
            cxt.lineTo(ladderLen, 0);
            cxt.rotate(60*Math.PI/180);
            cxt.lineTo(ladderLen, 0);
            cxt.rotate(60*Math.PI/180);
            cxt.lineTo(ladderLen, 0);

            cxt.closePath();
            cxt.fill();
            cxt.restore();
        }

        function drawLadder(ladderA){
            for(var i=0; i<ladderA.boxes.length; i++){
                cxt.save();
                cxt.translate(300, 300);
                cxt.fillStyle = ladderA.boxes[i].color;
                cxt.beginPath();
                cxt.rotate(ladderA.degree*Math.PI/180);
                cxt.moveTo(ladderLen + (ladderA.boxes[i].index - 1)*boxLen, 0);
                cxt.lineTo(ladderLen + ladderA.boxes[i].index*boxLen, 0);
                cxt.rotate(60*Math.PI/180);
                cxt.lineTo(ladderLen + ladderA.boxes[i].index*boxLen, 0);
                cxt.lineTo(ladderLen + (ladderA.boxes[i].index - 1)*boxLen, 0);
                cxt.closePath();
                cxt.fill();
                cxt.restore();
            }
        }

        // 画下落的梯形
        function drawX(){
            isCal = true;
            var _ladderX = [];
            for(var i=0; i<ladderX.length; i++){

                cxt.save();
                cxt.translate(300, 300);
                cxt.fillStyle = ladderX[i].color;
                cxt.beginPath();
                cxt.rotate(ladderX[i].degree * Math.PI / 180);
                cxt.moveTo(ladderLen + (ladderX[i].index - 1) * boxLen, 0);
                cxt.lineTo(ladderLen + ladderX[i].index * boxLen, 0);
                cxt.rotate(60 * Math.PI / 180);
                cxt.lineTo(ladderLen + ladderX[i].index * boxLen, 0);
                cxt.lineTo(ladderLen + (ladderX[i].index - 1) * boxLen, 0);
                cxt.closePath();
                cxt.fill();
                cxt.restore();

                var isDel = false;
                var _ladder = qryLadder(ladderX[i].degree);
                if(_ladder.boxes.length == 0){
                    if(ladderX[i].index == 1){
                        isDel = true;
                        _ladder.boxes.push({'index':ladderX[i].index,'color':ladderX[i].color});
                        getScore();
                    }
                }else if(_ladder.boxes.length == 7 && ladderX[i].index == 7){
                    iStop = true;
                    alert('game over!');
                }else if((_ladder.boxes[_ladder.boxes.length-1].index + 1) == ladderX[i].index){
                    isDel = true;
                    _ladder.boxes.push({'index':ladderX[i].index,'color':ladderX[i].color});
                    getScore();
                }

                if(!isDel){
                    _ladderX.push(ladderX[i]);
                }

                if(index%20 == 0){
                    ladderX[i].index -= 1;
                }

            }

            ladderX = _ladderX;

            if(ladderX.length == 0){
                randomX();
            }

            isCal = false;
        }

        // 随机下落的梯形
        function randomX(){
            ladderX = [];
            var degree = Math.floor(Math.random()*6)*60;
            var color = colors[Math.floor(Math.random()*4)];

            var num = Math.round(Math.random()*3);
            for(var i=0; i<num; i++){
                var _degree = degree + i*60;
                if(_degree >= 360){
                    _degree -= 360;
                }

                ladderX.push({'degree':_degree, 'index':7, 'color':color});
            }
            console.log(ladderX);
        }

        // 根据degree查找对应的梯形
        function qryLadder(degree){
            if(ladderA.degree == degree){
                return ladderA;
            }
            if(ladderB.degree == degree){
                return ladderB;
            }
            if(ladderC.degree == degree){
                return ladderC;
            }
            if(ladderD.degree == degree){
                return ladderD;
            }
            if(ladderE.degree == degree){
                return ladderE;
            }
            if(ladderF.degree == degree){
                return ladderF;
            }
        }

        function draw(){
            drawBg();
            drawLadder(ladderA);
            drawLadder(ladderB);
            drawLadder(ladderC);
            drawLadder(ladderD);
            drawLadder(ladderE);
            drawLadder(ladderF);
            drawX();
            drawScore();
        }

        function erase(){
            cxt.clearRect(0, 0, canvas.width, canvas.height);
        }

        function add60(ladder){
            if(ladder.degree == 300){
                ladder.degree = 0;
            }else{
                ladder.degree += 60;
            }
        }

        function del60(ladder){
            if(ladder.degree == 0){
                ladder.degree = 300;
            }else{
                ladder.degree -= 60;
            }
        }

        function getScore(){
            var minLen = ladderA.boxes.length;
            minLen = ladderB.boxes.length<minLen?ladderB.boxes.length:minLen;
            minLen = ladderC.boxes.length<minLen?ladderC.boxes.length:minLen;
            minLen = ladderD.boxes.length<minLen?ladderD.boxes.length:minLen;
            minLen = ladderE.boxes.length<minLen?ladderE.boxes.length:minLen;
            minLen = ladderF.boxes.length<minLen?ladderF.boxes.length:minLen;

            score += minLen*10;
            for(var i=0; i<minLen; i++){
                ladderA.boxes.shift();
                for(var j=0; j<ladderA.boxes.length; j++){
                    ladderA.boxes[j].index --;
                }
                ladderB.boxes.shift();
                for(var j=0; j<ladderB.boxes.length; j++){
                    ladderB.boxes[j].index --;
                }
                ladderC.boxes.shift();
                for(var j=0; j<ladderC.boxes.length; j++){
                    ladderC.boxes[j].index --;
                }
                ladderD.boxes.shift();
                for(var j=0; j<ladderD.boxes.length; j++){
                    ladderD.boxes[j].index --;
                }
                ladderE.boxes.shift();
                for(var j=0; j<ladderE.boxes.length; j++){
                    ladderE.boxes[j].index --;
                }
                ladderF.boxes.shift();
                for(var j=0; j<ladderF.boxes.length; j++){
                    ladderF.boxes[j].index --;
                }
            }
        }

        function drawScore(){
            cxt.save();
            cxt.font="40px Verdana";
            cxt.fillStyle = 'skyblue';
            cxt.fillText(score + "", 280, 314);
            cxt.restore();
        }

        var last = new Date();
        document.onkeydown = (function(e){
            var now = new Date();
            if((now.getTime() - last.getTime()) < 200 || isCal){
                return;
            }
            last = now;
            switch(e.which){
                case 39:
                    del60(ladderA);
                    del60(ladderB);
                    del60(ladderC);
                    del60(ladderD);
                    del60(ladderE);
                    del60(ladderF);
                    break;
                case 37:
                    add60(ladderA);
                    add60(ladderB);
                    add60(ladderC);
                    add60(ladderD);
                    add60(ladderE);
                    add60(ladderF);
                    break;
            }
        });

        window.requestAnimationFrame =
                window.requestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.msRequestAnimationFrame;

        window.cancelRequestAnimationFrame =
                window.cancelRequestAnimationFrame ||
                window.mozCancelRequestAnimationFrame ||
                window.webkitCancelRequestAnimationFrame ||
                window.msCancelRequestAnimationFrame;

        function animate() {
            index ++;
            erase();
            draw();
            if(iStop){
                cancelRequestAnimationFrame(timer);
            }else{
                timer = requestAnimationFrame(animate);
            }
        }

        animate();
    </script>
</div>
</body>
</html>
模仿微信"转你妹"游戏
码农公寓

相关文章
