AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2023-07-29 310
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 赛车游戏——【极品飞车】（内含源码inscode在线运行）

先看运行效果


image.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. ：这是HTML文档的文档类型声明，指定文档遵循的HTML版本。
  2. ：开始HTML标记，lang属性指定了页面使用的语言为英语。
  3. ：头部标签，用于包含关于文档的元数据和引用外部资源。
  4. ：设置字符编码为UTF-8，确保页面可以正确显示非英文字符。
  5. ：用于将网页添加到iOS设备的主屏幕，并使其在全屏模式下运行。
  6. ：告诉浏览器此页面适合在手持设备上查看。
  7. ：指定页面在苹果设备上以全屏模式显示。
  8. ：设置视口的初始缩放级别和最大缩放级别，并启用iOS的Minimal UI模式。
  9. HTML5汽车赛道飙车游戏：设置页面的标题，将显示在浏览器的标题栏或选项卡上。
  10. ：提供与页面相关的关键词，有助于搜索引擎理解页面内容。
  11. ：提供页面的描述，用于搜索引擎展示结果和页面摘要。
  12. ：声明页面的版权信息。
  13. ：开始CSS样式块，用于定义页面的样式。</li><li>body 和 canvas 的样式：设置页面的背景颜色和画布样式。</li><li><script src="viewporter.js"></script>：引入名为 “viewporter.js” 的外部JavaScript文件。</li><li><body>：页面的主体部分。</li><li><div id="viewporter">：一个带有 “viewporter” id 的div元素。</li><li><canvas id="canvas" moz-opaque></canvas>：一个带有 “canvas” id 的canvas元素，用于绘制游戏界面。</li><li></body>：页面主体部分的结束标签。</li><li><script src="TweenMax.min.js"></script>：引入名为 “TweenMax.min.js” 的外部JavaScript文件，该文件可能包含一些动画效果的库或框架。</li><li><script src="howler.js"></script>：引入名为 “howler.js” 的外部JavaScript文件，该文件可能包含用于处理背景音效的库或框架。</li><li><script src="app.js"></script>：引入名为 “app.js” 的外部JavaScript文件，该文件包含实际的游戏逻辑和功能代码。</li><li></html>：HTML标记的结束标签。</li></ol><div><br /></div><h2 id="XWwDG">游戏逻辑和功能代码：app.js</h2><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fyx53s44axshrw_b5e71aa0d75542b2a51ae7e6eee04e89.png%22%2C%22originWidth%22%3A1635%2C%22originHeight%22%3A932%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1635%2C%22height%22%3A932%7D"></span></div><div><br /></div><h3 id="IfCS6"><a name="t9"></a><a></a>游戏开始前设置</h3><div><br /></div><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22function%20initSplash()%20%7B%5Cn%20%20%20%20gameState%20%3D%20%5C%22splash%5C%22%2C%5Cn%20%20%20%20resizeCanvas()%2C%5Cn%20%20%20%201%20!%3D%20audioType%20%7C%7C%20muted%20%7C%7C%20music.play()%2C%5Cn%20%20%20%20initStartScreen()%5Cn%7D%5Cn%22%2C%22id%22%3A%22cQy2l%22%7D"></div><ul><li>gameState = "splash"：这行代码将gameState变量的值设置为字符串"splash"，表示游戏状态为“闪屏”（splash）。</li><li>resizeCanvas()：这个函数调整画布的大小，可能是根据窗口大小或其他参数进行调整。</li><li>1 != audioType || muted || music.play()：这行代码检查条件。如果audioType不等于1（可能意味着选择了某种音频类型），或者muted（静音）为假，那么它将执行music.play()，即播放音乐。</li><li>initStartScreen()：这个函数用来初始化开始界面，可能是创建开始按钮、加载资源等等。</li></ul><div>所以，initSplash函数的作用是在游戏开始时设置游戏状态为“闪屏”，调整画布大小，根据条件播放音乐，并初始化开始界面。</div><div><br /></div><h3 id="elqtl">游戏界面的初始化操作</h3><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22function%20initStartScreen()%20%7B%5Cn%20%20%20%20gameState%20%3D%20%5C%22start%5C%22%2C%5Cn%20%20%20%20userInput.removeHitArea(%5C%22moreGames%5C%22)%2C%5Cn%20%20%20%201%20%3D%3D%20audioType%20%26%26%20(musicTween%20%26%26%20musicTween.kill()%2C%20musicTween%20%3D%20TweenLite.to(music%2C%201%2C%20%7B%5Cn%20%20%20%20%20%20%20%20volume%3A%20.2%2C%5Cn%20%20%20%20%20%20%20%20ease%3A%20%5C%22Linear.easeNone%5C%22%5Cn%20%20%20%20%7D))%2C%5Cn%20%20%20%20background%20%3D%20new%20Elements.Background(assetLib.getData(%5C%22mainBackground%5C%22)%2C%20canvas.width%2C%20canvas.height)%2C%5Cn%20%20%20%20userInput.addHitArea(%5C%22mute%5C%22%2C%20butEventHandler%2C%20null%2C%20%5C%22rect%5C%22%2C%20%7B%5Cn%20%20%20%20%20%20%20%20aRect%3A%20%5B644%2C%200%2C%20canvas.width%2C%2054%5D%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20!0)%3B%5Cn%20%20%20%20var%20a%20%3D%20%7B%5Cn%20%20%20%20%20%20%20%20oImgData%3A%20assetLib.getData(%5C%22uiButs%5C%22)%2C%5Cn%20%20%20%20%20%20%20%20aPos%3A%20%5B620%2C%20340%5D%2C%5Cn%20%20%20%20%20%20%20%20id%3A%20%5C%22play%5C%22%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20b%20%3D%20%7B%5Cn%20%20%20%20%20%20%20%20oImgData%3A%20assetLib.getData(%5C%22uiButs%5C%22)%2C%5Cn%20%20%20%20%20%20%20%20aPos%3A%20%5B98%2C%20359%5D%2C%5Cn%20%20%20%20%20%20%20%20id%3A%20%5C%22credits%5C%22%5Cn%20%20%20%20%7D%3B%5Cn%20%20%20%20userInput.addHitArea(%5C%22showMapScreen%5C%22%2C%20butEventHandler%2C%20null%2C%20%5C%22image%5C%22%2C%20a)%2C%5Cn%20%20%20%20userInput.addHitArea(%5C%22credits%5C%22%2C%20butEventHandler%2C%20null%2C%20%5C%22image%5C%22%2C%20b)%3B%5Cn%20%20%20%20var%20c%20%3D%20new%20Array(a%2C%20b)%3B%5Cn%20%20%20%20panel%20%3D%20new%20Elements.Panel(assetLib.getData(%5C%22panels%5C%22)%2C%20assetLib.getData(%5C%22uiElements%5C%22)%2C%20assetLib.getData(%5C%22position%5C%22)%2C%20assetLib.getData(%5C%22numbers%5C%22)%2C%20gameState%2C%20c%2C%20canvas.width%2C%20canvas.height)%2C%5Cn%20%20%20%20panel.startTween1()%2C%5Cn%20%20%20%20previousTime%20%3D%20(new%20Date).getTime()%2C%5Cn%20%20%20%20updateStartScreenEvent()%5Cn%7D%5Cnfunction%20initCreditsScreen()%20%7B%5Cn%20%20%20%20gameState%20%3D%20%5C%22credits%5C%22%3B%5Cn%20%20%20%20var%20a%20%3D%20%7B%5Cn%20%20%20%20%20%20%20%20oImgData%3A%20assetLib.getData(%5C%22uiButs%5C%22)%2C%5Cn%20%20%20%20%20%20%20%20aPos%3A%20%5B61%2C%20359%5D%2C%5Cn%20%20%20%20%20%20%20%20id%3A%20%5C%22back%5C%22%5Cn%20%20%20%20%7D%3B%5Cn%20%20%20%20userInput.addHitArea(%5C%22backFromCredits%5C%22%2C%20butEventHandler%2C%20null%2C%20%5C%22image%5C%22%2C%20a)%3B%5Cn%20%20%20%20var%20b%20%3D%20new%20Array(a)%3B%5Cn%20%20%20%20panel%20%3D%20new%20Elements.Panel(assetLib.getData(%5C%22panels%5C%22)%2C%20assetLib.getData(%5C%22uiElements%5C%22)%2C%20assetLib.getData(%5C%22position%5C%22)%2C%20assetLib.getData(%5C%22numbers%5C%22)%2C%20gameState%2C%20b%2C%20canvas.width%2C%20canvas.height)%2C%5Cn%20%20%20%20panel.startTween2()%2C%5Cn%20%20%20%20previousTime%20%3D%20(new%20Date).getTime()%2C%5Cn%20%20%20%20updateCreditsScreenEvent()%5Cn%7D%5Cnfunction%20initMapScreen()%20%7B%5Cn%20%20%20%20gameState%20%3D%20%5C%22map%5C%22%2C%5Cn%20%20%20%20background%20%3D%20new%20Elements.Background(assetLib.getData(%5C%22mainBackground%5C%22)%2C%20canvas.width%2C%20canvas.height)%3B%5Cn%20%20%20%20var%20a%20%3D%20%7B%5Cn%20%20%20%20%20%20%20%20oImgData%3A%20assetLib.getData(%5C%22uiButs%5C%22)%2C%5Cn%20%20%20%20%20%20%20%20aPos%3A%20%5B620%2C%20340%5D%2C%5Cn%20%20%20%20%20%20%20%20id%3A%20%5C%22play%5C%22%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20b%20%3D%20%7B%5Cn%20%20%20%20%20%20%20%20oImgData%3A%20assetLib.getData(%5C%22uiButs%5C%22)%2C%5Cn%20%20%20%20%20%20%20%20aPos%3A%20%5B61%2C%20359%5D%2C%5Cn%20%20%20%20%20%20%20%20id%3A%20%5C%22back%5C%22%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20c%20%3D%20%7B%5Cn%20%20%20%20%20%20%20%20oImgData%3A%20assetLib.getData(%5C%22uiButs%5C%22)%2C%5Cn%20%20%20%20%20%20%20%20aPos%3A%20%5B165%2C%20359%5D%2C%5Cn%20%20%20%20%20%20%20%20id%3A%20%5C%22resetScores%5C%22%5Cn%20%20%20%20%7D%3B%5Cn%20%20%20%20userInput.addHitArea(%5C%22startGame%5C%22%2C%20butEventHandler%2C%20null%2C%20%5C%22image%5C%22%2C%20a)%2C%5Cn%20%20%20%20userInput.addHitArea(%5C%22backFromMap%5C%22%2C%20butEventHandler%2C%20null%2C%20%5C%22image%5C%22%2C%20b)%2C%5Cn%20%20%20%20userInput.addHitArea(%5C%22resetScores%5C%22%2C%20butEventHandler%2C%20null%2C%20%5C%22image%5C%22%2C%20c)%3B%5Cn%20%20%20%20var%20d%20%3D%20new%20Array(a%2C%20b%2C%20c)%2C%5Cn%20%20%20%20e%20%3D%20aMapPointData%5B8%5D%5B0%5D%2C%5Cn%20%20%20%20f%20%3D%20aMapPointData%5B8%5D%5B1%5D%3B%5Cn%20%20%20%20totalScore%20%3D%200%2C%5Cn%20%20%20%20levelTheme%20%3D%20%5C%22desert%5C%22%2C%5Cn%20%20%20%20levelNum%20%3D%208%3B%5Cn%20%20%20%20for%20(var%20g%20%3D%200%3B%20g%20%3C%20aMapPointData.length%3B%20g%2B%2B)%20if%20(2%20%3D%3D%20saveDataHandler.aLevelStore%5B3%20*%20g%5D)%20%7B%5Cn%20%20%20%20%20%20%20%20var%20h%20%3D%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20oImgData%3A%20assetLib.getData(%5C%22uiElements%5C%22)%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20aPos%3A%20aMapPointData%5Bg%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20id%3A%20%5C%22completedLevel%5C%22%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20noFloat%3A%20!0%5Cn%20%20%20%20%20%20%20%20%7D%3B%5Cn%20%20%20%20%20%20%20%20userInput.addHitArea(%5C%22selectLevel%5C%22%2C%20butEventHandler%2C%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20id%3A%20g%5Cn%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%5C%22image%5C%22%2C%20h)%2C%5Cn%20%20%20%20%20%20%20%20d.push(h)%2C%5Cn%20%20%20%20%20%20%20%20totalScore%20%2B%3D%20saveDataHandler.aLevelStore%5B3%20*%20g%20%2B%202%5D%5Cn%20%20%20%20%7D%20else%20if%20(1%20%3D%3D%20saveDataHandler.aLevelStore%5B3%20*%20g%5D)%20%7B%5Cn%20%20%20%20%20%20%20%20levelTheme%20%3D%20%5C%22city%5C%22%2C%5Cn%20%20%20%20%20%20%20%203%20%3E%20g%20%3F%20levelTheme%20%3D%20%5C%22forest%5C%22%3A%20g%20%3E%205%20%26%26%20(levelTheme%20%3D%20%5C%22desert%5C%22)%3B%5Cn%20%20%20%20%20%20%20%20var%20h%20%3D%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20oImgData%3A%20assetLib.getData(%5C%22uiElements%5C%22)%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20aPos%3A%20aMapPointData%5Bg%5D%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20id%3A%20levelTheme%2C%5Cn%20%20%20%20%20%20%20%20%20%20%20%20noFloat%3A%20!0%5Cn%20%20%20%20%20%20%20%20%7D%3B%5Cn%20%20%20%20%20%20%20%20userInput.addHitArea(%5C%22selectLevel%5C%22%2C%20butEventHandler%2C%20%7B%5Cn%20%20%20%20%20%20%20%20%20%20%20%20id%3A%20g%5Cn%20%20%20%20%20%20%20%20%7D%2C%5Cn%20%20%20%20%20%20%20%20%5C%22image%5C%22%2C%20h)%2C%5Cn%20%20%20%20%20%20%20%20d.push(h)%2C%5Cn%20%20%20%20%20%20%20%20e%20%3D%20aMapPointData%5Bg%5D%5B0%5D%2C%5Cn%20%20%20%20%20%20%20%20f%20%3D%20aMapPointData%5Bg%5D%5B1%5D%2C%5Cn%20%20%20%20%20%20%20%20levelNum%20%3D%20g%2C%5Cn%20%20%20%20%20%20%20%20g%20%3E%201%20%26%26%20(firstPlay%20%3D%20!1)%5Cn%20%20%20%20%7D%5Cn%20%20%20%20for%20(var%20g%20%3D%200%3B%20g%20%3C%20aPowerUpBarData.length%3B%20g%2B%2B)%20aPowerUpBarData%5Bg%5D%20%3D%20saveDataHandler.aLevelStore%5B27%20%2B%20g%5D%3B%5Cn%20%20%20%20winnings%20%3D%20saveDataHandler.aLevelStore%5B31%5D%2C%5Cn%20%20%20%20panel%20%3D%20new%20Elements.Panel(assetLib.getData(%5C%22panels%5C%22)%2C%20assetLib.getData(%5C%22uiElements%5C%22)%2C%20assetLib.getData(%5C%22position%5C%22)%2C%20assetLib.getData(%5C%22numbers%5C%22)%2C%20gameState%2C%20d%2C%20canvas.width%2C%20canvas.height)%2C%5Cn%20%20%20%20panel.highlight.x%20%3D%20e%2C%5Cn%20%20%20%20panel.highlight.y%20%3D%20f%2C%5Cn%20%20%20%20panel.oScoreData.totalScore%20%3D%20totalScore%2C%5Cn%20%20%20%20panel.startTween1()%2C%5Cn%20%20%20%20previousTime%20%3D%20(new%20Date).getTime()%2C%5Cn%20%20%20%20updateMapEvent()%5Cn%7D%5Cn%22%2C%22id%22%3A%22qr3Ci%22%7D"></div><div>首先，它初始化了一个变量gameState并将其设置为"start"。然后，它移除了名为"moreGames"的用户输入区域。</div><div><br /></div><div>接下来，它检查变量audioType是否为1。如果是，它会创建一个TweenLite动画，将音乐的音量渐变到0.2。这里使用了TweenLite库来处理动画效果。</div><div><br /></div><div>然后，它创建了一个背景对象，并传入一个名为"mainBackground"的数据资源以及画布的宽度和高度。</div><div><br /></div><div>之后，它添加了一个名为"mute"的用户输入区域，该区域的位置和形状是一个矩形，具体位置是(644,</div><div>0)，尺寸与画布相同。在用户点击该区域时，会调用butEventHandler函数。</div><div><br /></div><div>接下来，它创建了两个对象a和b，分别包含了一些图像数据和位置信息。这些对象表示游戏界面上的两个按钮，一个是"play"按钮，另一个是"credits"按钮。</div><div><br /></div><div>然后，它通过调用userInput.addHitArea()方法添加了两个用户输入区域，一个是"showMapScreen"，当用户点击a所表示的图像区域时，会调用butEventHandler函数；另一个是"credits"，当用户点击b所表示的图像区域时，同样会调用butEventHandler函数。</div><div><br /></div><div>接下来，它创建了一个数组c，包含了刚才创建的两个按钮对象a和b。</div><div><br /></div><div>然后，它创建了一个面板对象，并传入一些数据资源以及游戏状态、按钮数组和画布的宽度和高度。这里使用了Elements.Panel类来创建面板对象。</div><div><br /></div><div>之后，它调用面板对象的startTween1()方法，开始一个动画效果。</div><div><br /></div><div>最后，它记录了一个时间戳到变量previousTime中，并调用updateStartScreenEvent()函数来更新开始界面的事件处理。</div><div><br /></div><div>1.initCreditsScreen()函数：</div><div><br /></div><div>将游戏状态设置为"credits"。</div><div>创建一个名为a的对象，该对象包含一些图像数据、位置信息和标识符。</div><div>使用userInput.addHitArea()方法将点击区域添加到用户输入处理器中，该区域与图像a相关联，并且在触发时调用butEventHandler事件处理程序。</div><div>创建一个名为b的数组，并将对象a添加到数组中。</div><div>创建一个Panel对象，该对象使用提供的数据初始化，并设置其宽度和高度为画布的宽度和高度。</div><div>调用panel.startTween2()方法开始面板的动画效果。</div><div>设置previousTime变量为当前时间。</div><div>调用updateCreditsScreenEvent()函数更新信用屏幕事件。</div><div>2.initMapScreen()函数：</div><div><br /></div><div>将游戏状态设置为"map"。</div><div>创建一个Background对象，该对象使用提供的背景图像数据和画布的宽度和高度进行初始化。</div><div>创建三个对象a、b和c，它们分别包含不同的图像数据、位置信息和标识符。</div><div>使用userInput.addHitArea()方法将点击区域添加到用户输入处理器中，每个区域与相应的图像相关联，并在触发时调用butEventHandler事件处理程序。</div><div>创建一个名为d的数组，并将对象a、b和c添加到数组中。</div><div>根据特定条件设置一些变量，比如e和f的值根据aMapPointData数组中的索引进行设置，totalScore、levelTheme和levelNum的值根据saveDataHandler.aLevelStore数组中的值进行计算。</div><div>循环遍历aMapPointData数组，并根据条件向用户输入处理器中添加点击区域，并将相应的对象添加到数组d中。</div><div>根据saveDataHandler.aLevelStore数组中的值设置一些变量。</div><div>创建一个Panel对象，该对象使用提供的数据初始化，并设置其宽度和高度为画布的宽度和高度。</div><div>设置面板的高亮位置。</div><div>设置面板的总得分。</div><div>调用panel.startTween1()方法开始面板的动画效果。</div><div>设置previousTime变量为当前时间。</div><div>调用updateMapEvent()函数更新地图事件。</div><div><br /></div><h3 id="Hn1xK">元素与状态的初始化</h3><div data-card-type="block" data-ready-card="codeblock" data-card-value="data:%7B%22mode%22%3A%22plain%22%2C%22code%22%3A%22function%20initGame()%20%7B%5Cn%20%20%20%20gameState%20%3D%20%5C%22game%5C%22%2C%5Cn%20%20%20%201%20%3D%3D%20audioType%20%26%26%20(musicTween.kill()%2C%20musicTween%20%3D%20TweenLite.to(music%2C%201%2C%20%7B%5Cn%20%20%20%20%20%20%20%20volume%3A%20.5%2C%5Cn%20%20%20%20%20%20%20%20ease%3A%20%5C%22Linear.easeNone%5C%22%5Cn%20%20%20%20%7D))%2C%5Cn%20%20%20%20userInput.addHitArea(%5C%22pause%5C%22%2C%20butEventHandler%2C%20null%2C%20%5C%22rect%5C%22%2C%20%7B%5Cn%20%20%20%20%20%20%20%20aRect%3A%20%5B587%2C%200%2C%20635%2C%2054%5D%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20!0)%2C%5Cn%20%20%20%20userInput.addHitArea(%5C%22steerLeft%5C%22%2C%20butEventHandler%2C%20%7B%5Cn%20%20%20%20%20%20%20%20multiTouch%3A%20!0%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20%5C%22rect%5C%22%2C%20%7B%5Cn%20%20%20%20%20%20%20%20aRect%3A%20%5B0%2C%2060%2C%20canvas.width%20%2F%202%2C%20canvas.height%5D%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20!0)%2C%5Cn%20%20%20%20userInput.addHitArea(%5C%22steerRight%5C%22%2C%20butEventHandler%2C%20%7B%5Cn%20%20%20%20%20%20%20%20multiTouch%3A%20!0%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20%5C%22rect%5C%22%2C%20%7B%5Cn%20%20%20%20%20%20%20%20aRect%3A%20%5Bcanvas.width%20%2F%202%2C%2060%2C%20canvas.width%2C%20canvas.height%5D%5Cn%20%20%20%20%7D%2C%5Cn%20%20%20%20!0)%2C%5Cn%20%20%20%20userInput.addKey(%5C%22steerRight%5C%22%2C%20butEventHandler%2C%20null%2C%2039)%2C%5Cn%20%20%20%20userInput.addKey(%5C%22steerLeft%5C%22%2C%20butEventHandler%2C%20null%2C%2037)%2C%5Cn%20%20%20%20road%20%3D%20new%20Elements.Road(assetLib.getData(levelTheme%20%2B%20%5C%22Skyline%5C%22)%2C%20assetLib.getData(levelTheme%20%2B%20%5C%22Fog%5C%22)%2C%20assetLib.getData(levelTheme%20%2B%20%5C%22Road%5C%22)%2C%20assetLib.getData(levelTheme%20%2B%20%5C%22Ground%5C%22)%2C%20levelTheme%2C%20levelNum%2C%20canvas.width%2C%20canvas.height%2C%20roadCallback)%2C%5Cn%20%20%20%20hud%20%3D%20new%20Elements.Hud(assetLib.getData(%5C%22hud%5C%22)%2C%20assetLib.getData(%5C%22uiElements%5C%22)%2C%20assetLib.getData(%5C%22position%5C%22)%2C%20canvas.width%2C%20canvas.height)%2C%5Cn%20%20%20%20userCar%20%3D%20new%20Elements.UserCar(assetLib.getData(%5C%22userCar%5C%22)%2C%20canvas.width%2C%20canvas.height)%2C%5Cn%20%20%20%20enemySpeed%20%3D%20390%20%2B%207.2%20*%20levelNum%2C%5Cn%20%20%20%20raceLength%20%3D%204e4%20%2B%201e3%20*%20levelNum%2C%5Cn%20%20%20%20maxSpeed%20%3D%20475%20%2B%206.75%20*%20aPowerUpBarData%5B1%5D%2C%5Cn%20%20%20%20accRate%20%3D%204%20-%20.32%20*%20aPowerUpBarData%5B2%5D%2C%5Cn%20%20%20%20turnRate%20%3D%201.8%20%2B%20.375%20*%20aPowerUpBarData%5B0%5D%2C%5Cn%20%20%20%20nitroLength%20%3D%203%20%2B%20.6%20*%20aPowerUpBarData%5B3%5D%2C%5Cn%20%20%20%20speed%20%3D%20200%2C%5Cn%20%20%20%20steerX%20%3D%200%2C%5Cn%20%20%20%20rightSteer%20%3D%200%2C%5Cn%20%20%20%20leftSteer%20%3D%200%2C%5Cn%20%20%20%20curveAmount%20%3D%200%2C%5Cn%20%20%20%20hillAmount%20%3D%200%2C%5Cn%20%20%20%20tweenScaleTimer%20%3D%200%2C%5Cn%20%20%20%20levelScore%20%3D%200%2C%5Cn%20%20%20%20raceProgress%20%3D%200%2C%5Cn%20%20%20%20leadProgress%20%3D%20raceLength%20*%20leadHeadStart%2C%5Cn%20%20%20%20racePos%20%3D%2019%2C%5Cn%20%20%20%20carReleasedNum%20%3D%2019%2C%5Cn%20%20%20%20carReleaseDelay%20%3D%200%2C%5Cn%20%20%20%20speedDifferencial%20%3D%200%2C%5Cn%20%20%20%20overtakenInc%20%3D%201%2C%5Cn%20%20%20%20bridgeDistanceTarg%20%3D%20raceLength%20%2F%204%2C%5Cn%20%20%20%20startTimer%20%3D%200%2C%5Cn%20%20%20%20endSoundPlayed%20%3D%20!1%2C%5Cn%20%20%20%20offRoad%20%3D%20!1%2C%5Cn%20%20%20%20startStage%20%3D%200%2C%5Cn%20%20%20%20justSkid%20%3D%20!1%2C%5Cn%20%20%20%20nitroMode%20%3D%20!1%2C%5Cn%20%20%20%20curveTween%20%3D%20TweenMax.to(this%2C%2010%2C%20%7B%5Cn%20%20%20%20%20%20%20%20curveAmount%3A%200%2C%5Cn%20%20%20%20%20%20%20%20ease%3A%20%5C%22Cubic.easeInOut%5C%22%2C%5Cn%20%20%20%20%20%20%20%20onComplete%3A%20setNewCurve%2C%5Cn%20%20%20%20%20%20%20%20onCompleteParams%3A%20%5Bthis%5D%5Cn%20%20%20%20%7D)%2C%5Cn%20%20%20%20hillTween%20%3D%20TweenMax.to(this%2C%202%20*%20Math.random()%20%2B%202%2C%20%7B%5Cn%20%20%20%20%20%20%20%20hillAmount%3A%20-.5%2C%5Cn%20%20%20%20%20%20%20%20ease%3A%20%5C%22Quad.easeInOut%5C%22%2C%5Cn%20%20%20%20%20%20%20%20onComplete%3A%20setNewHill%2C%5Cn%20%20%20%20%20%20%20%20onCompleteParams%3A%20%5Bthis%5D%5Cn%20%20%20%20%7D)%2C%5Cn%20%20%20%20previousTime%20%3D%20(new%20Date).getTime()%2C%5Cn%20%20%20%20updateGameEvent()%5Cn%7D%5Cn%22%2C%22id%22%3A%22ZZvRv%22%7D"></div><div><code>1.gameState = "game"</code>：将游戏状态设置为"game"。<br /></div><div><code>2.audioType</code>为1时，执行以下操作：</div><ul data-lake-indent="1"><li><code>musicTween.kill()</code>：停止之前正在进行的音乐渐变动画。</li></ul><div>musicTween = TweenLite.to(music, 1, { volume: .5, ease: "Linear.easeNone" })：创建一个音乐渐变动画，将音乐的音量从当前值渐变为0.5，动画时长为1秒。</div><div>3.userInput.addHitArea("pause", butEventHandler, null, "rect", { aRect: [587, 0, 635, 54] }, !0)：添加一个点击区域，用于处理暂停按钮的触发事件。点击区域的位置和大小由矩形的左上角和右下角坐标确定。</div><div>4.userInput.addHitArea("steerLeft", butEventHandler, { multiTouch: !0 }, "rect", { aRect: [0, 60, canvas.width / 2, canvas.height] }, !0)：添加一个点击区域，用于处理向左转弯按钮的触发事件。点击区域的位置和大小由矩形的左上角和右下角坐标确定。允许多点触控。</div><div>5.userInput.addHitArea("steerRight", butEventHandler, { multiTouch: !0 }, "rect", { aRect: [canvas.width / 2, 60, canvas.width, canvas.height] }, !0)：添加一个点击区域，用于处理向右转弯按钮的触发事件。点击区域的位置和大小由矩形的左上角和右下角坐标确定。允许多点触控。</div><div>6.userInput.addKey("steerRight", butEventHandler, null, 39)：将按键"steerRight"与事件处理函数关联，当按下键盘上的右箭头键(键码为39)时触发。</div><div>7.userInput.addKey("steerLeft", butEventHandler, null, 37)：将按键"steerLeft"与事件处理函数关联，当按下键盘上的左箭头键(键码为37)时触发。</div><div>8.创建road对象：使用来自assetLib的道路相关数据创建一个名为road的Elements.Road实例。</div><div>9.创建hud对象：使用来自assetLib的HUD相关数据创建一个名为hud的Elements.Hud实例。</div><div>10.创建userCar对象：使用来自assetLib的用户汽车相关数据创建一个名为userCar的Elements.UserCar实例。</div><div>11.设置一些游戏参数：</div><div>enemySpeed：敌方汽车的速度。</div><div>raceLength：比赛的长度。</div><div>maxSpeed：最大速度。</div><div>accRate：加速度。</div><div>turnRate：转弯速度。</div><div>nitroLength：氮气持续时间。</div><div>speed、steerX、rightSteer、leftSteer、curveAmount、hillAmount、tweenScaleTimer等参数都被初始化为0或默认值。</div><div>12.初始化游戏状态和计分：</div><div>levelScore：关卡得分，初始值为0。</div><div>raceProgress：比赛进度，初始值为0。</div><div>leadProgress：领先者的进度，根据领先者头部开始的距离计算。</div><div>racePos：玩家在比赛中的位置，初始值为19。</div><div>carReleasedNum：已释放的汽车数量，初始值为19。</div><div>carReleaseDelay：释放汽车的延迟时间，初始值为0。</div><div>speedDifferencial：速度差异。</div><div>overtakenInc：超越增量。</div><div>bridgeDistanceTarg：目标桥梁距离。</div><div>startTimer：开始计时器，初始值为0。</div><div>endSoundPlayed：结束音效是否已播放的标志，初始值为false。</div><div>offRoad：是否偏离道路的标志，初始值为false。</div><div>startStage：开始阶段，初始值为0。</div><div>justSkid：是否刚刚打滑的标志，初始值为false。</div><div>nitroMode：是否处于氮气模式的标志，初始值为false。</div><div>13.创建曲线和坡度的渐变动画：</div><div>curveTween：将this对象的curveAmount属性渐变为0，动画时长为10秒，缓动函数为"Cubic.easeInOut"。动画完成后调用setNewCurve函数，并传递this作为参数。</div><div>hillTween：将this对象的hillAmount属性渐变为-0.5，动画时长为2~4秒之间的随机值，缓动函数为"Quad.easeInOut"。动画完成后调用setNewHill函数，并传递this作为参数。</div><div>14.设置previousTime为当前时间的毫秒数。</div><div>15.调用updateGameEvent()函数，开始更新游戏状态。</div><div><br /></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fyx53s44axshrw_ea42af89582f4b69859aaf37b052191e.png%22%2C%22originWidth%22%3A1668%2C%22originHeight%22%3A922%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1668%2C%22height%22%3A922%7D"></span></div><div><br /></div><h1 id="Zbomz">小结</h1><div><br /></div><div>以下是使用HTML实现赛车游戏的简要小结：</div><div><br /></div><div>1.创建HTML结构：使用HTML标记创建游戏画布、分数显示区域、控制按钮等元素。</div><div><br /></div><div>2.CSS样式设计：使用CSS样式表为游戏元素设置合适的外观和布局，包括背景颜色、字体样式、按钮样式等。</div><div><br /></div><div>3.JavaScript交互逻辑：</div><div><br /></div><div>处理游戏初始化：在页面加载完成后，通过JavaScript代码初始化游戏状态和参数，设置游戏元素的初始位置和属性。</div><div>监听用户输入：使用JavaScript代码监听玩家的按键操作或鼠标点击事件，并根据用户的输入来控制赛车的移动、转向等行为。</div><div>游戏循环更新：使用JavaScript的定时器函数（如setInterval或requestAnimationFrame）来实现游戏的循环更新，包括更新赛车位置、检测碰撞、计算得分等操作。</div><div>显示分数和游戏信息：根据游戏状态和数据，使用JavaScript代码实时更新游戏界面上的得分、倒计时或其他相关信息。</div><div>4.动态效果和动画：使用JavaScript和CSS技术实现一些动态效果和动画，如赛车移动的平滑过渡、爆炸效果、道路随机生成等。</div><div><br /></div><div>5.游戏结束和重置：根据游戏规则或条件，判断游戏是否结束，并展示游戏结束画面或弹窗。提供重置游戏的功能，以便玩家可以重新开始游戏。</div><div><br /></div><div>6.响应式设计：考虑使用响应式布局或媒体查询等技术，使游戏在不同屏幕尺寸和设备上都能有良好的显示效果和操作体验。</div><div><br /></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fyx53s44axshrw_7a636da09862403c842125286febe99c.png%22%2C%22originWidth%22%3A1091%2C%22originHeight%22%3A573%2C%22size%22%3A0%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Afalse%2C%22bottom%22%3Afalse%7D%2C%22width%22%3A1091%2C%22height%22%3A573%7D"></span></div>
