仿微信游戏《勇闯独木桥》-HTML5版本

2023-10-28 20:17:10
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>勇闯独木桥</title>
</head>
<body>
    <canvas id="canvas" width="400" height="400" style="border: 1px solid #000;"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        var cxt = canvas.getContext('2d');

        // 定时器
        var timer;
        // 游戏结束控制开关
        var iStop = false;
        // 得分
        var score = 1;

        // 起点
        var start = {x:0,y:300,w:100,h:100};
        // 终点
        var end = {x:200,y:300,w:100,h:100};

        // 过桥人的位置
        var manX = 90;
        // 过桥速率
        var manStep = 0;

        // 桥的宽度
        var loadWidth = 0;
        // 桥变长的速率
        var loadStep = 0;
        // 桥倒下控制开关
        var loadRun = false;
        // 桥倒下的速率
        var loadDeg = 0;

        // 过桥是否成功
        var isSuccess = false;
        // 是否正在过桥
        var isOn = false;

        // 画布移动速率
        var canvasMove = 0;

        // 终点的位置列表
        var intervals = [];
        for(var i=0; i<400; i+=10){
            intervals.push(i);
        }

        // 终点的宽度列表
        var blocks = [];
        for(var i=30; i<100; i+=10){
            blocks.push(i);
        }

        // 桥变长
        function pave(){
            loadWidth += loadStep;
        }

        // 人过桥
        function step(){
            manX += manStep;
        }

        // 绘制图形
        function draw(){
            cxt.save();
            cxt.fillRect(start.x, start.y, start.w, start.h);
            cxt.fillRect(end.x, end.y, end.w, end.h);
            cxt.restore();

            cxt.save();
            cxt.fillStyle = 'gray';
            cxt.translate(start.w, 300);
            cxt.rotate(loadDeg*Math.PI/180);
            cxt.fillRect(0, 0, 10, -loadWidth);
            cxt.restore();

            cxt.save();
            cxt.fillStyle = '#FF4500';
            cxt.fillRect(manX, 290, 10, 10);
            cxt.restore();

        }

        // 清除画布
        function erase() {
            cxt.clearRect(0, 0, canvas.width, canvas.height)
        }

        // 随机终点
        function initEnd(){
            var interval = intervals[Math.floor(Math.random()*intervals.length)];
            var block = blocks[Math.floor(Math.random()*blocks.length)];

            if(interval > start.w && interval + block < 400){
                end.x = interval;
                end.w = block;
            }else{
                initEnd();
            }
        }

        // 画得分
        function drawScore() {
            cxt.save();
            cxt.font="40px Verdana";
            cxt.fillStyle = 'black';
            cxt.fillText('第' + score +'关', 130, 50);
            cxt.restore();
        }

        // 画结束
        function drawEnd() {
            cxt.save();
            cxt.font="40px Verdana";
            cxt.fillStyle = 'red';
            cxt.fillText('游戏失败，继续努力！', 10, 150);
            cxt.restore();
        }

        // 控制桥的长度-空格键(space)
        document.onkeydown = function(ev){
            if(ev.keyCode == 32 && !isOn){
                loadStep = 2;
                isOn = true;
            }else{
                return;
            }

            document.onkeyup = function(ev){
                if(ev.keyCode == 32 && loadDeg == 0){
                    loadStep = 0;
                    loadRun = true;

                    if(loadWidth + start.w > end.x && loadWidth + start.w < end.x + end.w){
                        isSuccess = true;
                    }
                }
            }
        };

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

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

        function animate() {
            erase();
            pave();
            step();
            draw();
            drawScore();

            // 桥开始倒下
            if(loadRun){
                loadDeg += 2;
            }

            // 桥倒下后，人开始过桥
            if(loadDeg == 90){
                loadRun = false;
                manStep = 5;
            }

            // 过桥是否能成功
            if(isSuccess){
                // 到达目的地
                if(manX >= (end.x + end.w - 10)){
                    canvasMove = 5;
                    manStep = 0;
                    loadWidth = 0;
                }
                // 初始化，开始下一关过桥
                if(end.x == 0){
                    loadDeg = 0;
                    isSuccess = false;
                    isOn = false;
                    canvasMove = 0;

                    start.x = 0;
                    start.w = end.w;
                    manX = start.w - 10;

                    initEnd();
                    score ++;
                }else{
                    start.x -= canvasMove;
                    end.x -= canvasMove;
                    manX -= canvasMove;
                }
            }else{
                // 过桥失败，游戏结束
                if(manX >= start.w + loadWidth){
                    manStep = 0;
                    drawEnd();
                    iStop = true;
                }

            }

            if(iStop){
                cancelRequestAnimationFrame(timer);
            }else{
                timer = requestAnimationFrame(animate);
            }
        }

        animate();

    </script>
</body>
</html>
码农公寓

相关文章
