赛车小游戏

欢迎来到程序小院

赛车小游戏

玩法：键盘方向键上键 ↑(加速) 左键 ← 右键 → 下键 ↓（减速）,车轮压过两边白线即为游戏结束，车子停止游戏结束，不要让车子停下来哦^^

开始游戏

html

<canvas height="450" width="750"></canvas>

css

 canvas {        border-radius: .4em;        margin: 30px auto;        position: relative;        left: 50%;        transform: translateX(-50%);    }    .game-side{        position: absolute;        width:100px;        height: 30px;        margin-top:435px;        font-size:14px;        left: 50%;        transform: translateX(-50%);        color:#fff;        z-index: 9999;        margin-left:280px;    }

js

  game.canvas = document.getElementsByTagName('canvas')<0>;  game.ctx = game.canvas.getContext('2d');  game.canvas2 = document.createElement('canvas');  game.canvas2.width = game.canvas.width;  game.canvas2.height = game.canvas.height;  game.ctx2 = game.canvas2.getContext('2d');  window.addEventListener("keydown", keyDown, false);  window.addEventListener("keyup", keyUp, false);  function draw() {    setTimeout(function() {        var ss = calcMovement();        if(ss == false){            return false        }        if(game.state.speed > 0) {            game.state.bgpos += (game.state.currentCurve * 0.02) * (game.state.speed * 0.2);            game.state.bgpos = game.state.bgpos % game.canvas.width;            game.ctx.putImageData(game.storage.bg, game.state.bgpos, 5);            game.ctx.putImageData(game.storage.bg, game.state.bgpos > 0             ? game.state.bgpos - game.canvas.width : game.state.bgpos + game.canvas.width, 5);        }        game.state.offset += game.state.speed * 0.05;        if(game.state.offset > game.settings.ground.min) {            game.state.offset = game.settings.ground.min - game.state.offset;            game.state.startDark = !game.state.startDark;        }        drawGround(game.ctx, game.state.offset, game.colors.ground,        game.colors.groundDark, game.canvas.width);        drawRoad(game.settings.road.min + 6, game.settings.road.max + 36, 10, game.colors.roadLine);        drawGround(game.ctx2, game.state.offset, game.colors.roadLine, game.colors.road, game.canvas.width);        drawRoad(game.settings.road.min, game.settings.road.max, 10, game.colors.road);        drawRoad(3, 24, 0, game.ctx.createPattern(game.canvas2, 'repeat'));        drawCar();        drawHUD(game.ctx, 630, 340, game.colors.hud);        requestAnimationFrame(draw);    }, 1000 / game.settings.fps);}function drawHUD(ctx, centerX, centerY, color) {    var radius = 50, tigs = <0, 90, 135, 180, 225, 270, 315>,        angle = 90;    ctx.beginPath();    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);    ctx.lineWidth = 7;    ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';    ctx.fill();    ctx.strokeStyle = color;    ctx.stroke();    for (var i = 0; i < tigs.length; i++) {        drawTig(ctx, centerX, centerY, radius, tigs, 7);    }    // draw pointer    angle = map(game.state.speed, 0, game.state.car.maxSpeed, 90, 360);    drawPointer(ctx, color, 50, centerX, centerY, angle);}function drawPointer(ctx, color, radius, centerX, centerY, angle) {    var point = getCirclePoint(centerX, centerY, radius - 20, angle),        point2 = getCirclePoint(centerX, centerY, 2, angle + 90),        point3 = getCirclePoint(centerX, centerY, 2, angle - 90);    ctx.beginPath();    ctx.strokeStyle = "#FF9166";    ctx.lineCap = 'round';    ctx.lineWidth = 4;    ctx.moveTo(point2.x, point2.y);    ctx.lineTo(point.x, point.y);    ctx.lineTo(point3.x, point3.y);    ctx.stroke();    ctx.beginPath();    ctx.arc(centerX, centerY, 9, 0, 2 * Math.PI, false);    ctx.fillStyle = color;    ctx.fill();}function drawTig(ctx, x, y, radius, angle, size) {    var startPoint = getCirclePoint(x, y, radius - 4, angle),        endPoint = getCirclePoint(x, y, radius - size, angle)    ctx.beginPath();    ctx.lineCap = 'round';    ctx.moveTo(startPoint.x, startPoint.y);    ctx.lineTo(endPoint.x, endPoint.y);    ctx.stroke();}function getCirclePoint(x, y, radius, angle) {    var radian = (angle / 180) * Math.PI;    return {        x: x + radius * Math.cos(radian),        y: y + radius * Math.sin(radian)    }}function drawCar() {  var carWidth = 160,      carHeight = 50,      carX = (game.canvas.width / 2) - (carWidth / 2),      carY = 320;  // shadow  roundedRect(game.ctx, "rgba(0, 0, 0, 0.35)", carX - 1 + game.state.turn, carY + (carHeight - 35), carWidth + 10, carHeight, 9);  // tires  roundedRect(game.ctx, "#111", carX, carY + (carHeight - 30), 30, 40, 6);  roundedRect(game.ctx, "#111", (carX - 22) + carWidth, carY + (carHeight - 30), 30, 40, 6);  drawCarBody(game.ctx);}function drawCarBody(ctx) {  var startX = 299, startY = 311,      lights = <10, 26, 134, 152>,      lightsY = 0;  /* Front */  roundedRect(game.ctx, "#C2C2C2", startX + 6 + (game.state.turn * 1.1), startY - 18, 146, 40, 18);  ctx.beginPath();  ctx.lineWidth="12";  ctx.fillStyle="#FFFFFF";  ctx.strokeStyle="#FFFFFF";  ctx.moveTo(startX + 30, startY);  ctx.lineTo(startX + 46 + game.state.turn, startY - 25);  ctx.lineTo(startX + 114 + game.state.turn, startY - 25);  ctx.lineTo(startX + 130, startY);  ctx.fill();  ctx.stroke();  /* END: Front */  ctx.lineWidth="12";  ctx.lineCap = 'round';  ctx.beginPath();  ctx.fillStyle="#DEE0E2";  ctx.strokeStyle="#DEE0E2";  ctx.moveTo(startX + 2, startY + 12 + (game.state.turn * 0.2));  ctx.lineTo(startX + 159, startY + 12 + (game.state.turn * 0.2));  ctx.quadraticCurveTo(startX + 166, startY + 35, startX + 159, startY + 55 + (game.state.turn * 0.2));  ctx.lineTo(startX + 2, startY + 55 - (game.state.turn * 0.2));  ctx.quadraticCurveTo(startX - 5, startY + 32, startX + 2, startY + 12 - (game.state.turn * 0.2));  ctx.fill();  ctx.stroke();  ctx.beginPath();  ctx.lineWidth="12";  ctx.fillStyle="#DEE0E2";  ctx.strokeStyle="#DEE0E2";  ctx.moveTo(startX + 30, startY);  ctx.lineTo(startX + 40 + (game.state.turn * 0.7), startY - 15);  ctx.lineTo(startX + 120 + (game.state.turn * 0.7), startY - 15);  ctx.lineTo(startX + 130, startY);  ctx.fill();  ctx.stroke();  roundedRect(ctx, "#474747", startX - 4, startY, 169, 10, 3, true, 0.2);  roundedRect(ctx, "#474747", startX + 40, startY + 5, 80, 10, 5, true, 0.1);  ctx.fillStyle = "#FF9166";  lights.forEach(function(xPos) {      ctx.beginPath();      ctx.arc(startX + xPos, startY + 20 + lightsY, 6, 0, Math.PI*2, true);      ctx.closePath();      ctx.fill();      lightsY += game.state.turn * 0.05;  });  ctx.lineWidth="9";  ctx.fillStyle="#222222";  ctx.strokeStyle="#444";  roundedRect(game.ctx, "#FFF", startX + 60, startY + 25, 40, 18, 3, true, 0.05);}function roundedRect(ctx, color, x, y, width, height, radius, turn, turneffect) {  var skew = turn === true ? game.state.turn * turneffect : 0;  ctx.fillStyle = color;  ctx.beginPath();  ctx.moveTo(x + radius, y - skew);  // top right  ctx.lineTo(x + width - radius, y + skew);  ctx.arcTo(x + width, y + skew, x + width, y + radius + skew, radius);  ctx.lineTo(x + width, y + radius + skew);  // down right  ctx.lineTo(x + width, (y + height + skew) - radius);  ctx.arcTo(x + width, y + height + skew, (x + width) - radius, y + height + skew, radius);  ctx.lineTo((x + width) - radius, y + height + skew);  // down left  ctx.lineTo(x + radius, y + height - skew);  ctx.arcTo(x, y + height - skew, x, (y + height - skew) - radius, radius);  ctx.lineTo(x, (y + height - skew) - radius);  // top left  ctx.lineTo(x, y + radius - skew);  ctx.arcTo(x, y - skew, x + radius, y - skew, radius);  ctx.lineTo(x + radius, y - skew);  ctx.fill();}

源码