HTML5版本的极品飞车小游戏

The Rush Html5 Game 左右键来操控方向，space键来加油。很棒的一个HTML5交互式手游。

html5, canvas, car, game

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1654
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

//CARS
var car = document.getElementById('car');
car.init = function() {
    car.speed = 0.2;
    car.turn = 0;
    car.x = car.offsetLeft;
    car.y = 0;
    car.width = car.offsetWidth;
    car.height = car.offsetHeight;
    car.maxSpeed = 5;
    car.km = 0;
    car.an = 1;
    car.crashed = false;
};
car.frame = function() {
    car.an *= -1;
    car.style.left = parseInt(car.x) + 'px';
    car.style.transform = 'scaleX(' + car.an + ')';
    car.steer();
};
car.steer = function() {
    car.x += car.sx;
    road.P0.x -= car.sx;
    road.P1.x -= car.sx;
    road.P2.x -= car.sx;
    road.x -= car.sx;
    cars.x -= car.sx;
};
car.crash = function(d) {
    if (!car.crashed) {
        car.crashed = true;
        car.speed = 0.2;
        car.sx = d ? d : 0;
        setTimeout(function() {
            car.crashed = false;
            car.sx = 0;
        }, 800);
    }
}
var cars = document.getElementById('cars');
cars.init = function() {
    cars.n = 32;
    cars.x = 0;
    cars.speed = 1;
    cars.interval = 500;
    cars.oponents = [];
    for (var i = 0; i < 3; i++) {
        for (var j = 0; j < cars.n; j++) {
            cars.oponents.push(cars.create(i, j));
        }
    }
    car.st = document.createElement('style');
    car.st.innerHTML = '#cars .car {transform: scaleX(1) rotateX(-57deg) }';
    document.body.appendChild(car.st);
};
cars.frame = function() {
    var relative = cars.speed - car.speed;
    for (var i = 0; i < cars.oponents.length; i++) {
        var c = cars.oponents[i];
        var d = road.width * 0.42,
            w = road.width - d - car.width;
        c.x = (road.P0.x - road.height - 40) * (c.y * c.y * 0.000006) + (d / 2) + (c.row * (w / 2));
        c.y += relative;
        var h = cars.n * car.height * 3;
        if (!c.classList.contains('hidden') && c.y < car.height + 5) { //collision
            if (car.x < 130 && c.row == 0) car.crash(0.1);
            if (car.x > 115 && car.x < 162 && c.row == 1) car.crash();
            if (car.x > 148 && c.row == 2) car.crash(-0.1);
        }
        if (c.y > h) { // back to bottom
            cars.color(c);
            c.classList.remove('hidden');
            1
            if (car.x < 115 && c.row == 0) c.classList.add('hidden');
            if (car.x > 120 && car.x < 156 && c.row == 1) c.classList.add('hidden');
            if (car.x > 160 && c.row == 2) c.classList.add('hidden');
            if (Math.random() > 0.2) c.classList.add('hidden');
            else car.position++;
            c.y = 0;
        } else if (c.y < 0) { //passing
            if (!c.classList.contains('hidden')) {
                car.position--;
            }
            cars.color(c);
            c.classList.remove('hidden');
            if (Math.random() > 0.1) c.classList.add('hidden');
            c.y = h;
            cars.color(c);
        }
        c.style.left = parseInt(c.x) + 'px';
        c.style.bottom = parseInt(c.y) + 'px';
        c.style.opacity = 1 / (c.y * fog.value);
    }
    car.st.innerHTML = '#cars .car {transform: scaleX(' + car.an + ') rotateX(-57deg) }';
    cars.style.left = parseInt(cars.x) + 'px';
};
cars.create = function(i, j) {
    var c = document.createElement('div');
    c.className = 'car';
    c.row = i;
    cars.color(c);
    cars.pole(c, j);
    cars.appendChild(c);
    if (Math.random() > 0.1) c.classList.add('hidden');
    if (i == 1 && j == 0 || i == 1 && j == 1) c.classList.add('hidden');
    return c;
};
cars.color = function(c) {
    c.style['background-color'] = '#' + (0.6 + Math.random() * 0.4).toString(16).substring(2, 8);
};
cars.pole = function(c, j) {
    var d = road.width * 0.42,
        w = road.width - d - car.width;
    c.x = (d / 2) + (c.row * (w / 2));
    c.y = -car.height + (j * car.height * 3);
};
//ROAD
var road = document.getElementById('road');
road.init = function() {
    road.ctx = road.getContext('2d');
    road.width = road.offsetWidth;
    road.height = road.offsetHeight;
    road.state = 0;
    road.x = 0;
    road.offset = 50;
    road.lineWidth = 3;
    road.lineColor = 'rgba(255,255,255,0.7)';
    road.lineDashOffset = 0;
    road.P0 = {
        x: parseInt(road.width / 2),
        y: 0,
        xs: 0
    };
    road.P1 = {
        x: road.offset,
        y: road.height
    };
    road.P2 = {
        x: road.width - road.offset,
        y: road.height
    };
    road.Pc = {
        x1: road.P1.x + 110,
        x2: road.P2.x - 110
    };
    road.frame();
};
road.frame = function() {
    road.P0.x += road.P0.xs;
    road.Pc.x1 -= road.P0.xs * 0.4;
    road.Pc.x2 -= road.P0.xs * 0.4;
    road.lineDashOffset -= car.speed;

road.ctx.clearRect(0, 0, road.width, road.height);
    road.ctx.beginPath();

road.ctx.moveTo(road.P1.x, road.P1.y);
    road.ctx.bezierCurveTo(road.Pc.x1, road.P1.y - road.height,
        road.P0.x - 5, road.P0.y - 2,
        road.P0.x, road.P0.y);

road.ctx.moveTo(road.P2.x, road.P2.y);
    road.ctx.bezierCurveTo(road.Pc.x2, road.P2.y - road.height,
        road.P0.x + 5, road.P0.y - 2,
        road.P0.x, road.P0.y);

road.ctx.strokeStyle = road.lineColor;
    road.ctx.lineWidth = road.lineWidth;
    road.ctx.setLineDash([road.lineWidth, road.lineWidth]);
    road.ctx.lineDashOffset = road.lineDashOffset * -0.5;
    road.ctx.stroke();
};
road.curve = function(side) {
    if (side == 'left' || side == 'right') {
        road.randomCurve();
        if (!(road.state == -1 && side == 'left') &&
            !(road.state == 1 && side == 'right')) {

if (road.state == 1 && side == 'left') road.state = 0;
            else if (road.state == -1 && side == 'right') road.state = 0;
            else if (road.state == 0 && side == 'left') road.state = -1;
            else if (road.state == 0 && side == 'right') road.state = 1;
            road.P0.xs = 2 * ((side == 'left') ? -1 : 1);
            return setTimeout(function() {
                road.P0.xs = 0;
            }, 900);
        }
    }
};
road.randomCurve = function() {
    setTimeout(function() {
        road.curve(Math.random() > 0.5 ? 'left' : 'right');
    }, 1400);
};
//MOUNTAINS
var mountains = document.getElementById('mountains');
mountains.frame = function() {
    var curve = (road.P0.x - road.width / 2) / 40;
    var left = mountains.offsetLeft;
    if (left < -4.5 * road.width) left = 1.5 * road.width;
    if (left > 1.5 * road.width) left = -4.5 * road.width;
    var d = curve + ((car.speed) * curve * 0.5);
    mountains.style.left = parseInt(left - d) + 'px';
};
//FOG
var fog = document.getElementById('fog');
fog.init = function() {
    fog.value = 0.004;
    fog.status = false;
};
fog.toggle = function() {
    fog.classList.toggle('hidden');
    fog.status = !fog.status;
    fog.value = fog.status ? 0.1 : 0.004;
    setTimeout(fog.toggle, 30000);
};
//UI
var km = document.getElementById('km');
km.frame = function() {
    car.km += (car.speed / 1000);
    var value = parseInt(car.km * 10).toString();
    while (value.length < 6) value = '0' + value;
    if (value[0] == '0') value[0] = '';
    for (var i = 0; i < km.childNodes.length; i++) {
        var a = km.childNodes[i];
        a.innerText = value[i];
    }
};
var position = document.getElementById('position');
position.init = function() {
    cars.total = 200;
    car.position = cars.total;
}
position.frame = function() {
        var value = parseInt(car.position).toString();
        for (var i = 0; i < position.childNodes.length - 1; i++) {
            var a = position.childNodes[i + 1];
            a.innerText = value[i];
        }
    }
    //LAP 
