别踩白块-用H5中的Canvas和JavaScript实现。

最新推荐文章于 2023-05-07 20:10:48 发布

senwei.zhang

最新推荐文章于 2023-05-07 20:10:48 发布

阅读量1.9k

点赞数 1

分类专栏： HTML+CSS+JS 文章标签： javascript 别踩白块

HTML+CSS+JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>
        SteppingWhiteBlocks
    </title>
    <style type="text/css">
    div {
        position: absolute;
        top: 0px;
        left: 200px;
    }

    #score {
        left: 400px;
        width: 200px;
        font: "微软雅黑";
        color: chartreuse;
        font-size: 40px;
    }
    </style>
</head>

<body bgcolor="steelblue">
    <div id="aa">
        <canvas id="game" onmousedown="onGamedown()">
        </canvas>
        <br>
        <div id="score">
            得分
        </div>
    </div>
    <script type="text/javascript">
    var w = 260;
    var h = 400;
    var score = 0;
    var div = document.getElementById("score");

    function Rect(y, arr) {
        //每一个rect表示一行
        //y表示这一行的高度
        this.y = y;
        //arr是一个数组，用于描述，四个小矩形，每一个的颜色
        //颜色：0表示白，2表示黑，1表示红，3表示灰，大于3也是灰
        this.arr = arr;
    }

    var game = document.getElementById("game");
    game.width = w;
    game.height = h;
    var canvas = game.getContext("2d");

    canvas.fillStyle = "#000000";
    //a里面放入6个Rect
    var a = new Array();
    for (var i = 0; i < 6; i++) {
        //每一个Rect里面要有一个y，一个arr
        var arr = new Array();
        for (var j = 0; j < 4; j++) {
            arr[j] = 0;
        }
        //应该随机一个让它是黑色
        var n = Math.floor(Math.random() * 4);
        arr[n] = 2;
        a[i] = new Rect(i * 100 - 200, arr);
    }


    var backing = null;
    var backsum = 0;
    //回退的方法
    function goBack() {
        if (backsum == h / 4) {
            //停止回退
            clearInterval(backing);
        }
        for (var i = 0; i < a.length; i++) {
            a[i].y--;
        }
        drawGame();
        backsum++;
    }

    //能动的方法
    function goGame() {
        drawGame();
        for (var i = 0; i < a.length; i++) {
            a[i].y++;
            if (a[i].y > h) {
                for (var j = 0; j < a[i].arr.length; j++) {
                    if (a[i].arr[j] == 2) {
                        //gameover
                        isrunning = false;
                        clearInterval(running);
                        a[i].arr[j] = 1;
                        //回退
                        backing = setInterval("goBack();", 10);
                        return;
                    }

                }

                //出去了，就再利用
                for (var j = 0; j < a[i].arr.length; j++) {
                    a[i].arr[j] = 0;


                }
                var n = Math.floor(Math.random() * 4);
                a[i].arr[n] = 2;
                //放到最上面去
                a[i].y -= h / 4 * 6;
            }


        }


    }
    //绘制的方法

    function drawGame() {
        for (var i = 0; i < a.length; i++) {
            for (var j = 0; j < a[i].arr.length; j++) {
                //颜色是什么？
                switch (a[i].arr[j]) {
                    case 0:
                        canvas.fillStyle = "#ffffff";
                        break;
                    case 1:
                        canvas.fillStyle = "#ff0000";
                        break;
                    case 2:
                        canvas.fillStyle = "#000000";
                        break;
                    case 3:
                        canvas.fillStyle = "#dddddd";
                        break;
                    default:
                        canvas.fillStyle = "#dddddd";
                }
                //画
                canvas.fillRect(j * (w / 4), a[i].y, (w / 4), (h / 4));
                //描边
                canvas.strokeStyle = "#666666";
                canvas.strokeRect(j * (w / 4), a[i].y, (w / 4), (h / 4));


            }


        }
        canvas.strokeStyle = "#000000";
        canvas.strokeRect(0, 0, w, h);


    }




    var begin = true;

    function onGamedown(event) {
        if (begin) {
            begin = false;
            running = setInterval("goGame();", 10);
        }
        if (isrunning) {
            event = event || window.event;
            var x = event.clientX - 200;
            var y = event.clientY;


            //判断点击的是哪个矩形
            for (var i = 0; i < a.length; i++) {
                if (a[i].y < y && a[i].y + h / 4 > y) {
                    //点击在了第i行
                    var j = Math.floor(x / (w / 4));
                    //将上面取整的数加1
                    a[i].arr[j]++;


                    if (a[i].arr[j] == 1) {
                        drawGame();
                        clearInterval(running);
                        isrunning = false;
                        return;
                    } else if (a[i].arr[j] == 3) {
                        score++;
                        div.innerHTML = "得分：" + score;
                    }


                }


            }
        }


    }

    var isrunning = true;
    var running = null;
    drawGame();
    </script>
</body>

</html>

senwei.zhang

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
别踩白块-用H5中的Canvas和JavaScript实现。

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title> SteppingWhiteBlocks </title> <style type="text/css"> div { ...
复制链接

扫一扫

专栏目录