赛车游戏——【极品飞车】（内含源码inscode在线运行）

以你之姓@ 2023-10-13 18:48 16阅读 0赞

# 前言 #

![在这里插入图片描述][0422b4369a3549b3a39da19588ab88f4.png]  
「作者主页」：[雪碧有白泡泡][Link 1]  
「个人网站」：[雪碧的个人网站][Link 2]  
「推荐专栏」：

> ★[java一站式服务][java] ★  
> ★[前端炫酷代码分享][Link 3]  
> ★ ★ [uniapp-从构建到提升][uniapp-]★  
> ★ [从0到英雄，vue成神之路][0_vue]★  
> ★ [解决算法，一个专栏就够了][Link 4]★  
> ★ [架构咱们从0说][0]★  
> ★ [数据流通的精妙之道][Link 5]★

![请添加图片描述][c7f3e6b8a7624a9eabbea77dbcbca119.jpeg]

### 文章目录 ###

*  前言
 *  认识一下inscode
 *  先看运行效果
 *   *   *  看查源码内容
         *  获取项目
 *  代码的简单分析
 *   *   *  主体index.html
     *  游戏逻辑和功能代码：app.js
     *   *  游戏开始前设置
         *  游戏界面的初始化操作
         *  元素与状态的初始化
 *  小结

# 认识一下inscode #

![在这里插入图片描述][ceb7297d53444c67ac900201cc3b721f.png]  
CSDN最新推出的Inscode服务是一个在线编程工具，旨在为开发者提供一个便捷的编写、运行和分享代码的环境，让开发者无需在本地搭建编程环境，即可快速编写和运行代码。

Inscode支持多种编程语言，包括Java、Python、C++等，同时也支持编写HTML、CSS和JavaScript代码。它提供了完整的运行环境，让代码在网页上直接运行并输出结果，即时调试，方便快捷。同时，Inscode还提供了分享功能，可以轻松地将代码分享给其他人。