var lap = document.getElementById('lap');
lap.init = function() {
    lap.value = 1;
}
lap.frame = function() {
        if (car.position <= 0) {
            lap.value++;
            car.position = 200;
        }
        if (lap.value > 9) alert("GAME OVER\n YOU WIN!!!");
        lap.innerText = lap.value;
    }
    //FRAME
var frame = function() {
    if (!frame.stop) {
        key.frame();
        car.frame();
        cars.frame();
        mountains.frame();
        road.frame();
        km.frame();
        position.frame();
    }
    requestAnimationFrame(frame);
};
//KEYBOARD
var key = {
    pressed: [],
    frame: function() {
        if (!car.crashed) {
            car.sx = 0;
            if (car.x > road.width * 0.3) {
                if (key.pressed[37] || // Key: Left arrow
                    key.pressed[65]) { // Key: 'A'
                    car.sx = -1;
                }
            } else car.crash(0.2);
            if (car.x < (road.width * 0.7) - car.width) {
                if (key.pressed[39] || // Key: Right arrow
                    key.pressed[68]) { // Key: 'D'
                    car.sx = 1;
                }
            } else car.crash(-0.2);
            if (key.pressed[32] || // Key: Space
                key.pressed[38] || // Key: Up arrow
                key.pressed[87]) { // Key: 'W'
                if (car.speed < car.maxSpeed)
                    car.speed += 0.05;
            } else {
                if (car.speed > 0) car.speed -= 0.03;
            }
        }
    }
};
window.addEventListener('keydown', function(event) {
    key.pressed[event.keyCode] = true;
});
window.addEventListener('keyup', function(event) {
    key.pressed[event.keyCode] = false;
});
//GAME
var game = document.getElementById('game');
game.init = function() {
    car.init();
    road.init();
    position.init();
    lap.init();
    fog.init();
};
//MOUSE
game.click = function() {
    if (!game.started) {
        game.started = true;
        cars.init();
        setTimeout(road.randomCurve, 5000);
        setTimeout(fog.toggle, 30000);
        frame();
    }
};
game.addEventListener('click', game.click);
document.getElementById('click').addEventListener('click', game.click);
//INIT
game.init();

