简单的网页游戏之赛车

于 2023-08-09 20:54:06 发布
阅读量490 收藏 1
点赞数 1
分类专栏： 前端游戏 文章标签： 游戏 javascript 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Annzz123/article/details/132197130
版权

 一、HTML部分

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>Canvas 赛车游戏</title>
		<meta name="keywords" content="赛车">
		<meta name="description" content="赛车">
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<canvas height="450" width="750"></canvas>
		<script type="text/javascript" src="js/main.js"></script>
	</body>
</html>

二、css样式

body {
  background-color: #F8F3A9;
  margin: 0;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 100vh;
}

canvas {
  border-radius: .4em;
  margin:20px auto;
}

三、JavaScript部分

var $ = {
	canvas: null,
	ctx: null,
	canvas2: null,
	ctx2: null,
	colors: {
		sky: "#D4F5FE",
		mountains: "#83CACE",
		ground: "#8FC04C",
		groundDark: "#73B043",
		road: "#606a7c",
		roadLine: "#FFF",
		hud: "#FFF"
	},
	settings: {
		fps: 60,
		skySize: 120,
		ground: {
			size: 350,
			min: 4,
			max: 120
		},
		road: {
			min: 76,
			max: 700,
		}
	},
	state: {
		bgpos: 0,
		offset: 0,
		startDark: true,
		curve: 0,
		currentCurve: 0,
		turn: 1,
		speed: 27,
		xpos: 0,
		section: 50,
		car: {
			maxSpeed: 50,
			friction: 0.4,
			acc: 0.85,
			deAcc: 0.5
		},
		keypress: {
			up: false,
			left: false,
			right: false,
			down: false
		}
	},
	storage: {
		bg: null
	}
};
$.canvas = document.getElementsByTagName('canvas')[0];
$.ctx = $.canvas.getContext('2d');
$.canvas2 = document.createElement('canvas');
$.canvas2.width = $.canvas.width;
$.canvas2.height = $.canvas.height;
$.ctx2 = $.canvas2.getContext('2d');
window.addEventListener("keydown", keyDown, false);
window.addEventListener("keyup", keyUp, false);

drawBg();
draw();

function draw() {
	setTimeout(function() {
		calcMovement();

		//if($.state.speed > 0) {
		$.state.bgpos += ($.state.currentCurve * 0.02) * ($.state.speed * 0.2);
		$.state.bgpos = $.state.bgpos % $.canvas.width;

		$.ctx.putImageData($.storage.bg, $.state.bgpos, 5);
		$.ctx.putImageData($.storage.bg, $.state.bgpos > 0 ? $.state.bgpos - $.canvas.width : $.state.bgpos + $.canvas.width,
			5);
		//}

		$.state.offset += $.state.speed * 0.05;
		if ($.state.offset > $.settings.ground.min) {
			$.state.offset = $.settings.ground.min - $.state.offset;
			$.state.startDark = !$.state.startDark;
		}
		drawGround($.ctx, $.state.offset, $.colors.ground, $.colors.groundDark, $.canvas.width);

		drawRoad($.settings.road.min + 6, $.settings.road.max + 36, 10, $.colors.roadLine);
		drawGround($.ctx2, $.state.offset, $.colors.roadLine, $.colors.road, $.canvas.width);
		drawRoad($.settings.road.min, $.settings.road.max, 10, $.colors.road);
		drawRoad(3, 24, 0, $.ctx.createPattern($.canvas2, 'repeat'));
		drawCar();
		drawHUD($.ctx, 630, 340, $.colors.hud);

		requestAnimationFrame(draw);
	}, 1000 / $.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($.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 > $.state.car.maxSpeed / 4 ? ($.state.car.maxSpeed - ($
				.state.speed / 2)) : $.state.speed)) * 0.2;
			$.state.turn -= 1;
		}

		if ($.state.keypress.right) {
			$.state.xpos -= (Math.abs($.state.turn) + 7 + ($.state.speed > $.state.car.maxSpeed / 4 ? ($.state.car.maxSpeed - ($
				.state.speed / 2)) : $.state.speed)) * 0.2;
			$.state.turn += 1;
		}

		if ($.state.turn !== 0 && !$.state.keypress.left && !$.state.keypress.right) {
			$.state.turn += $.state.turn > 0 ? -0.25 : 0.25;
		}
	}

	$.state.turn = clamp($.state.turn, -5, 5);
	$.state.speed = clamp($.state.speed, 0, $.state.car.maxSpeed);

	// section
	$.state.section -= $.state.speed;

	if ($.state.section < 0) {
		$.state.section = randomRange(1000, 9000);

		newCurve = randomRange(-50, 50);

		if (Math.abs($.state.curve - newCurve) < 20) {
			newCurve = randomRange(-50, 50);
		}

		$.state.curve = newCurve;
	}

	if ($.state.currentCurve < $.state.curve && move < Math.abs($.state.currentCurve - $.state.curve)) {
		$.state.currentCurve += move;
	} else if ($.state.currentCurve > $.state.curve && move < Math.abs($.state.currentCurve - $.state.curve)) {
		$.state.currentCurve -= move;
	}

	if (Math.abs($.state.xpos) > 550) {
		$.state.speed *= 0.96;
	}

	$.state.xpos = clamp($.state.xpos, -650, 650);
}

