利用JS实现的网页赛车小游戏

​ 今天学完了JavaScript基础,打算做个网页小游戏练练手,想来想去,想起了小时候那种游戏机里的赛车游戏,于是做了一个玩玩,效果如下:

通过操纵最底下的小车来回躲避上方随机出来的三个障碍车辆从而使游戏进行,是不是找到了小时候的味道?

​ 那么是怎么做的呢? 首先定义这几个小车共同的模型框架(从上图也能看见 a~g代表每个小车内部的7个方块):

然后通过绝对定位设定障碍车辆和玩家控制小车的初始位置.

接下来,通过move()函数让障碍小车向下移动:

//移动函数
function move(obj, attr, target, speed, callback) {
    clearInterval(obj.timer);
    var newValue;
    obj.timer = setInterval(function () {
        if (parseInt(getStyle(obj, attr)) < target) {
            obj.style[attr] = parseInt(getStyle(obj, attr)) + speed + "px";
            newValue = parseInt(obj.style[attr]);
            if (newValue > target) {
                newValue = target;
            }
            if (newValue == target) {
                obj.style[attr] = newValue + "px";
                clearInterval(obj.timer);
                callback && callback();
            }
        }
        else if (parseInt(getStyle(obj, attr)) > target) {
            obj.style[attr] = parseInt(getStyle(obj, attr)) - speed + "px";
            newValue = parseInt(obj.style[attr]);
            if (newValue < target) {
                newValue = target;
            }
            if (newValue == target) {
                obj.style[attr] = newValue + "px";
                clearInterval(obj.timer);
                callback && callback();
            }
        }
    }, 20);
}
//获取属性值
function getStyle(obj, attr) {
    return getComputedStyle(obj, null)[attr];
}

并通过碰撞检测函数实时监测己方小车是否与对面车辆相碰:

//碰撞函数
function collide(obj1, obj2) {
    if (!(obj1.offsetTop + obj1.offsetHeight <= obj2.offsetTop
        || obj1.offsetLeft + obj1.offsetWidth <= obj2.offsetLeft
        || obj1.offsetLeft >= obj2.offsetLeft + obj2.offsetWidth
        || obj1.offsetTop >= obj2.offsetTop + obj2.offsetHeight)) {
        alert("碰上了");
        //重置障碍赛车位置
        oppsiteCar1.style.top = "190px"
        oppsiteCar2.style.top = "-40px"
        oppsiteCar3.style.top = "95px"
        //重置速度
        speed = 2;
        //重置分数
        scores = 0;
    }
}

以上就是主要的部分了,当然最重要的是,如何确实障碍小车刷新之后的间距?这点,我用了一个方法:

//设置障碍车辆1
setInterval(function () {
    if (oppsiteCar1.offsetTop != 560) {
        move(oppsiteCar1, "top", 560, speed);
    } else {
        // 障碍车辆1必须与障碍车辆2保持能让赛车通过的间距
        oppsiteCar1.style.top = parseInt(oppsiteCar2.style.top) - parseInt(Math.random() * 300 + 300) + "px";
    }
}, 30);

思路就是:车辆1(图片上方左一)开始游戏的时候是在车辆2的前面先通过游戏整体的下边框,所以就让车辆1重置时候的位置通过算法保证车辆1和2之间的间距能有一个车的距离就行.

好了,以上就是游戏整体思路的介绍.

整体代码如下:

    
    
    
    
    
    



    

        

            

                

            
            

                

            
            

                

            
            

                

            
            

                

            
            

                

            
            

                

            
        
        

            

                

            
            

                

            
            

                

            
            

                

            
            

                

            
            

                

            
            

                

            
        
        

            

                

            
            

                

            
            

                

            
            

                

            
            

                

            
            

                

            
            

                

            
        
        

            

                

            
            

                

            
            

                

            
            

                

            
            

                

            
            

                

            
            

                

            
        
    
    
Score : 0