文章标签：
JavaScript
前端开发
iOS开发
搜索推荐
索引
定位技术
HTML5
移动开发
雪碧有白泡泡
目录
相关文章
土木林森
|
2月前
|
图形学 C++ C#
Unity插件开发全攻略：从零起步教你用C++扩展游戏功能，解锁Unity新玩法的详细步骤与实战技巧大公开
【8月更文挑战第31天】Unity 是一款功能强大的游戏开发引擎，支持多平台发布并拥有丰富的插件生态系统。本文介绍 Unity 插件开发基础，帮助读者从零开始编写自定义插件以扩展其功能。插件通常用 C++ 编写，通过 Mono C# 运行时调用，需在不同平台上编译。文中详细讲解了开发环境搭建、简单插件编写及在 Unity 中调用的方法，包括创建 C# 封装脚本和处理跨平台问题，助力开发者提升游戏开发效率。
土木林森
201 0
向宇it
|
5月前
|
图形学
【制作100个unity游戏之29】使用unity复刻经典游戏《愤怒的小鸟》（完结，附带项目源码）（上）
【制作100个unity游戏之29】使用unity复刻经典游戏《愤怒的小鸟》（完结，附带项目源码）
向宇it
215 2
向宇it
|
5月前
|
存储 JSON 关系型数据库
【制作100个unity游戏之27】使用unity复刻经典游戏《植物大战僵尸》，制作属于自己的植物大战僵尸随机版和杂交版13（完结，附带项目源码）
【制作100个unity游戏之27】使用unity复刻经典游戏《植物大战僵尸》，制作属于自己的植物大战僵尸随机版和杂交版13（完结，附带项目源码）
向宇it
107 0
向宇it
|
5月前
|
图形学
【制作100个unity游戏之29】使用unity复刻经典游戏《愤怒的小鸟》（完结，附带项目源码）（下）
【制作100个unity游戏之29】使用unity复刻经典游戏《愤怒的小鸟》（完结，附带项目源码）（下）
向宇it
83 0
雪碧有白泡泡
|
存储 索引 容器
灰太狼系列—打地鼠(内含源码) inscode中的直观运行
灰太狼系列—打地鼠(内含源码) inscode中的直观运行
雪碧有白泡泡
117 0
雪碧有白泡泡
|
前端开发 JavaScript 容器
在inscode中轻松实现坦克大战（内含源码）
在inscode中轻松实现坦克大战（内含源码）
雪碧有白泡泡
165 0
豆约翰
|
Java
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏02支持中文及显示FPS
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏02支持中文及显示FPS
豆约翰
138 0
豆约翰
|
Java
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏06加载游戏背景
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏06加载游戏背景
豆约翰
132 0
豆约翰
|
Java
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏07游戏输入管理
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏07游戏输入管理
豆约翰
120 0
豆约翰
|
数据可视化 Java
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏15之拳击范围
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏15之拳击范围
豆约翰
179 0

