【基于Html+CSS+JS的canvas赛车小游戏（效果+源码）】

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[i], 7);

}

// draw pointer

angle = map($.state.speed, 0, $.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 calcMovement() {

var move = $.state.speed * 0.01,

newCurve = 0;

if($.state.keypress.up) {

$.state.speed += $.state.car.acc-($.state.speed * 0.015);

} else if ($.state.speed > 0) {

$.state.speed -= $.state.car.friction;

}

if($.state.keypress.down && $.state.speed > 0) {

$.state.speed -= 1;

}

// Left and right

$.state.xpos-=($.state.currentCurve * $.state.speed) * 0.005;

if($.state.speed) {

if($.state.keypress.left) {

$.state.xpos+=(Math.abs($.state.turn) + 7 + ($.state.speed > $.st$