function keyUp(e) {
	move(e, false);
}

function keyDown(e) {
	move(e, true);
}

function move(e, isKeyDown) {
	if (e.keyCode >= 37 && e.keyCode <= 40) {
		e.preventDefault();
	}

	if (e.keyCode === 37) {
		$.state.keypress.left = isKeyDown;
	}

	if (e.keyCode === 38) {
		$.state.keypress.up = isKeyDown;
	}

	if (e.keyCode === 39) {
		$.state.keypress.right = isKeyDown;
	}

	if (e.keyCode === 40) {
		$.state.keypress.down = isKeyDown;
	}
}

function randomRange(min, max) {
	return min + Math.random() * (max - min);
}

function norm(value, min, max) {
	return (value - min) / (max - min);
}

function lerp(norm, min, max) {
	return (max - min) * norm + min;
}

function map(value, sourceMin, sourceMax, destMin, destMax) {
	return lerp(norm(value, sourceMin, sourceMax), destMin, destMax);
}

function clamp(value, min, max) {
	return Math.min(Math.max(value, min), max);
}

function drawBg() {
	$.ctx.fillStyle = $.colors.sky;
	$.ctx.fillRect(0, 0, $.canvas.width, $.settings.skySize);
	drawMountain(0, 60, 200);
	drawMountain(280, 40, 200);
	drawMountain(400, 80, 200);
	drawMountain(550, 60, 200);

	$.storage.bg = $.ctx.getImageData(0, 0, $.canvas.width, $.canvas.height);
}

function drawMountain(pos, height, width) {
	$.ctx.fillStyle = $.colors.mountains;
	$.ctx.strokeStyle = $.colors.mountains;
	$.ctx.lineJoin = "round";
	$.ctx.lineWidth = 20;
	$.ctx.beginPath();
	$.ctx.moveTo(pos, $.settings.skySize);
	$.ctx.lineTo(pos + (width / 2), $.settings.skySize - height);
	$.ctx.lineTo(pos + width, $.settings.skySize);
	$.ctx.closePath();
	$.ctx.stroke();
	$.ctx.fill();
}

function drawSky() {
	$.ctx.fillStyle = $.colors.sky;
	$.ctx.fillRect(0, 0, $.canvas.width, $.settings.skySize);
}

function drawRoad(min, max, squishFactor, color) {
	var basePos = $.canvas.width + $.state.xpos;

	$.ctx.fillStyle = color;
	$.ctx.beginPath();
	$.ctx.moveTo(((basePos + min) / 2) - ($.state.currentCurve * 3), $.settings.skySize);
	$.ctx.quadraticCurveTo((((basePos / 2) + min)) + ($.state.currentCurve / 3) + squishFactor, $.settings.skySize + 52, (
		basePos + max) / 2, $.canvas.height);
	$.ctx.lineTo((basePos - max) / 2, $.canvas.height);
	$.ctx.quadraticCurveTo((((basePos / 2) - min)) + ($.state.currentCurve / 3) - squishFactor, $.settings.skySize + 52, (
		(basePos - min) / 2) - ($.state.currentCurve * 3), $.settings.skySize);
	$.ctx.closePath();
	$.ctx.fill();
}

