This article describes the game "Flappy Pig" implemented in pure JavaScript. Share it for your reference. The details are as follows:
Flappy Pig is Pig, a web version of "Flappy Bird" written using native javascript. I was also surprised to see why I made this thing, and I spent a day on a valuable weekend, but since I wrote it out, I will take it out and share it with you.
as follows:
/**
* "Flappy Pig" v0.1.0 implemented by native javascript
* ====================================================
* @author keenwon
* Full source at
*/
var flappy = (function (self) {
'use strict';
//set up = {
//The gravity acceleration, the screen pixels and the actual physical meters are different, so there is a conversion g: 400,
//The initial speed of jumping controls the pig's bounce force v0: 400,
//Pillar movement speed vp: 2.5,
//Frequency, control the number of animation frames, default 20ms frequency: 20,
//Levels levels: 100,
//The beginning of the blank distance safeLift: 500,
//Floor height (related to the picture) floorHeight: 64,
//The width of the pig pigWidth: 33,
//The height of the pig pigHeight: 30,
//The current height of the pig pigY: 300,
//The distance from the pig to the left, pigLeft: 80,
//Path Html pillarHtml: '<div class="top"></div><div class="bottom"></div>',
//Pole width pillarWidth: 45,
//The height of the upper and lower columns pillarGapY: 108,
//The width of the left and right intervals of the columns pillarGapX: 250,
//The basic positioning value of the upper column (that is, the top value, which is related to the CSS writing method) pillarTop: -550,
//The basic positioning value of the lower column pillarBottom: -500
};
return self;
})(flappy || {})
as follows:
/**
* "Flappy Pig" v0.1.0 implemented by native javascript
* ====================================================
* @author keenwon
* Full source at
*/
var flappy = (function (self) {
'use strict';
//tool = {
preventDefaultEvent: function (event) {
event = || event;
if (event) {
if () {
();
} else {
= false;
}
}
},
$: function (id) {
return (id);
},
getChilds: function (obj) {
var childs = || ,
childsArray = new Array();
for (var i = 0, len = ; i < len; i++) {
if (childs[i].nodeType == 1) {
(childs[i]);
}
}
return childsArray;
}
};
return self;
})(flappy || {})
as follows:
/**
* "Flappy Pig" v0.1.0 implemented by native javascript
* ====================================================
* @author keenwon
* Full source at
*/
var flappy = (function (self) {
'use strict';
var option = ,
$ = .$;
//pig = {
Y: 0, //The current height of the pig (bottom edge) init: function (overCallback, controller) {
var t = this;
= 0, //Displacement = 0, //time t.$pig = $('pig');
t.$ = + 'px';
t._controller = controller;
t._addListener(overCallback);
},
//Add to listen _addListener: function (overCallback) {
this._overCallback = overCallback;
},
//start up start: function () {
var t = this,
interval = / 1000;
= option.v0 * - * * * 2; // Vertical upward throwing motion formula = + ;
if ( >= ) {
t.$ = + 'px';
} else {
t._dead();
}
+= interval;
},
//Jump jump: function () {
var t = this;
= parseInt(t.$);
= 0;
= 0;
},
//Triggered when hitting the ground _dead: function () {
this._overCallback.call(this._controller);
},
//Disposal of hitting the ground fall: function () {
var t = this;
//Still it to the ground and correct the height = ;
t.$ = + 'px';
},
//Disposal of hitting the post hit: function () {
var t = this;
//come down var timer = setInterval(function () {
t.$ = + 'px';
if ( <= ) {
clearInterval(timer);
}
-= 12;
}, );
}
};
return self;
})(flappy || {})
as follows:
/**
* "Flappy Pig" v0.1.0 implemented by native javascript
* ====================================================
* @author keenwon
* Full source at
*/
var flappy = (function (self) {
'use strict';
var option = ,
util = ,
$ = util.$;
//Pillar = {
currentId: -1, //The current column id init: function () {
var t = this;
//Cached the conversion factor of upper and lower column positions t._factor = - + 450;
//s represents a position, and the column that reaches this position is the "current column". Even if it is close to the pig, start to calculate whether the pig has hit the pillar, 10 is the advance measurement. t._s = + + 10;
t._render();
},
// Render the column into the DOM tree _render: function () {
var t = this,
initleft = ;
= 0;
= ('div');
= = 'pillarWrapper';
for (var i = 0, j = ; i < j; i++) {
var el = ('div');
= ;
= 'pillar';
= 'pillar-' + i;
= initleft + 'px';
var childs = (el),
topEl = childs[0],
bottomEl = childs[1],
pos = t._random(i);
= + 'px';
= + 'px';
('top', 600 + );
('bottom', 0 - );
(el);
initleft += ;
}
$('screen').appendChild();
},
//Calculate the column position _random: function (i) {
var t = this,
x = (),
h = (((i+1) * x)) * 290;
return {
top: + h,
bottom: t._factor - h
}
},
//Move the post move: function () {
var t = this;
= - + 'px';
t._find();
+= ;
},
//Find the current pillar _find: function (l) {
var t = this,
x = (t._s + l - ) / ,
intX = parseInt(x); //intX is the current column if (x > 0 && != intX && (x - intX) < 0.1) {
= intX;
}
}
};
return self;
})(flappy || {})
as follows:
/**
* "Flappy Pig" v0.1.0 implemented by native javascript
* ====================================================
* @author keenwon
* Full source at
*/
var flappy = (function (self) {
'use strict';
var pig = ,
pillar = ,
option = ,
$ = .$;
//Position judgment = {
init: function (overCallback, controller) {
var t = this;
= $('pillarWrapper');
t.pigX1 = ,
t.pigX2 = + , //The left and right positions of the pig are fixed t._controller = controller;
t._addListener(overCallback);
},
//Add to listen _addListener: function (overCallback) {
this._overCallback = overCallback;
},
judge: function () {
var t = this,
currentPillar = $('pillar-' + );
if ( == -1) {
return;
}
t.pigY2 = 600 - ;
t.pigY1 = t.pigY2 - ; //The up and down position of the pig t.pY1 = ('top');
t.pY2 = ('bottom');
t.pX1 = parseInt() + parseInt();
t.pX2 = t.pX1 + ; //The upper, lower, left and right positions of the column ();
if ( + >= t.pX1 && <= t.pX2) {
if (t.pigY1 < t.pY1 || t.pigY2 > t.pY2) {
t._dead();
}
}
},
//Triggered when hitting a post _dead: function () {
this._overCallback.call(this._controller);
},
};
return self;
})(flappy || {})
as follows:
/**
* "Flappy Pig" v0.1.0 implemented by native javascript
* ====================================================
* @author keenwon
* Full source at
*/
var flappy = (function (self) {
'use strict';
var pig = ,
pillar = ,
pos = ,
util = ,
$ = util.$,
option = ;
//Controller = {
init: function () {
var t = this;
t._isStart = false;
t._timer = null;
(, t);
();
(, t);
();
},
addKeyListener: function () {
var t = this;
= function (e) {
var e = e || event;
var currKey = || || ;
if (currKey == 32) {
();
(e);
}
}
},
jump: function () {
var t = this;
if (!t._isStart) {
$('begin'). = 'none';
t._createTimer(function () {
();
();
();
$('score').innerHTML = + 1;
});
t._isStart = true;
} else {
();
}
},
hit: function () {
var t = this;
();
();
},
fall: function () {
var t = this;
();
();
},
over: function () {
var t = this;
clearInterval(t._timer);
$('end'). = 'block';
},
_createTimer: function (fn) {
var t = this;
t._timer = setInterval(fn, );
}
};
return self;
})(flappy || {})
as follows:
/**
* "Flappy Pig" v0.1.0 implemented by native javascript
* ====================================================
* @author keenwon
* Full source at
*/
var flappy = (function (self) {
'use strict';
var controller = ,
option = ,
pig = ,
pillar = ,
pos = ,
util = ,
$ = .$;
//Main program = {
init: function () {
var t = this;
t._isStart = false;
t._isEnd = false;
t._timer = null;
(, t);
();
(, t);
();
},
addKeyListener: function () {
var t = this;
= function (e) {
var e = e || event;
var currKey = || || ;
if (currKey == 32) {
if (!t._isEnd) {
();
} else {
();
}
(e);
}
}
},
jump: function () {
var t = this;
if (!t._isStart) {
$('start'). = 'none';
t._createTimer(function () {
();
();
();
$('score').innerHTML = + 1;
});
t._isStart = true;
} else {
();
}
},
hit: function () {
var t = this;
();
();
},
fall: function () {
var t = this;
();
();
},
over: function () {
var t = this;
clearInterval(t._timer);
t._isEnd = true;
$('end'). = 'block';
},
_createTimer: function (fn) {
var t = this;
t._timer = setInterval(fn, );
}
};
= function () {
();
}
return self;
})(flappy || {})
I hope this article will be helpful to everyone's JavaScript programming.