编译

CSS

body {
    overflow: hidden;
    background: #111;
}
h1 {
    color: white;
    font-family: "Lato", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
    text-align: center;
    cursor: pointer;
}
p {
    color: white;
    text-align: center;
}
#game {
    width: 320px;
    height: 240px;
    position: relative;
    margin: 50px auto;
    perspective: 100px;
    overflow: hidden;
    transform: scale(1.3);
    cursor: pointer;
}
#game > * {
    position: absolute;
    width: 100%;
}
#sky {
    height: 65px;
    background: #228;
}
#mountains {
    width: 960px;
    height: 0;
    top: 65px;
    left: -320px;
}
.mountain {
    float: left;
    width: 5px;
    position: relative;
    top: -16px;
    border: 40px solid transparent;
    border-bottom: 10px solid #882;
    border-top: 0;
    margin-right: 280px;
}
.mountain:after {
    content: "";
    float: left;
    width: 5px;
    position: relative;
    top: 10px;
    border: 25px solid transparent;
    border-bottom: 6px solid #882;
    border-top: 0;
}
.mountain:nth-child(2) {
    transform: scaleX(-1);
    margin-right: 80px;
}
.mountain:nth-child(3) {
    margin-right: 240px;
}
.mountain:nth-child(3):after {
    left: 20px;
}
.mountain:last-child {
    margin-right: 0;
}
#terrain {
    top: 65px;
    height: 120px;
    background: #040;
}
#fog {
    width: 200%;
    height: 80px;
    top: 0;
    left: -50%;
    background: rgba(200, 200, 200, 0.6);
    box-shadow: 0 45px 45px rgba(200, 200, 200, 0.6);
}
#road {
    width: 320px;
    height: 120px;
    top: 65px;
}
#cars {
    width: 320px;
    height: 6000px;
    bottom: 55px;
    transform-origin: 50% 100%;
    transform: rotateX(57deg);
    transform-style: preserve-3d;
}
/* #cars .car {
  transform: rotateX(-57deg);
} */

.car {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 45px;
    height: 15px;
    background-color: #eee;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAALCAYAAABCm8wlAAAAKklEQVR42mNgcGL4zwACMBqZDaaRJdABcQpgDJKtQBHHq2gwmYDuTSgfAGaGIx0p42fzAAAAAElFTkSuQmCC');
    background-size: 100% 100%;
}
.car:after {
    width: 5px;
    height: 3px;
    content: "";
    display: block;
}
#car.player {
    width: 45px;
    left: calc(50% - 20px);
    bottom: 55px;
}
#ui {
    top: 185px;
    padding: 5px;
    background: #000;
}
#panel {
    width: 120px;
    height: 35px;
    margin: 0 auto;
    background: #922;
    padding: 5px 20px;
    font-family: monospace;
    font-size: 13px;
    font-weight: bold;
}
#panel div {
    float: left;
    background: #c95;
    height: 15px;
    color: #000;
    overflow: hidden;
}
#panel a {
    position: relative;
    padding: 0 2.5px;
    float: left;
    width: 10px;
    height: 15px;
    text-align: center;
    transform: scaleX(1.4);
    transform-origin: 0 0;
    margin-right: 5px;
}
#km {
    width: 120px;
    margin-bottom: 5px;
}
#km a:last-child {
    background: #000;
    color: #c95;
}
#lap {
    width: 20px;
    margin-right: 20px;
}
#position {
    width: 80px;
}
#position a:first-child {
    float: left;
}
.hidden {
    display: none;
}

HTML

The Rush Html5 Game 左右键来操控方向，space键来加油。很棒的一个HTML5交互式手游。

html5, canvas, car, game

编辑器支持Emmet

快捷键

The Rush Html5 Game 左右键来操控方向，space键来加油。很棒的一个HTML5交互式手游。

html5, canvas, car, game

HTML5版本的扫雷小游戏

很棒的HTML5版本僵尸猎手游戏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：