function drawCar() {
	var carWidth = 160,
		carHeight = 50,
		carX = ($.canvas.width / 2) - (carWidth / 2),
		carY = 320;

	// shadow
	roundedRect($.ctx, "rgba(0, 0, 0, 0.35)", carX - 1 + $.state.turn, carY + (carHeight - 35), carWidth + 10, carHeight,
		9);

	// tires
	roundedRect($.ctx, "#111", carX, carY + (carHeight - 30), 30, 40, 6);
	roundedRect($.ctx, "#111", (carX - 22) + carWidth, carY + (carHeight - 30), 30, 40, 6);

	drawCarBody($.ctx);
}

function drawCarBody(ctx) {
	var startX = 299,
		startY = 311,
		lights = [10, 26, 134, 152],
		lightsY = 0;

	/* Front */
	roundedRect($.ctx, "#C2C2C2", startX + 6 + ($.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 + $.state.turn, startY - 25);
	ctx.lineTo(startX + 114 + $.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 + ($.state.turn * 0.2));
	ctx.lineTo(startX + 159, startY + 12 + ($.state.turn * 0.2));
	ctx.quadraticCurveTo(startX + 166, startY + 35, startX + 159, startY + 55 + ($.state.turn * 0.2));
	ctx.lineTo(startX + 2, startY + 55 - ($.state.turn * 0.2));
	ctx.quadraticCurveTo(startX - 5, startY + 32, startX + 2, startY + 12 - ($.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 + ($.state.turn * 0.7), startY - 15);
	ctx.lineTo(startX + 120 + ($.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 += $.state.turn * 0.05;
	});

	ctx.lineWidth = "9";
	ctx.fillStyle = "#222222";
	ctx.strokeStyle = "#444";

	roundedRect($.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 ? $.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();
}

function drawGround(ctx, offset, lightColor, darkColor, width) {
	var pos = ($.settings.skySize - $.settings.ground.min) + offset,
		stepSize = 1,
		drawDark = $.state.startDark,
		firstRow = true;
	ctx.fillStyle = lightColor;
	ctx.fillRect(0, $.settings.skySize, width, $.settings.ground.size);

	ctx.fillStyle = darkColor;
	while (pos <= $.canvas.height) {
		stepSize = norm(pos, $.settings.skySize, $.canvas.height) * $.settings.ground.max;
		if (stepSize < $.settings.ground.min) {
			stepSize = $.settings.ground.min;
		}

		if (drawDark) {
			if (firstRow) {
				ctx.fillRect(0, $.settings.skySize, width, stepSize - (offset > $.settings.ground.min ? $.settings.ground.min : $.settings
					.ground.min - offset));
			} else {
				ctx.fillRect(0, pos < $.settings.skySize ? $.settings.skySize : pos, width, stepSize);
			}
		}

		firstRow = false;
		pos += stepSize;
		drawDark = !drawDark;
	}
}

四、项目截图

 

HTML5 Canvas 赛车游戏
01-24
HTML5 Canvas 赛车游戏动画DEMO演示 网上找的资源，修改成手机端的了
用H5做的一个简单的赛车小游戏
03-04
标题 "用H5做的一个简单的赛车小游戏" 暗示了这个项目是一个使用HTML5（H5）技术开发的互动游戏，特别是一个赛车主题的小游戏。HTML5是现代网页开发的标准，它允许开发者创建富媒体内容，包括动画、音频、视频和复杂...
利用JS实现的网页赛车小游戏
衛國同學的博客
06-26 2100
​ 今天学完了JavaScript基础,打算做个网页小游戏练练手,想来想去,想起了小时候那种游戏机里的赛车游戏,于是做了一个玩玩,效果如下:
html实现经典赛车小游戏
CSDN博客专家，系统架构师，有合作、疑惑请私信博主。
05-09 3129
html实现经典赛车小游戏源码，1.通过键盘的 上左右 键，控制汽车行走。2.通过canvas进行公路图形绘制。
html5赛车小游戏,HTML5 一路狂奔 - 赛车小游戏
weixin_33514475的博客
05-31 441
CSS语言：CSSSCSS确定@import url(http://fonts.googleapis.com/css?family=Covered+By+Your+Grace);.restart {position: absolute;margin-top: 20px;font-family: 'Covered By Your Grace', cursive;font-size: 26px;cur...
《游戏学习》| 3d网页小游戏 | 公路赛车 源码
洛阳泰山的博客
01-11 3088
Three.js 是一款基于 JavaScript 的开源 3D 图形库，它简化了在 Web 浏览器中创建和展示 3D 图形的过程。下面将详细介绍 Three.js 的特点、使用方式以及其提供的主要功能。
3d网页小游戏 | 公路赛车 源码
01-06
【3D网页小游戏 | 公路赛车 源码】是一款基于HTML5技术开发的赛车游戏，它将玩家带入到一个高速公路上，通过驾驶赛车躲避其他车辆和卡车来获得分数。这款游戏不仅适用于个人电脑（PC），还支持移动设备，提供了一种...
H5游戏源码 赛车漂移源码.zip
10-15
《H5游戏源码：赛车漂移》 在IT行业中，H5游戏源码是开发者们探索、学习和创新的重要资源。"H5游戏源码 赛车漂移源码.zip"是一个专为游戏爱好者和编程者提供的压缩包，其中包含了制作一款赛车漂移游戏的全部代码和...
H5游戏源码 Canvas赛车游戏动画，赛车游戏.zip
最新发布
10-15
《H5游戏源码解析：Canvas赛车游戏动画与赛车游戏设计》 在现代网页开发中，HTML5（H5）已经成为了制作互动性、富媒体内容的重要工具，尤其是在游戏领域。"H5游戏源码 Canvas赛车游戏动画，赛车游戏.zip"这个资源...
Html5小游戏源代码H5小游戏源码JS开发网页小游戏开源源码大合集.zip
12-30
俄罗斯方块2.0，双人五子棋2.0，小人推箱子，经典扫雷，英雄宝石消消乐，赛车游戏，大家来找茬，经典扫雷，锅打灰太狼，3D飞机躲避障，兔子吃月饼，接金币，灌篮高手，疯狂打企鹅，吃月饼大赛，坦克大战，图像之谜...
HTML5《赛车》完整源码及创建教程　
12-29
HTML5《赛车》完整源码，里面有详细的创建说明教程，有兴趣的朋友可以参考下
h5 canvas赛车游戏
01-24
HTML5 Canvas 赛车游戏动画DEMO演示 键盘控制车的方向
HTML5 Canvas赛车游戏动画，赛车游戏动画演示。
09-06
HTML5 Canvas赛车游戏动画，赛车游戏动画演示。
HTML5 Canvas赛车游戏动画
09-15
HTML5 Canvas赛车游戏动画源码HTML5 Canvas赛车游戏动画源码
html5，canvas赛车游戏动画
08-23
Html5 canvas制作的赛车游戏动画，请注意是动画，没有交互等功能
html5赛车小游戏,H5赛车游戏大全_h5赛车小游戏大全_好玩的赛车h5游戏_爱手游网...
weixin_31238185的博客
05-31 835
街头赛车比赛，体验不一样的赛车刺激感。游戏中，玩家通过适时踩下油门来获取前进的动力。提前到达终点打败对手，即可获得丰富的金币奖励。通过这些金币玩家可以购置新车和升级赛车装备，听着是不是已经欲罢不能也想来赛车一把了呢？那就赶紧行动起来吧！想要找到赛车场上你追我赶的刺激感吗？想要和警车你追我赶吗？那就快来玩赛车追逐这款游戏吧，让你体验不一样的刺激和快感！变形车大赛开始啦！利用各种变形道具，改变车辆能力...
html5赛车小游戏,html5公路赛车小游戏
weixin_33800074的博客
05-31 305
天空依然蓝… 02020/6/12 15:19:58不知道为啥，有时可以加载，有时又加载不出来car.html:1Uncaught(inpromise)Objectmessage:(...)getmessage:?()arguments:(...)caller:(...)length:0name:""__proto__:?()apply:?appl...
html5+赛车动画,HTML5 SVG可交互拖拉的赛车动画
weixin_32787485的博客
06-07 202
JavaScript语言：JaveScriptBabelCoffeeScript确定var animData = {wrapper: document.querySelector('.bm_container'),animType: 'svg',loop: true,prerender: true,autoplay: true,path: '/uploads/1710/car_driving_se...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小孙同学1024

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值