酷跑小游戏欢迎来到程序小院
玩法：
按空格键跳跃，躲避障碍物，掉进水里游戏结束
开始游戏
<canvas id="canvas" width="800" height="480"></canvas>
css
#game-over {
display: none;
text-align: center;
padding-top: 92px;
z-index: 7;
width: 600px;
height: 360px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: auto;
margin: auto;
position: absolute;
}
#game-restart{
border-radius: 5px;
width: 120px;
height: 20px;
padding: 10px 20px;
background: #f7716d;
color: #fff;
}
js
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var player, score, stop, ticker;
var ground = [], water = [], enemies = [], environment = [];
// platform variables
var platformHeight, platformLength, gapLength;
var platformWidth = 32;
var platformBase = canvas.height - platformWidth; // bottom row of the game
var platformSpacer = 64;
/**
* Get a random number between range
* @param {integer}
* @param {integer}
*/
function rand(low, high) {
return Math.floor( Math.random() * (high - low 1) low );
}
/**
* Bound a number between range
* @param {integer} num - Number to bound
* @param {integer}
* @param {integer}
*/
function bound(num, low, high) {
return Math.max( Math.min(num, high), low);
}
/**
* Asset pre-loader object. Loads all images
*/
var assetLoader = (function() {
// images dictionary
this.imgs = {
'bg' : '/default/game/kpxyx/bg.png',
'sky' : '/default/game/kpxyx/sky.png',
'backdrop' : '/default/game/kpxyx/backdrop.png',
'backdrop2' : '/default/game/kpxyx/backdrop_ground.png',
'grass' : '/default/game/kpxyx/grass.png',
'avatar_normal' : '/default/game/kpxyx/normal_walk.png',
'water' : '/default/game/kpxyx/water.png',
'grass1' : '/default/game/kpxyx/grassMid1.png',
'grass2' : '/default/game/kpxyx/grassMid2.png',
'bridge' : '/default/game/kpxyx/bridge.png',
'plant' : '/default/game/kpxyx/plant.png',
'bush1' : '/default/game/kpxyx/bush1.png',
'bush2' : '/default/game/kpxyx/bush2.png',
'cliff' : '/default/game/kpxyx/grassCliffRight.png',
'spikes' : '/default/game/kpxyx/spikes.png',
'box' : '/default/game/kpxyx/boxCoin.png',
'slime' : '/default/game/kpxyx/slime.png'
};
var assetsLoaded = 0; // how many assets have been loaded
var numImgs = Object.keys(this.imgs).length; // total number of image assets
this.totalAssest = numImgs; // total number of assets
/**
* Ensure all assets are loaded before using them
* @param {number} dic - Dictionary name ('imgs', 'sounds', 'fonts')
* @param {number} name - Asset name in the dictionary
*/
function assetLoaded(dic, name) {
// don't count assets that have already loaded
if (this[dic][name].status !== 'loading') {
return;
}
this[dic][name].status = 'loaded';
assetsLoaded ;
// finished callback
if (assetsLoaded === this.totalAssest && typeof this.finished === 'function') {
this.finished();
}
}
/**
* Create assets, set callback for asset loading, set asset source
*/
this.downloadAll = function() {
var _this = this;
var src;
// load images
for (var img in this.imgs) {
if (this.imgs.hasOwnProperty(img)) {
src = this.imgs[img];
// create a closure for event binding
(function(_this, img) {
_this.imgs[img] = new Image();
_this.imgs[img].status = 'loading';
_this.imgs[img].name = img;
_this.imgs[img].onload = function() { assetLoaded.call(_this, 'imgs', img) };
_this.imgs[img].src = src;
})(_this, img);
}
}
}
return {
imgs: this.imgs,
totalAssest: this.totalAssest,
downloadAll: this.downloadAll
};
})();
assetLoader.finished = function() {
startGame();
}
源码
需要源码请关注添加好友哦^ ^
转载：欢迎来到本站，转载请注明文章出处https://ormcc.com/
