恐龙跑酷游戏(恐龙跑酷)

把恐龙和跑酷玩法结合起来，《方舟生存进化》竞速任务有点意思

作为位列Steam在线人数排行榜前十的一员，沙盒游戏《方舟：生存进化》有一个很重要的特点就是游戏中有400多种原始生物，利用这些生物，玩家们可以轻松的探索《方舟：生存进化》的大地图、做到修建房子等各种事情。不过，在经过了多年发展，这些玩法已经满足不了玩家的胃口了，于是在《方舟：创世》DLC中，一项全新的玩法——恐龙跑酷玩法来袭，让玩家们享受到了更加独特的游戏体验。

其实跑酷玩法并不是《方舟：生存进化》的设计师率先开创的，最开始是玩家们自己组织的，大家利用《方舟：生存进化》的建造建筑玩法修建了一个个赛道，然后自己骑着《方舟：生存进化》的恐龙去比赛，有的玩家还会把《方舟：生存进化》的高科技和赛道结合起来，这样能有更棒的游戏体验，有可能是得到了玩家的启发，恐龙竞速任务这才就此诞生。

同玩家创造的赛道不同，《方舟：生存进化》设计师们设计的赛道非常的简洁，而且在赛道里面还安排了不少的隐藏的加速带，这使得《方舟：生存进化》的恐龙赛跑变得更加出色，通过这些加速带，玩家们可以实现弯道超车，同时路线的选择也会变得更加多样化，在比赛的过程中玩家要考虑到方方面面，这样才能成为最后的冠军获得者。

值得一提的是，这一次《方舟：生存进化》的竞速任务并不是只局限于陆地上，你还可以用血蛛在森林里面穿梭，用蝠鲼在海洋中飞跃，不管哪一种玩法都很创新，得到了玩家们的认可，受到了玩家们的欢迎。

js控制chrome霸王龙自动躲避障碍

公司偶然断网。看着chrome的错误页面，看着一样无辜的小恐龙，按下空格，随便打发一点时间。

无聊的按着上下按键，突然想到，可不可以让它自己躲避障碍物呢。

先看效果：

打开chrome浏览器，输入chrome://dino按F12打开控制台，输入：

var script = document.createElement('script');script.src = 'https://suohb/demo/chrome.trex.js';document.bodyendChild(script)点击选中网页主题，按空格键让小恐龙开始跑酷

简单介绍一下思路：

小恐龙跑酷游戏，是使用js在canvas上绘制的跑酷游戏。

我的做法的是，监控这个canvas的imageData，如果发现固定的几个位置，如果不是空白，那么就触发一下key.down或者key.up事件。让小恐龙做出躲避动作。

获取使用querySelector获取到canvas元素定义好key.up和key.down的按键事件使用requestAnimationFrame在每个周期判断使用ctx.getImageData获取对应的位置是否存在像素前方是否存在需要跳跃的障碍物前方是否存在需要趴下的障碍物触发按键事件

const canvas = document.querySelector('ner-canvas') // 获取canvasconst ctx = canvas.getContext('2d')// 创建一个按键事件const createCustomKeyEvent = (keyEvent, keyCode) => {let _event = document.createEvent('UIEvents')Object.defineProperty(_event, 'keyCode', { value: keyCode })_eventitEvent(keyEvent, true, true)return _event}// 创建按键事件const KEYDOWN_UP = createCustomKeyEvent('keydown', 38)const KEYDOWN_DOWN = createCustomKeyEvent('keydown', 40)const KEYUP_UP = createCustomKeyEvent('keyup', 38)const KEYUP_DOWN = createCustomKeyEvent('keyup', 40)// 判断是否需要跳跃const checkJumpPoint = () => {let data = ctx.getImageData(120, 115, 10, 1) // 判断canvas这个位置是否像素透明度不为空data = data.data.filter((item, index) => index % 4 === 3)return datame((item, index) => { return item !== 0 })}// 判断是否需要趴下const checkDuckPoint = () => {let data = ctx.getImageData(120, 105, 10, 1) // 判断canvas这个位置是否像素透明度不为空data = data.data.filter((item, index) => index % 4 === 3)return datame((item, index) => { return item !== 0 })}// 判断前方脚下像素内是否没有障碍物const checkUnderFoot = () => {let data = ctx.getImageData(30, 115, 90, 1) // 判断canvas这个位置是否像素透明度不为空data = data.data.filter((item, index) => index % 4 === 3)return !datame((item, index) => { return item !== 0 })}let lastKey = ''const keypress = (key) => {if (key !== 'up' && key !== 'down') returndocument.dispatchEvent(lastKey === 'up' ? KEYUP_UP : KEYUP_DOWN)setTimeout(() => {if (key === 'up') {document.dispatchEvent(KEYDOWN_UP)} else if (key === 'down') {document.dispatchEvent(KEYDOWN_DOWN)}lastKey = key})}// runtimeconst runtime = () => {if (lastKey === 'up') {if (checkUnderFoot()) { // 如果当前是跳跃状态，并且已经跳过障碍物了，按下键让恐龙快速落下keypress('down')}} else {if (checkJumpPoint()) { // 但是前方是否需要跳跃keypress('up')} else if (checkDuckPoint()) { // 判断前方是否需要趴下keypress('down')}}requestAnimationFrame(runtime)}runtime()/**var script = document.createElement('script');script.src = 'https://suohb/demo/chrome.trex.js';document.bodyendChild(script) */

程序还存在的一些问题

1. 有时候按了down但是恐龙并没有趴下，可能导致噶

2. 两个十分接近的障碍物，恐龙会跳不及时

一般情况下，跑过开头之后，速度匀速之后，就不会失败，如果失败。就刷新网页重复上边步骤。

还有一种方式，直接修改小恐龙的源码，但是这个方式太暴力，太不优雅，不推荐。