Little game "FlappyPig" implemented by pure javascript instance _ javascript skills

This article mainly introduces FlappyPig, a pure javascript-based mini-game, and analyzes in detail the related skills of the javascript-based mini-game FlappyPig, this section describes how to use javascript to perform page element movement, collision, event monitoring, and trigger. For more information, see the example in this article. Share it with you for your reference. The details are as follows:

Flappy Pig is a Web page "Flappy Bird" written using native javascript ". I also wondered why it took me a precious weekend to get it out, but now I want to share it with you.

Option. js is as follows:

Using/*** Flappy Pig implemented by native javascript v0.1.0 * ======================== =================* @ author keenwon * Full source at http://keenwon.com */var flappy = (function (self) {'use strict '; // set self. option = {// acceleration of gravity. The screen pixels are different from the actual physical meters. Therefore, the conversion speed of g: 400 exists. // The jumping speed of pig is reduced to v0: 400, // column movement speed vp: 2.5, // frequency, control the number of animation frames, default 20 ms frequency: 20, // number of levels: 100, // The blank starting with safeLift: 500, // floor height (related to the image) floorHeight: 64, // pigWidth: 33, // pigHeight: 30, // current pig height pigY: 300, // distance from pig to left, pigLeft: 80, // pillar Html pillarHtml :'
', // Column width pillarWidth: 45, // The height of the column between the upper and lower pillarGapY: 108, // The width of the column between the left and right pillargxs: 250, // The Base position value of the upper column (that is, the top value, which is related to css writing) pillarTop:-550, // The Base position value pillarBottom:-500} of the lower column }; return self;}) (flappy || {})

Util. js is as follows:

Using/*** Flappy Pig implemented by native javascript v0.1.0 * ======================== =================* @ author keenwon * Full source at http://keenwon.com */var flappy = (function (self) {'use strict '; // tool self. util = {preventDefaultEvent: function (event) {event = window. event | event; if (event) {if (event. preventDefault) {event. preventDefault ();} else {event. returnValue = false ;}}, $: function (id) {return document. getElementById (id) ;}, getChilds: function (obj) {var childs = obj. children | obj. childNodes, childsArray = new Array (); for (var I = 0, len = childs. length; I <len; I ++) {if (childs [I]. nodeType = 1) {childsArray. push (childs [I]) ;}} return childsArray ;}}; return self ;}) (flappy || {})

Pig. js is as follows:

Using/*** Flappy Pig implemented by native javascript v0.1.0 * ======================== =================* @ author keenwon * Full source http://keenwon.com */Var flappy = (function (self) {'use strict '; var option = self. option, $ = self. util. $; // pig self. pig = {Y: 0, // current pig height (bottom side) init: function (overCallback, controller) {var t = this; t. s = 0, // shift t. time = 0, // time t. $ pig = $ ('pig'); t. $ pig. style. left = option. pigLeft + 'px '; t. _ controller = controller; t. _ addListener (overCallback) ;}, // Add listener _ addListener: function (overCallback) {this. _ overCallback = overCallback;}, // start: function () {var t = this, interval = option. frequency/1000; t. s = option. v0 * t. time-t. time * t. time * option. g * 2; // vertical throwing motion formula t. Y = option. pigY + t. s; if (t. y> = option. floorHeight) {t. $ pig. style. bottom = t. Y + 'px ';} else {t. _ dead ();} t. time + = interval;}, // jump: function () {var t = this; option. pigY = parseInt (t. $ pig. style. bottom); t. s = 0; t. time = 0 ;}, // trigger when hitting the ground _ dead: function () {this. _ overCallback. call (this. _ controller) ;}, // handle hitting the ground fall: function () {var t = this; // throw to the ground and modify the height t. Y = option. floorHeight; t. $ pig. style. bottom = t. Y + 'px ';}, // handle hitting the column hit: function () {var t = this; // Fall var timer = setInterval (function () {t. $ pig. style. bottom = t. Y + 'px '; if (t. Y <= option. floorHeight) {clearInterval (timer);} t. y-= 12 ;}, option. frequency) ;}}; return self ;}) (flappy || {})

Pillar. js is as follows:

Using/*** Flappy Pig implemented by native javascript v0.1.0 * ======================== =================* @ author keenwon * Full source http://keenwon.com */Var flappy = (function (self) {'use strict '; var option = self. option, util = self. util, $ = util. $; // column self. pillar = {currentId:-1, // current column id init: function () {var t = this; // cache the conversion factor t at the upper and lower column positions. _ factor = option. pillarBottom-option. pillarGapY + 450; // s indicates a position. The column arriving at this position is the "current column". Even if it is close to the pig, it starts to calculate whether the pig has hit this column. 10 is the lifting amount. T. _ s = option. pigLeft + option. pigWidth + 10; t. _ render () ;}, // render the column to the DOM tree _ render: function () {var t = this, initleft = option. safeLift; t. left = 0; t. dom = document. createElement ('P'); t. dom. className = t. dom. id = 'pillarwrapper '; for (var I = 0, j = option. levels; I <j; I ++) {var el = document. createElement ('P'); el. innerHTML = option. pillarHtml; el. className = 'pillar '; el. id = 'pillar -' + I; el. style. left = initleft + 'px '; var childs = util. getChilds (el), topEl = childs [0], bottomEl = childs [1], pos = t. _ random (I); topEl. style. top = pos. top + 'px '; bottomEl. style. bottom = pos. bottom + 'px '; el. setAttribute ('top', 600 + pos. top); el. setAttribute ('bottom ', 0-pos. bottom); t. dom. appendChild (el); initleft + = option. pillargretrial;} $ ('screen '). appendChild (t. dom) ;}, // calculate the column position _ random: Function (I) {var t = this, x = Math. random (), h = Math. abs (Math. sin (I + 1) x) * 290; return {top: option. pillarTop + h, bottom: t. _ factor-h }}, // move the column: function () {var t = this; t. dom. style. left =-t. left + 'px '; t. _ find (t. left); t. left + = option. vp ;}, // locate the current pillar _ find: function (l) {var t = this, x = (t. _ s + l-option. safeLift)/option. pillargretrial, intX = parseInt (x); // intX is the current column If (x> 0 & t. currentId! = IntX & Math. abs (x-intX) <0.1) {t. currentId = intX ;}}; return self ;}) (flappy || {})

Position. js is as follows:

Using/*** Flappy Pig implemented by native javascript v0.1.0 * ======================== =================* @ author keenwon * Full source http://keenwon.com */Var flappy = (function (self) {'use strict '; var pig = self. pig, pillar = self. pillar, option = self. option, $ = self. util. $; // determine the position self. position = {init: function (overCallback, controller) {var t = this; t. pillarWrapper = $ ('pillarwrapper'); t. pigX1 = option. pigLeft, t. pigX2 = option. pigLeft + option. pigWidth, // left and right positions of pig, fixed t. _ controller = controller; t. _ addListener (overCallback) ;}, // Add listener _ addListener: function (overCallback) {this. _ overCallback = overCallback;}, judge: function () {var t = this, currentPillar = $ ('pillar-'+ pillar. currentId); if (pillar. currentId =-1) {return;} t. pigY2 = 600-pig. y; t. pigY1 = t. pigY2-option. pigHeight; // the upper and lower positions of pig t. pY1 = currentPillar. getAttribute ('top'); t. pY2 = currentPillar. getAttribute ('bottom '); t. pX1 = parseInt (currentPillar. style. left) + parseInt (t. pillarWrapper. style. left); t. pX2 = t. pX1 + option. pillarWidth; // console of the upper, lower, and left columns. log (t. pillarWrapper. style. left); if (option. pigLeft + option. pigWidth> = t. pX1 & option. pigLeft <= t. pX2) {if (t. pigY1 <t. pY1 | t. pigY2> t. pY2) {t. _ dead () ;}}, // trigger _ dead: function () {this. _ overCallback. call (this. _ controller) ;},}; return self ;}( flappy || {})

Controller. js is as follows:

Using/*** Flappy Pig implemented by native javascript v0.1.0 * ======================== =================* @ author keenwon * Full source http://keenwon.com */Var flappy = (function (self) {'use strict '; var pig = self. pig, pillar = self. pillar, pos = self. position, util = self. util, $ = util. $, option = self. option; // controller self. controller = {init: function () {var t = this; t. _ isStart = false; t. _ timer = null; pig. init (t. fall, t); pillar. init (); pos. init (t. hit, t); t. addKeyListener () ;}, addKeyListener: function () {var t = this; document. onkeydown = Function (e) {var e = e | event; var currKey = e. keyCode | e. which | e. charCode; if (currKey = 32) {t. jump (); util. preventDefaultEvent (e) ;}}, jump: function () {var t = this; if (! T. _ isStart) {$ ('begin '). style. display = 'none'; t. _ createTimer (function () {pig. start (); pillar. move (); pos. judge (); $ ('score '). innerHTML = pillar. currentId + 1;}); t. _ isStart = true;} else {pig. jump () ;}, hit: function () {var t = this; t. over (); pig. hit () ;}, fall: function () {var t = this; t. over (); pig. fall () ;}, over: function () {var t = this; clearInterval (t. _ timer); $ ('end '). style. display = 'block';}, _ createTimer: function (fn) {var t = this; t. _ timer = setInterval (fn, option. frequency) ;}}; return self ;}) (flappy || {})

Game. js is as follows:

Using/*** Flappy Pig implemented by native javascript v0.1.0 * ======================== =================* @ author keenwon * Full source http://keenwon.com */Var flappy = (function (self) {'use strict '; var controller = self. controller, option = self. option, pig = self. pig, pillar = self. pillar, pos = self. position, util = self. util, $ = self. util. $; // main program self. game = {init: function () {var t = this; t. _ isStart = false; t. _ isEnd = false; t. _ timer = null; pig. init (t. fall, t); pillar. init (); pos. init (t. hit, t); t. addKeyListener () ;}, addKeyListener: Function () {var t = this; document. onkeydown = function (e) {var e = e | event; var currKey = e. keyCode | e. which | e. charCode; if (currKey = 32) {if (! T. _ isEnd) {t. jump ();} else {window. location. reload ();} util. preventDefaultEvent (e) ;}}, jump: function () {var t = this; if (! T. _ isStart) {$ ('start '). style. display = 'none'; t. _ createTimer (function () {pig. start (); pillar. move (); pos. judge (); $ ('score '). innerHTML = pillar. currentId + 1;}); t. _ isStart = true;} else {pig. jump () ;}, hit: function () {var t = this; t. over (); pig. hit () ;}, fall: function () {var t = this; t. over (); pig. fall () ;}, over: function () {var t = this; clearInterval (t. _ timer); t. _ isEnd = true; $ ('end '). style. display = 'block';}, _ createTimer: function (fn) {var t = this; t. _ timer = setInterval (fn, option. frequency) ;}}; flappy. init = function () {self. game. init () ;}return self ;}) (flappy || {})

I hope this article will help you design javascript programs.