热门文章

最新文章

  • 1
    Flutter之禅 内存优化篇
  • 2
    《Cadence 16.6电路设计与仿真从入门到精通》——2.4 Design Entry CIS原理图图形界面　
  • 3
    记一次对网络抖动经典案例的分析
  • 4
    国外成人网站xHamster大量用户信息黑市变卖，部分账号涉及英美政府官员
  • 5
    用户密码以BCrypt加密的方式来防范被破解
  • 6
    带你理清CPU，cache和存储器之间的逻辑运作
  • 7
    Git设置代理服务器
  • 8
    【DSW Gallery】PAI-DSW开通及授权
  • 9
    吐血整理：机器学习的30个基本概念，都在这里了（手绘图解）
  • 10
    MOSS站点的迁移(备份还原)
  • 1
    设计模式之 5 大创建型模式，万字长文深剖 ，近 30 张图解！
    49
  • 2
    《C++新特性：为多线程数据竞争检测与预防保驾护航》
    41
  • 3
    Kotlin - 区间与数组
    41
  • 4
    Kotlin - 参数与异常
    39
  • 5
    Kotlin - 运算符与中缀表达式
    34
  • 6
    Kotlin - 函数与Lambda表达式
    23
  • 7
    Kotlin - 分支与循环
    19
  • 8
    天气预报1天-中国气象局-地址查询版免费API接口教程
    20
  • 9
    《C++智能合约与区块链底层交互全解析：构建坚实的去中心化应用桥梁》
    19

    • 相关课程

    更多
  • 阿里小蜜中的机器阅读技术
  • 场景实践 -新手玩转云计算制作一个浪漫的表白网页
  • 阿里云RPA（机器人流程自动化）- 初级入门（可视化）
  • 机器阅读技术与应用
  • 基于通义灵码实现高效 AI 编码
  • 相册服务中的故事生成算法介绍

    • 相关电子书

    更多
  • 如何高效的制作主机次时代游戏——高效游戏制作流程
  • 如何高效的制作主机次时代游戏
  • 钉钉小程序——为工作方式插上翅膀

    • 相关实验场景

    更多
  • 【涂鸦即艺术】基于云应用开发平台CAP部署AI实时生图绘板
  • SAE 极速部署专属 AI 证件照神器
  • 流水线运行出错排查难？AI帮你智能排查
  • 以电商场景为例搭建AI语义搜索应用
  • 奥运时刻！零代码生成奥运风格AI写真。
  • 【AI破次元壁合照】少年白马醉春风，函数计算一键部署AI绘画平台
    • 下一篇
    阿里云OSS设置跨域访问