别踩白块

来源：互联网发布：ping ip或域名编辑：程序博客网时间：2024/06/06 07:03

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

有点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;"        onclick="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>

阅读全文

0 0