赛车小游戏欢迎来到程序小院
玩法：
键盘方向键上键 ↑(加速) 左键 ← 右键 → 下键 ↓（减速）,车轮压过两边白线即为游戏结束，车子停止游戏结束，不要让车子停下来哦^^
开始游戏
<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[i], 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();
}
源码
需要源码请关注添加好友哦^ ^
转载：欢迎来到本站，转载请注明文章出处https://ormcc.com/
