html5+js实例-掌机游戏赛车-贴有源码

作者：袖梨 2022-06-25

游戏界面，没做什么美化。

游戏规则：游戏界面分为三列，黑色方块随机落下，红色方块可以在三列自由移动（用方向键，长按下方向键黑色方块加速下滑）。红色方块碰到黑色方块即为输。

得分：每正常通过一次黑色方块加12分，加速通过加30分。

下面直接上代码：

html：

代码如下	复制代码
得分：0

JS代码

代码如下

复制代码

function createCar(speed,cxt,dom) {
    var o = new Object();
    o.speed = speed;
    o.cxt = cxt;
    o.cell = 100;
    o.curdir = {'x':100,'y':400};
    o.hinder = [[],[],[]];
    o.scroll = 0;
    o.scored = 0;
    o.init = function () {
        o.cxt.fillStyle = 'red';
        o.cxt.fillRect(o.curdir.x, o.curdir.y, o.cell, o.cell);
        document.onkeydown = function (e) {
            if(e.keyCode === 37 && o.curdir.x > 0){
                o.moveCar('left');
            }
            else if(e.keyCode === 39 && o.curdir.x < 200){
                o.moveCar('right');
            }
            else if(e.keyCode === 40)
                o.speed = speed / 3;
        };
        document.onkeyup = function () {
            o.speed = speed;
        };
        o.setHinder();
        o.downHinder();
    };
    o.setHinder = function () {
        var rand1 = Math.ceil(Math.random() * 1000) % 2,
            rand2 = Math.ceil(Math.random() * 1000) % 2,
            rand3 = Math.ceil(Math.random() * 1000) % 2;
        o.hinder[0].push({'x':0,'y':0,'hinder':rand1});
        o.hinder[1].push({'x':100,'y':0,'hinder':rand2});
        o.hinder[2].push({'x':200,'y':0,'hinder':rand1 + rand2 == 2?0:rand3});
        for(var i = 0; i < o.hinder.length; i ++){
            var last =o.hinder[i][o.hinder[i].length - 1];
            if(last.hinder === 1) {
                o.cxt.fillStyle = 'black';
                o.cxt.fillRect(last.x,last.y, o.cell, o.cell);
            }
        }
    };
    o.downHinder = function () {
        setTimeout(function () {
            var i = 0,
                j = 0,
                cur = null,
                old = null;
            for(i = 0; i < o.hinder[0].length; i ++) {
                for(j = 0; j < 3; j ++) {
                    cur = o.hinder[j][i];
                    if (cur.hinder === 1) {
                        old = o.hinder[j][i];
                        o.cxt.clearRect(old.x,old.y, o.cell, o.cell);
                        o.hinder[j][i].y = o.hinder[j][i].y + 5;
                        cur = o.hinder[j][i];
                        o.cxt.fillStyle = 'black';
                        o.cxt.fillRect(cur.x,cur.y, o.cell, o.cell);
                    }
                    else
                        o.hinder[j][i].y = o.hinder[j][i].y + 5;
                }
            }
            for(i = 0; i < o.hinder.length; i ++) {
                if (o.hinder[i][0].y >= 500) {
                    o.scored = o.scored + Math.ceil(100/o.speed);
                    dom.innerHTML = '得分：' + o.scored;
                    var over = o.hinder[i].shift();
                    if(over.hinder === 1)
                        o.cxt.clearRect(over.x,over.y, o.cell, o.cell);
                }
            }
            if(o.hinder[o.curdir.x/100][0].hinder === 1 && o.hinder[o.curdir.x/100][0].y + 100 >= o.curdir.y){
                alert('你挂了');
                return;
            }
            o.scroll = o.scroll + 5;
            if(o.scroll % 300 == 0)
                o.setHinder();
            o.downHinder();
        }, o.speed);
    };
    o.moveCar = function (dir) {
        o.cxt.fillStyle = 'red';
        o.cxt.clearRect(o.curdir.x, o.curdir.y, o.cell, o.cell);
        o.curdir.x = (dir === 'left'?o.curdir.x - o.cell:o.curdir.x + o.cell);
        o.cxt.fillRect(o.curdir.x,o.curdir.y, o.cell, o.cell);
    };
    return o;
}

var c = document.getElementById('mycar');
var scored = document.getElementById('scored');
var cxt = c.getContext('2d');
var car = createCar(30,cxt,scored);
car.init();

算法写的有点不好，有大神路过望给一写指导。

相关文章

精彩推荐