别踩白块

最新推荐文章于 2022-01-09 00:43:02 发布

AAAANIN

最新推荐文章于 2022-01-09 00:43:02 发布

阅读量502

点赞数

本文链接：https://blog.csdn.net/AAAANIN/article/details/77326920

版权

写的一个比较简单的别踩白块

有点low 但这是自己写的第一个cordova

主要积分还没添加这个主要是块的移动和点击都是最基础的

好久没玩过了有点忘了游戏机制见谅各位

把html 和 JS分开放到文件中然后run 一下就好了

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<canvas id="myCanvas" width="200" height="400" style="border:5px solid #d3d3d3;"
        οnclick="start()">
    您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
    var c = document.getElementById("myCanvas");
    var cxt = c.getContext("2d");
    window.onresize = resizeCanvas;

    function resizeCanvas() {
        c.width = window.innerWidth;
        c.height = window.innerHeight;
    }

    resizeCanvas();
    var box = new Array();//把画布定义为一个二维数组并且值为0；
    for (var k = 0; k < 4; k++) {
        box[k] = new Array();
        for (var j = 0; j < 4; j++) {
            box[k][j] = 0;
        }
    }
    var map = new Array();//把画布定义为一个二维数组并且值为0；
    for (var k = 0; k < 4; k++) {
        map[k] = new Array();
        for (var j = 0; j < 5; j++) {
            map[k][j] = 0;
        }
    }

    function get() {
        for (var t = 0; t < 4; t++) {
            var le = Math.round(Math.random() * 3);
            box[le][t] = 1;
        }
    }

    function newbox() {
        var t = Math.round(Math.random() * 3);
        box[t][0] = 1;
    }

    function draw() {
        c.height = c.height
        for (var r = 0; r < 4; r++) {
            cxt.moveTo(0, r * (window.innerHeight/4));
            cxt.lineTo(window.innerWidth, r * (window.innerHeight/4));
            cxt.stroke();
            cxt.moveTo(r * (window.innerWidth/4), 0);
            cxt.lineTo(r * (window.innerWidth/4), window.innerHeight);
            cxt.stroke();
        }
        for (var t = 0; t < 4; t++) {
            for (var r = 0; r < 4; r++) {
                if (box[r][t] == 1)
                    cxt.fillRect(r * (window.innerWidth/4), t * (window.innerHeight/4), (window.innerWidth/4)-1, (window.innerHeight/4)-1);
            }
        }
    }

    function fuzhi() {
        for (k = 0; k < 4; k++) {
            for (t = 0; t < 4; t++) {
                box[k][t] = 0;
            }
        }
        for (k = 0; k < 4; k++) {
            for (t = 0; t < 4; t++) {
                if (map[k][t] == 1) {
                    box[k][t] = map[k][t]
                }
            }
        }
        newbox();
    }

    function mapinitialize() {
        for (k = 0; k < 4; k++) {
            for (t = 0; t < 4; t++) {
                map[k][t] = 0;
            }
        }
    }

    function over() {
        alert("GAME OVER！！！"+(window.innerHeight/4)*3+event.clientY);
        c.height = c.height
        for (k = 0; k < 4; k++) {
            for (t = 0; t < 5; t++) {
                map[k][t] = 0;
                box[k][t] = 0
            }
        }
        get();
        draw();
    }

    function move() {
        x = event.clientX
        y = event.clientY
        p = parseInt(x / (window.innerWidth/4));
        if (box[p][3] != 1 || y < (window.innerHeight/4)*3) {
            over();
        }
        else {
            if (y > (window.innerHeight/4)*3 && y < window.innerHeight && box[p][3] == 1) {
                box[p][3] = 0;
                mapinitialize();
                for (k = 0; k < 4; k++) {
                    for (t = 0; t < 4; t++) {
                        if (box[k][t] == 1) {
                            map[k][t + 1] = box[k][t]
                        }
                    }
                }
                fuzhi();
                draw();
            }
        }
    }

    get();
    draw();

    function start() {
        move();
    }
</script>
</body>
</html>

AAAANIN

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
别踩白块

写的一个比较简单的别踩白块有点low 但这是自己写的第一个cordova主要积分还没添加这个主要是块的移动和点击都是最基础的好久没玩过了有点忘了游戏机制见谅各位把html 和 JS分开放到文件中然后run 一下就好了html>head> meta charset="UTF-8">head>body>canvas id="myC
复制链接

扫一扫