js实现恐龙跳跃类避障小游戏代码
代码语言：html
所属分类：游戏
代码描述：js实现恐龙跳跃类避障小游戏代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h3 style="text-align: center">请点击这里，按键盘方向键 ↑ 开始</h3>
<div id="runner-container" class="runner-container offline" style="height: 200px; width: 600px; background: #fff; margin-left: auto; margin-right: auto; margin-top: 100px; border: 1px solid hsla(0,0%,21%,1.00); box-shadow: -1px 11px 46px 5px rgba(0,0,0,0.34); -webkit-box-shadow: -1px 11px 46px 5px rgba(0,0,0,0.34); -moz-box-shadow: -1px 11px 46px 5px rgba(0,0,0,0.34);">
</div>
<img id="sprite" style="display: none;" src="//repo.bfw.wiki/bfwrepo/images/game/kongllongspirte.png" alt="test" />
<script>
var canvas = document.createElement('canvas'),
a = document.getElementById('runner-container'),
ctx = canvas.getContext('2d');
canvas.id = 'c';
canvas.width = 600;
canvas.height = 150;
a.appendChild(canvas);
//坐标
var spriteDefinition = {
CACTUS_LARGE: {
x: 332,
y: 2
}, //大仙人掌
CACTUS_SMALL: {
x: 228,
y: 2
}, //小仙人掌
CLOUD: {
x: 86,
y: 2
}, //云
HORIZON: {
x: 2,
y: 54
}, //地面
MOON: {
x: 484,
y: 2
}, //月亮
PTERODACTYL: {
x: 134,
y: 2
}, //翼龙
RESTART: {
x: 2,
y: 2
}, //重新开始按钮
TEXT_SPRITE: {
x: 655,
y: 2
}, //分数
TREX: {
x: 848,
y: 2
}, //霸王龙
STAR: {
x: 645,
y: 2
} //星星
},
FPS = 60,
DEFAULT_WIDTH = 600,
imgSprite = document.getElementById('sprite');
Runner.config = {
ACCELERATION: 0.001,
BG_CLOUD_SPEED: 0.2,
BOTTOM_PAD: 10,
CLEAR_TIME: 3000,
CLOUD_FREQUENCY: 0.5,
GAMEOVER_CLEAR_TIME: 750,
GAP_COEFFICIENT: 0.6,
GRAVITY: 0.6,
INITIAL_JUMP_VELOCITY: 12,
INVERT_FADE_DURATION: 10000, //夜晚持续时间
INVERT_DISTANCE: 700, //每700距离进行昼夜交替
MAX_CLOUDS: 6, //云最大数量
MAX_OBSTACLE_LENGTH: 3,
MAX_OBSTACLE_DUPLICATION: 2,
MAX_SPEED: 13,
MIN_JUMP_HEIGHT: 35,
MOBILE_SPEED_COEFFICIENT: 1.2,
RESOURCE_TEMPLATE_ID: 'audio-resources',
SPEED: 6,
SPEED_DROP_COEFFICIENT: 3
};
Runner.defaultDimensions = {
HEIGHT: 150,
WIDTH: 600
};
Runner.classes = {
CANVAS: 'runner-canvas',
CONTAINER: 'runner-container',
CRASHED: 'crashed',
ICON: 'icon-offline',
INVERTED: 'inverted',
SNACKBAR: 'snackbar',
SNACKBAR_SHOW: 'snackbar-show',
TOUCH_CONTROLLER: 'controller'
};
Runner.sounds = {
BUTTON_PRESS: 'offline-sound-press',
HIT: 'offline-sound-hit',
SCORE: 'offline-sound-reached'
};
Runner.keycodes = {
JUMP: {
'38': 1,
'32': 1
}, // Up, spacebar
DUCK: {
'40': 1
}, // Down
RESTART: {
'13': 1
} // Enter
};
Runner.events = {
ANIM_END: 'webkitAnimationEnd',
CLICK: 'click',
KEYDOWN: 'keydown',
KEYUP: 'keyup',
MOUSEDOWN: 'mousedown',
MOUSEUP: 'mouseup',
RESIZE: 'resize',
TOUCHEND: 'touchend',
TOUCHSTART: 'touchstart',
VISIBILITY: 'visibilitychange',
BLUR: 'blur',
FOCUS: 'focus',
LOAD: 'load'
};
function Runner(outerContainerId, opt_config) {
if (Runner.instance_) {
return Runner.instance_;
}
Runner.instance_ = this;
//this.outerContainerEl = document.querySelector(outerContainerId);
this.containerEl = null;
this.snackbarEl = null;
//this.detailsButton = this.outerContainerEl.querySelector('#details-button');
this.config = opt_config || Runner.config;
this.dimensions = Runner.defaultDimensions;
this.canvas = null;
this.ctx = null;
this.tRex = null;
this.distanceMeter = null;
this.distanceRan = 0;
this.highestScore = 0;
this.time = 0;
this.runningTime = 0;
this.msPerFrame = 1000 / FPS;
this.currentSpeed = this.config.SPEED;
this.obstacles = []; //障碍物
this.started = false;
this.activated = false;
this.crashed = false;
this.paused = false;
this.inverted = false;
this.invertTimer = 0;
this.resizeTimerId_ = null;
this.playCount = 0;
// Sound FX.
this.audioBuffer = null;
this.soundFx = {};
// Global web audio context for playing sounds.
this.audioContext = null;
// Images.
this.images = {};
this.imagesLoaded = 0;
this.loadImages();
}
Runner.prototype = {
loadImages: function() {
this.spriteDef = spriteDefinition;
this.init();
},
loadSounds: function() {
this.audioContext = new AudioContext();
},
setSpeed: function(opt_speed) {
if (opt_speed) this.currentSpeed = opt_speed;
},
init: function() {
this.setSpeed();
this.canvas = c;
this.ctx = ctx;
this.ctx.fillStyle = '#f7f7f7';
this.ctx.fill();
this.horizon = new Horizon(this.canvas, this.spriteDef, this.dimensions,
this.config.GAP_COEFFICIENT);
this.distanceMeter = new DistanceMeter(this.canvas, this.spriteDef.TEXT_SPRITE, this.dimensions.WIDTH);
this.tRex = new Trex(this.canvas, this.spriteDef.TREX);
this.startListening();
this.update();
},
//开场动画
playIntro: function() {
if (!this.started && !this.crashed) {
this.playingIntro = true;
this.tRex.playingIntro = true;
var keyframes = '@-webkit-keyframes intro { ' +
'from { width:' + Trex.config.WIDTH + 'px }' +
'to { width: ' + this.dimensions.WIDTH + 'px }' +
'}';
document.styleSheets[0].insertRule(keyframes, 0);
this.containerEl = document.getElementById('runner-container');
this.containerEl.addEventListener('webkitAnimationEnd',
this.startGame.bind(this));
this.containerEl.style.webkitAnimation = 'intro .4s ease-out 1 both';
this.containerEl.style.width = this.dimensions.WIDTH + 'px';
this.activated = true;
this.started = true;
} else if (this.crashed) {
this.restart();
}
},
startGame: function() {
this.runningTime = 0;
this.playingIntro = false;
this.tRex.playingIntro = false;
this.containerEl.style.webkitAnimation = '';
this.playCount++;
document.addEventListener('visibilitychange', this.onVisibilityChange.bind(this));
window.addEventListener('blur', this.onVisibilityChange.bind(this));
window.addEventListener('focus', this.onVisibilityChange.bind(this));
},
clearCanvas: function() {
this.ctx.clearRect(0, 0, this.dimensions.WIDTH, this.dimensions.HEIGHT);
},
//todo
update: function() {
this.drawPending = false;
var now = getTimeStamp();
var deltaTime = now - (this.time || now);
this.time = now;
if (this.activated) {
this.clearCanvas();
if (this.tRex.jumping) {
this.tRex.updateJump(deltaTime);
}
this.runningTime += deltaTime;
var hasObstacles = this.runningTime > this.config.CLEAR_TIME;
//如果是第一次跳跃并且没有播放开场动画，则播放开场动画
if (this.tRex.jumpCount == 1 && !this.playingIntro) {
this.playIntro();
}
if (this.playingIntro) {
this.horizon.update(0, this.currentSpeed, hasObstacles);
} else {
deltaTime = !this.started ? 0 : deltaTime;
this.horizon.update(deltaTime, this.currentSpeed, hasObstacles,
this.inverted);
}
var collision = hasObstacles &&
checkForCollision(this.horizon.obstacles[0], this.tRex);
if (!collision) {
this.distanceRan += this.currentSpeed * deltaTime / this.msPerFrame;
if (this.currentSpeed < this.config.MAX_SPEED) {
this.currentSpeed += this.config.ACCELERATION;
}
} else {
this.gameOver();
}
var playAchievementSound = this.distanceMeter.update(deltaTime,
Math.ceil(this.distanceRan));
if (playAchievementSound) {
this.playSound(this.soundFx.SCORE);
}
//若夜晚持续时间大于设定值则变为白天
if (this.invertTimer > this.config.INVERT_FADE_DURATION) {
this.invertTimer = 0;
this.invertTrigger = false;
this.invert();
} else if (this.invertTimer) {
this.invertTimer += deltaTime;
} else {
var actualDistance =
this.distanceMeter.getActualDistance(Math.ceil(this.distanceRan));
if (actualDistance > 0) {
this.invertTrigger = !(actualDistance %
this.config.INVERT_DISTANCE);
if (this.invertTrigger && this.invertTimer === 0) {
this.invertTimer += deltaTime;
this.invert();
}
}
}
}
if (!this.crashed) {
this.tRex.update(deltaTime);
this.raq();
}
},
handleEvent: function(e) {
return (function(evtType, events) {
switch (evtType) {
case events.KEYDOWN:
case events.TOUCHSTART:
case events.MOUSEDOWN:
this.onKeyDown(e);
break;
case events.KEYUP:
case events.TOUCHEND:
case events.MOUSEUP:
this.onKeyUp(e);
break;
}
}.bind(this))(e.type, Runner.events);
},
startListening: function() {
document.addEventListener(Runner.events.KEYDOWN, this);
document.addEventListener(Runner.events.KEYUP, this);
document.addEventListener(Runner.events.MOUSEDOWN, this);
document.addEventListener(Runner.events.MOUSEUP, this);
},
stopListening: function() {
document.removeEventListener(Runner.events.KEYDOWN, this);
document.removeEventListener(Runner.events.KEYUP, this);
document.removeEventListener(Runner.events.MOUSEDOWN, this);
document.removeEventListener(Runner.events.MOUSEUP, this);
},
onKeyDown: function(e) {
if (e.target != this.detailsButton) {
if (!this.crashed && Runner.keycodes.JUMP[e.keyCode]) {
e.preventDefault();
if (!this.activated) {
this.loadSounds();
this.activated = true;
}
if (!this.tRex.jumping && !this.tRex.ducking) {
this.tRex.startJump(this.currentSpeed);
}
}
}
if (this.activated && !this.crashed && Runner.keycodes.DUCK[e.keyCode]) {
e.preventDefault();
if (this.tRex.jumping) {
// Speed drop, activated only when jump key is not pressed.
this.tRex.setSpeedDrop();
} else if (!this.tRex.jumping && !this.tRex.ducking) {
// Duck.
this.tRex.setDuck(true);
}
}
},
onKeyUp: function(e) {
var keyCode = String(e.keyCode);
var isjumpKey = Runner.keycodes.JUMP[keyCode] ||
e.type == Runner.events.TOUCHEND ||
e.type == Runner.events.MOUSEDOWN;
if (this.isRunning() && isjumpKey) {
e.preventDefault();
this.tRex.endJump();
} else if (Runner.keycodes.DUCK[keyCode]) {
e.preventDefault();
this.tRex.speedDrop = false;
this.tRex.setDuck(false);
} else if (this.crashed) {
e.preventDefault();
// Check that enough time has elapsed before allowing jump key to restart.
var deltaTime = getTimeStamp() - this.time;
if (Runner.keycodes.RESTART[keyCode] || this.isLeftClickOnCanvas(e) ||
(deltaTime >= this.config.GAMEOVER_CLEAR_TIME &&
Runner.keycodes.JUMP[keyCode])) {
e.preventDefault();
this.restart();
}
} else if (this.paused && isjumpKey) {
// Reset the jump state
e.preventDefault();
this.tRex.reset();
this.play();
}
},
isLeftClickOnCanvas: function(e) {
return e.button != null && e.button < 2 &&
e.type == Runner.events.MOUSEUP && e.target == this.canvas;
},
raq: function() {
if (!this.drawPending) {
this.drawPending = true;
this.raqId = requestAnimationFrame(this.update.bind(this));
}
},
isRunning: function() {
return !!this.raqId;
},
gameOver: function() {
//this.playSound(this.soundFx.HIT);
//vibrate(200);
this.stop();
this.crashed = true;
this.distanceMeter.acheivement = false;
this.tRex.update(100, Trex.status.CRASHED);
// Game over panel.
if (!this.gameOverPanel) {
this.gameOverPanel = new GameOverPanel(this.canvas,
this.spriteDef.TEXT_SPRITE, this.spriteDef.RESTART,
this.dimensions);
} else {
this.gameOverPanel.draw();
}
// Update the high score.
if (this.distanceRan > this.highestScore) {
this.highestScore = Math.ceil(this.distanceRan);
this.distanceMeter.setHighScore(this.highestScore);
}
// Reset the time clock.
this.time = getTimeStamp();
},
stop: function() {
this.activated = false;
this.paused = true;
cancelAnimationFrame(this.raqId);
this.raqId = 0;
},
play: function() {
if (!this.crashed) {
this.activated = true;
this.paused = false;
this.tRex.update(0, Trex.status.RUNNING);
this.time = getTimeStamp();
this.update();
}
},
restart: function() {
if (!this.raqId) {
this.playCount++;
this.runningTime = 0;
this.activated = true;
this.crashed = false;
this.distanceRan = 0;
this.setSpeed(this.config.SPEED);
this.time = getTimeStamp();
this.containerEl.classList.remove(Runner.classes.CRASHED);
this.clearCanvas();
this.distanceMeter.reset(this.highestScore);
this.horizon.reset();
this.tRex.reset();
//this.playSound(this.soundFx.BUTTON_PRESS);
this.invert(true);
this.update();
}
},
onVisibilityChange: function(e) {
if (document.hidden || document.webkitHidden || e.type == 'blur' ||
document.visibilityState != 'visible') {
this.stop();
} else if (!this.crashed) {
this.tRex.reset();
this.play();
}
},
playSound: function(soundBuffer) {
if (soundBuffer) {
var sourceNode = this.audioContext.createBufferSource();
sourceNode.buffer = soundBuffer;
sourceNode.connect(this.audioContext.destination);
sourceNode.start(0);
}
},
invert: function(reset) {
if (reset) {
a.classList.toggle(Runner.classes.INVERTED, this.invertTrigger);
//document.body.classList.toggle(Runner.classes.INVERTED,false);
this.invertTimer = 0;
this.inverted = false;
} else {
this.inverted = a.classList.toggle(Runner.classes.INVERTED, this.invertTrigger);
//this.inverted = document.body.classList.toggle(Runner.classes.INVERTED,this.invertTrigger);
}
}
};
window['Runner'] = Runner;
function decodeBase64ToArrayBuffer(base64String) {
var len = (base64String.length / 4) * 3;
var str = atob(base64String);
var arrayBuffer = new ArrayBuffer(len);
var bytes = new Uint8Array(arrayBuffer);
for (var i = 0; i < len; i++) {
bytes[i] = str.charCodeAt(i);
}
return bytes.buffer;
}
GameOverPanel.dimensions = {
TEXT_X: 0,
TEXT_Y: 13,
TEXT_WIDTH: 191,
TEXT_HEIGHT: 11,
RESTART_WIDTH: 36,
RESTART_HEIGHT: 32
};
function GameOverPanel(canvas, textImgPos, restartImgPos, dimensions) {
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
this.canvasDimensions = dimensions;
this.textImgPos = textImgPos;
this.restartImgPos = restartImgPos;
this.draw();
}
GameOverPanel.prototype = {
/**
* Update the panel dimensions.
* @param {number} width New canvas width.
* @param {number} opt_height Optional new canvas height.
*/
updateDimensions: function(width, opt_height) {
this.canvasDimensions.WIDTH = width;
if (opt_height) {
this.canvasDimensions.HEIGHT = opt_height;
}
},
/**
* Draw the panel.
*/
draw: function() {
var dimensions = GameOverPanel.dimensions;
var centerX = this.canvasDimensions.WIDTH / 2;
// Game over text.
var textSourceX = dimensions.TEXT_X;
var .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0