使用Inscode，只需访问其网站[https://inscode.csdn.net/][https_inscode.csdn.net]  
个人主页：[why\_does\_it\_work][why_does_it_work]

# 先看运行效果 #

![在这里插入图片描述][22c242737a63478287cee5392fa2c005.png]  
这里可以直接**看查源码内容**，**刷新**，最后一个是**放大跳转网页**

### 看查源码内容 ###

![在这里插入图片描述][130583929a244907882cb7d52697afc4.png]

### 获取项目 ###

点击链接： [极品飞车][Link 6]  
![在这里插入图片描述][d5d52bc4138b441f9fa8feaf3d4281ac.png]

![在这里插入图片描述][0e8f8bdae09445b0af9cc61638841edb.png]

# 代码的简单分析 #

![在这里插入图片描述][c75f0a103e3b4f6e91b1a0b1d1246490.png]

### 主体index.html ###

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="HandheldFriendly" content="True">
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.01, minimal-ui" />
    <title>极品飞车</title>
    <meta name="keywords" content="HTML5,汽车赛道,飙车游戏" />
    <meta name="description" content="HTML5汽车赛道飙车游戏代码下载。H5精品短跑赛车俱乐部游戏，赛车游戏源代码。游戏介绍：鼠标,键盘左右键，控制赛车方向，让我们开始赛车比赛游戏吧。兼容手机移动端（横屏模式效果更好，左右晃动控制方向），带背景音效。" /> 
    <meta name="author" content="js代码" />
    <meta name="copyright" content="js代码" />
    <style>
    		body {
          
    			margin: 0px;
    			padding: 0px;
    			width: 100%;
    			background-color:black;
    		}	
    
    		canvas {
          	
    			-ms-touch-action: none;
    			image-rendering: -o-crisp-edges;           
    			image-rendering: optimize-contrast;        
    			-ms-interpolation-mode: nearest-neighbor;  
    			-webkit-tap-highlight-color: rgba(0,0,0,0);
    			-moz-tap-highlight-color: rgba(0,0,0,0);
    			tap-highlight-color: rgba(0,0,0,0);
    			user-select: none;
    			-webkit-touch-callout: none;
    			-webkit-user-select: none;
    			-moz-user-select: none;
    			-ms-user-select: none;
    		} 
    	</style>
    <script src="viewporter.js"></script>
    </head>
    <body>
    <div id="viewporter">
    <canvas id="canvas" moz-opaque></canvas>
    </div>
    </body>
    <script src="TweenMax.min.js"></script>
    <script src="howler.js"></script>
    <script src="app.js"></script>
    </html>

> 1.  `<!DOCTYPE html>`：这是HTML文档的文档类型声明，指定文档遵循的HTML版本。
> 2.  `<html lang="en">`：开始HTML标记，lang属性指定了页面使用的语言为英语。
> 3.  `<head>`：头部标签，用于包含关于文档的元数据和引用外部资源。
> 4.  `<meta charset="utf-8">`：设置字符编码为UTF-8，确保页面可以正确显示非英文字符。
> 5.  `<meta name="apple-mobile-web-app-capable" content="yes" />`：用于将网页添加到iOS设备的主屏幕，并使其在全屏模式下运行。
> 6.  `<meta name="HandheldFriendly" content="True">`：告诉浏览器此页面适合在手持设备上查看。
> 7.  `<meta name="apple-touch-fullscreen" content="yes" />`：指定页面在苹果设备上以全屏模式显示。
> 8.  `<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.01, minimal-ui" />`：设置视口的初始缩放级别和最大缩放级别，并启用iOS的Minimal UI模式。
> 9.  `<title>HTML5汽车赛道飙车游戏</title>`：设置页面的标题，将显示在浏览器的标题栏或选项卡上。
> 10. `<meta name="keywords" content="HTML5,汽车赛道,飙车游戏" />`：提供与页面相关的关键词，有助于搜索引擎理解页面内容。
> 11. `<meta name="description" content="HTML5汽车赛道飙车游戏代码下载。H5精品短跑赛车俱乐部游戏，赛车游戏源代码。游戏介绍：鼠标,键盘左右键，控制赛车方向，让我们开始赛车比赛游戏吧。兼容手机移动端（横屏模式效果更好，左右晃动控制方向），带背景音效。" />`：提供页面的描述，用于搜索引擎展示结果和页面摘要。
> 12. `<meta name="author" content="js代码 />`
> 13. `<meta name="copyright" content="js代码(www.jsdaima.com)" />`：声明页面的版权信息。
> 14. `<style>`：开始CSS样式块，用于定义页面的样式。
> 15. `body` 和 `canvas` 的样式：设置页面的背景颜色和画布样式。
> 16. `<script src="viewporter.js"></script>`：引入名为 “viewporter.js” 的外部JavaScript文件。
> 17. `<body>`：页面的主体部分。
> 18. `<div id="viewporter">`：一个带有 “viewporter” id 的div元素。
> 19. `<canvas id="canvas" moz-opaque></canvas>`：一个带有 “canvas” id 的canvas元素，用于绘制游戏界面。
> 20. `</body>`：页面主体部分的结束标签。
> 21. `<script src="TweenMax.min.js"></script>`：引入名为 “TweenMax.min.js” 的外部JavaScript文件，该文件可能包含一些动画效果的库或框架。
> 22. `<script src="howler.js"></script>`：引入名为 “howler.js” 的外部JavaScript文件，该文件可能包含用于处理背景音效的库或框架。
> 23. `<script src="app.js"></script>`：引入名为 “app.js” 的外部JavaScript文件，该文件包含实际的游戏逻辑和功能代码。
> 24. `</html>`：HTML标记的结束标签。

## 游戏逻辑和功能代码：app.js ##

![在这里插入图片描述][5769490c31e44c58b4e9c657e4f7d32e.png]

### 游戏开始前设置 ###

function initSplash() {
        gameState = "splash",
        resizeCanvas(),
        1 != audioType || muted || music.play(),
        initStartScreen()
    }

> 1.  `gameState = "splash"`：这行代码将`gameState`变量的值设置为字符串"splash"，表示游戏状态为“闪屏”（splash）。
> 2.  `resizeCanvas()`：这个函数调整画布的大小，可能是根据窗口大小或其他参数进行调整。
> 3.  `1 != audioType || muted || music.play()`：这行代码检查条件。如果`audioType`不等于1（可能意味着选择了某种音频类型），或者`muted`（静音）为假，那么它将执行`music.play()`，即播放音乐。
> 4.  `initStartScreen()`：这个函数用来初始化开始界面，可能是创建开始按钮、加载资源等等。
> 
> 所以，`initSplash`函数的作用是在游戏开始时设置游戏状态为“闪屏”，调整画布大小，根据条件播放音乐，并初始化开始界面。

### 游戏界面的初始化操作 ###

> 首先，它初始化了一个变量`gameState`并将其设置为"start"。然后，它移除了名为"moreGames"的用户输入区域。
> 
> 接下来，它检查变量`audioType`是否为1。如果是，它会创建一个TweenLite动画，将音乐的音量渐变到0.2。这里使用了TweenLite库来处理动画效果。
> 
> 然后，它创建了一个背景对象，并传入一个名为"mainBackground"的数据资源以及画布的宽度和高度。
> 
> 之后，它添加了一个名为"mute"的用户输入区域，该区域的位置和形状是一个矩形，具体位置是(644,  
> 0)，尺寸与画布相同。在用户点击该区域时，会调用`butEventHandler`函数。
> 
> 接下来，它创建了两个对象`a`和`b`，分别包含了一些图像数据和位置信息。这些对象表示游戏界面上的两个按钮，一个是"play"按钮，另一个是"credits"按钮。
> 
> 然后，它通过调用`userInput.addHitArea()`方法添加了两个用户输入区域，一个是"showMapScreen"，当用户点击`a`所表示的图像区域时，会调用`butEventHandler`函数；另一个是"credits"，当用户点击`b`所表示的图像区域时，同样会调用`butEventHandler`函数。
> 
> 接下来，它创建了一个数组`c`，包含了刚才创建的两个按钮对象`a`和`b`。
> 
> 然后，它创建了一个面板对象，并传入一些数据资源以及游戏状态、按钮数组和画布的宽度和高度。这里使用了`Elements.Panel`类来创建面板对象。
> 
> 之后，它调用面板对象的`startTween1()`方法，开始一个动画效果。
> 
> 最后，它记录了一个时间戳到变量`previousTime`中，并调用`updateStartScreenEvent()`函数来更新开始界面的事件处理。
> 
> 1.  `initCreditsScreen()`函数：
>     
>      *  将游戏状态设置为"credits"。
>      *  创建一个名为`a`的对象，该对象包含一些图像数据、位置信息和标识符。
>      *  使用`userInput.addHitArea()`方法将点击区域添加到用户输入处理器中，该区域与图像`a`相关联，并且在触发时调用`butEventHandler`事件处理程序。
>      *  创建一个名为`b`的数组，并将对象`a`添加到数组中。
>      *  创建一个`Panel`对象，该对象使用提供的数据初始化，并设置其宽度和高度为画布的宽度和高度。
>      *  调用`panel.startTween2()`方法开始面板的动画效果。
>      *  设置`previousTime`变量为当前时间。
>      *  调用`updateCreditsScreenEvent()`函数更新信用屏幕事件。
> 2.  `initMapScreen()`函数：
>     
>      *  将游戏状态设置为"map"。
>      *  创建一个`Background`对象，该对象使用提供的背景图像数据和画布的宽度和高度进行初始化。
>      *  创建三个对象`a`、`b`和`c`，它们分别包含不同的图像数据、位置信息和标识符。
>      *  使用`userInput.addHitArea()`方法将点击区域添加到用户输入处理器中，每个区域与相应的图像相关联，并在触发时调用`butEventHandler`事件处理程序。
>      *  创建一个名为`d`的数组，并将对象`a`、`b`和`c`添加到数组中。
>      *  根据特定条件设置一些变量，比如`e`和`f`的值根据`aMapPointData`数组中的索引进行设置，`totalScore`、`levelTheme`和`levelNum`的值根据`saveDataHandler.aLevelStore`数组中的值进行计算。
>      *  循环遍历`aMapPointData`数组，并根据条件向用户输入处理器中添加点击区域，并将相应的对象添加到数组`d`中。
>      *  根据`saveDataHandler.aLevelStore`数组中的值设置一些变量。
>      *  创建一个`Panel`对象，该对象使用提供的数据初始化，并设置其宽度和高度为画布的宽度和高度。
>      *  设置面板的高亮位置。
>      *  设置面板的总得分。
>      *  调用`panel.startTween1()`方法开始面板的动画效果。
>      *  设置`previousTime`变量为当前时间。
>      *  调用`updateMapEvent()`函数更新地图事件。

### 元素与状态的初始化 ###

function initGame() {
        gameState = "game",
        1 == audioType && (musicTween.kill(), musicTween = TweenLite.to(music, 1, {
            volume: .5,
            ease: "Linear.easeNone"
        })),
        userInput.addHitArea("pause", butEventHandler, null, "rect", {
            aRect: [587, 0, 635, 54]
        },
        !0),
        userInput.addHitArea("steerLeft", butEventHandler, {
            multiTouch: !0
        },
        "rect", {
            aRect: [0, 60, canvas.width / 2, canvas.height]
        },
        !0),
        userInput.addHitArea("steerRight", butEventHandler, {
            multiTouch: !0
        },
        "rect", {
            aRect: [canvas.width / 2, 60, canvas.width, canvas.height]
        },
        !0),
        userInput.addKey("steerRight", butEventHandler, null, 39),
        userInput.addKey("steerLeft", butEventHandler, null, 37),
        road = new Elements.Road(assetLib.getData(levelTheme + "Skyline"), assetLib.getData(levelTheme + "Fog"), assetLib.getData(levelTheme + "Road"), assetLib.getData(levelTheme + "Ground"), levelTheme, levelNum, canvas.width, canvas.height, roadCallback),
        hud = new Elements.Hud(assetLib.getData("hud"), assetLib.getData("uiElements"), assetLib.getData("position"), canvas.width, canvas.height),
        userCar = new Elements.UserCar(assetLib.getData("userCar"), canvas.width, canvas.height),
        enemySpeed = 390 + 7.2 * levelNum,
        raceLength = 4e4 + 1e3 * levelNum,
        maxSpeed = 475 + 6.75 * aPowerUpBarData[1],
        accRate = 4 - .32 * aPowerUpBarData[2],
        turnRate = 1.8 + .375 * aPowerUpBarData[0],
        nitroLength = 3 + .6 * aPowerUpBarData[3],
        speed = 200,
        steerX = 0,
        rightSteer = 0,
        leftSteer = 0,
        curveAmount = 0,
        hillAmount = 0,
        tweenScaleTimer = 0,
        levelScore = 0,
        raceProgress = 0,
        leadProgress = raceLength * leadHeadStart,
        racePos = 19,
        carReleasedNum = 19,
        carReleaseDelay = 0,
        speedDifferencial = 0,
        overtakenInc = 1,
        bridgeDistanceTarg = raceLength / 4,
        startTimer = 0,
        endSoundPlayed = !1,
        offRoad = !1,
        startStage = 0,
        justSkid = !1,
        nitroMode = !1,
        curveTween = TweenMax.to(this, 10, {
            curveAmount: 0,
            ease: "Cubic.easeInOut",
            onComplete: setNewCurve,
            onCompleteParams: [this]
        }),
        hillTween = TweenMax.to(this, 2 * Math.random() + 2, {
            hillAmount: -.5,
            ease: "Quad.easeInOut",
            onComplete: setNewHill,
            onCompleteParams: [this]
        }),
        previousTime = (new Date).getTime(),
        updateGameEvent()
    }

> 1.  `gameState = "game"`：将游戏状态设置为"game"。
> 2.  `audioType`为1时，执行以下操作：
>     
>      *  `musicTween.kill()`：停止之前正在进行的音乐渐变动画。
>      *  `musicTween = TweenLite.to(music, 1, { volume: .5, ease: "Linear.easeNone" })`：创建一个音乐渐变动画，将音乐的音量从当前值渐变为0.5，动画时长为1秒。
> 3.  `userInput.addHitArea("pause", butEventHandler, null, "rect", { aRect: [587, 0, 635, 54] }, !0)`：添加一个点击区域，用于处理暂停按钮的触发事件。点击区域的位置和大小由矩形的左上角和右下角坐标确定。
> 4.  `userInput.addHitArea("steerLeft", butEventHandler, { multiTouch: !0 }, "rect", { aRect: [0, 60, canvas.width / 2, canvas.height] }, !0)`：添加一个点击区域，用于处理向左转弯按钮的触发事件。点击区域的位置和大小由矩形的左上角和右下角坐标确定。允许多点触控。
> 5.  `userInput.addHitArea("steerRight", butEventHandler, { multiTouch: !0 }, "rect", { aRect: [canvas.width / 2, 60, canvas.width, canvas.height] }, !0)`：添加一个点击区域，用于处理向右转弯按钮的触发事件。点击区域的位置和大小由矩形的左上角和右下角坐标确定。允许多点触控。
> 6.  `userInput.addKey("steerRight", butEventHandler, null, 39)`：将按键"steerRight"与事件处理函数关联，当按下键盘上的右箭头键(键码为39)时触发。
> 7.  `userInput.addKey("steerLeft", butEventHandler, null, 37)`：将按键"steerLeft"与事件处理函数关联，当按下键盘上的左箭头键(键码为37)时触发。
> 8.  创建`road`对象：使用来自`assetLib`的道路相关数据创建一个名为`road`的`Elements.Road`实例。
> 9.  创建`hud`对象：使用来自`assetLib`的HUD相关数据创建一个名为`hud`的`Elements.Hud`实例。
> 10. 创建`userCar`对象：使用来自`assetLib`的用户汽车相关数据创建一个名为`userCar`的`Elements.UserCar`实例。
> 11. 设置一些游戏参数：
>     
>      *  `enemySpeed`：敌方汽车的速度。
>      *  `raceLength`：比赛的长度。
>      *  `maxSpeed`：最大速度。
>      *  `accRate`：加速度。
>      *  `turnRate`：转弯速度。
>      *  `nitroLength`：氮气持续时间。
>      *  `speed`、`steerX`、`rightSteer`、`leftSteer`、`curveAmount`、`hillAmount`、`tweenScaleTimer`等参数都被初始化为0或默认值。
> 12. 初始化游戏状态和计分：
>     
>      *  `levelScore`：关卡得分，初始值为0。
>      *  `raceProgress`：比赛进度，初始值为0。
>      *  `leadProgress`：领先者的进度，根据领先者头部开始的距离计算。
>      *  `racePos`：玩家在比赛中的位置，初始值为19。
>      *  `carReleasedNum`：已释放的汽车数量，初始值为19。
>      *  `carReleaseDelay`：释放汽车的延迟时间，初始值为0。
>      *  `speedDifferencial`：速度差异。
>      *  `overtakenInc`：超越增量。
>      *  `bridgeDistanceTarg`：目标桥梁距离。
>      *  `startTimer`：开始计时器，初始值为0。
>      *  `endSoundPlayed`：结束音效是否已播放的标志，初始值为false。
>      *  `offRoad`：是否偏离道路的标志，初始值为false。
>      *  `startStage`：开始阶段，初始值为0。
>      *  `justSkid`：是否刚刚打滑的标志，初始值为false。
>      *  `nitroMode`：是否处于氮气模式的标志，初始值为false。
> 13. 创建曲线和坡度的渐变动画：
>     
>      *  `curveTween`：将`this`对象的`curveAmount`属性渐变为0，动画时长为10秒，缓动函数为"Cubic.easeInOut"。动画完成后调用`setNewCurve`函数，并传递`this`作为参数。
>      *  `hillTween`：将`this`对象的`hillAmount`属性渐变为-0.5，动画时长为2~4秒之间的随机值，缓动函数为"Quad.easeInOut"。动画完成后调用`setNewHill`函数，并传递`this`作为参数。
> 14. 设置`previousTime`为当前时间的毫秒数。
> 15. 调用`updateGameEvent()`函数，开始更新游戏状态。  
>     ![在这里插入图片描述][5ba96c84393e4ac894cdcbb8424e2a7c.png]

# 小结 #

以下是使用HTML实现赛车游戏的简要小结：

1.  创建HTML结构：使用HTML标记创建游戏画布、分数显示区域、控制按钮等元素。
2.  CSS样式设计：使用CSS样式表为游戏元素设置合适的外观和布局，包括背景颜色、字体样式、按钮样式等。
3.  JavaScript交互逻辑：
    
     *  处理游戏初始化：在页面加载完成后，通过JavaScript代码初始化游戏状态和参数，设置游戏元素的初始位置和属性。
     *  监听用户输入：使用JavaScript代码监听玩家的按键操作或鼠标点击事件，并根据用户的输入来控制赛车的移动、转向等行为。
     *  游戏循环更新：使用JavaScript的定时器函数（如`setInterval`或`requestAnimationFrame`）来实现游戏的循环更新，包括更新赛车位置、检测碰撞、计算得分等操作。
     *  显示分数和游戏信息：根据游戏状态和数据，使用JavaScript代码实时更新游戏界面上的得分、倒计时或其他相关信息。
4.  动态效果和动画：使用JavaScript和CSS技术实现一些动态效果和动画，如赛车移动的平滑过渡、爆炸效果、道路随机生成等。
5.  游戏结束和重置：根据游戏规则或条件，判断游戏是否结束，并展示游戏结束画面或弹窗。提供重置游戏的功能，以便玩家可以重新开始游戏。
6.  响应式设计：考虑使用响应式布局或媒体查询等技术，使游戏在不同屏幕尺寸和设备上都能有良好的显示效果和操作体验。

![在这里插入图片描述][7e95f6dc0f1544c29bd6ca481bb74213.png]

[0422b4369a3549b3a39da19588ab88f4.png]: https://img-blog.csdnimg.cn/0422b4369a3549b3a39da19588ab88f4.png
[Link 1]: https://blog.csdn.net/Why_does_it_work?spm=1011.2415.3001.5343
[Link 2]: https://sprite.inscode.cc/
[java]: https://blog.csdn.net/why_does_it_work/category_12379581.html
[Link 3]: https://blog.csdn.net/why_does_it_work/category_12378617.html
[uniapp-]: https://blog.csdn.net/why_does_it_work/category_12363697.html
[0_vue]: https://blog.csdn.net/why_does_it_work/category_12376654.html
[Link 4]: https://blog.csdn.net/why_does_it_work/category_12381051.html
[0]: https://blog.csdn.net/why_does_it_work/category_12381055.html
[Link 5]: https://blog.csdn.net/why_does_it_work/category_12381058.html
[c7f3e6b8a7624a9eabbea77dbcbca119.jpeg]: https://img-blog.csdnimg.cn/c7f3e6b8a7624a9eabbea77dbcbca119.jpeg
[ceb7297d53444c67ac900201cc3b721f.png]: https://img-blog.csdnimg.cn/ceb7297d53444c67ac900201cc3b721f.png
[https_inscode.csdn.net]: https://inscode.csdn.net/
[why_does_it_work]: https://inscode.csdn.net/@why_does_it_work
[22c242737a63478287cee5392fa2c005.png]: https://img-blog.csdnimg.cn/22c242737a63478287cee5392fa2c005.png
[130583929a244907882cb7d52697afc4.png]: https://img-blog.csdnimg.cn/130583929a244907882cb7d52697afc4.png
[Link 6]: https://inscode.csdn.net/@why_does_it_work/HTML-CSS-JS_30
[d5d52bc4138b441f9fa8feaf3d4281ac.png]: https://img-blog.csdnimg.cn/d5d52bc4138b441f9fa8feaf3d4281ac.png
[0e8f8bdae09445b0af9cc61638841edb.png]: https://img-blog.csdnimg.cn/0e8f8bdae09445b0af9cc61638841edb.png
[c75f0a103e3b4f6e91b1a0b1d1246490.png]: https://img-blog.csdnimg.cn/c75f0a103e3b4f6e91b1a0b1d1246490.png
[5769490c31e44c58b4e9c657e4f7d32e.png]: https://img-blog.csdnimg.cn/5769490c31e44c58b4e9c657e4f7d32e.png
[5ba96c84393e4ac894cdcbb8424e2a7c.png]: https://img-blog.csdnimg.cn/5ba96c84393e4ac894cdcbb8424e2a7c.png
[7e95f6dc0f1544c29bd6ca481bb74213.png]: https://img-blog.csdnimg.cn/7e95f6dc0f1544c29bd6ca481bb74213.png