Shulou(Shulou.com)05/31 Report--

This article introduces the "JavaScript object-oriented how to achieve gluttonous Snake game" related knowledge, in the actual case operation process, many people will encounter such a dilemma, then let the editor lead you to learn how to deal with these situations! I hope you can read it carefully and be able to achieve something!

1 tool object (Tools.js)

Because we want to generate food randomly, we first extract the method of generating random integers in the range of min-max. The randomNum attribute is the generated random number.

Function Tools (min,max) {min = Math.ceil (min); max = Math.floor (max); this.randomNum=Math.floor (Math.random () * (max-min + 1)) + min; / / with maximum and minimum}

2 Food object (Food.js)

/ / to avoid naming conflicts, use the self-calling function (function () {var foodDivs= []; / 1) to define the food object function Food (options) {options=options | | {}; / / the object this.backgroundColor=options.backgroundColor encapsulating attributes | | 'green'; this.width=options.width | | 20; this.height=options.height | | 20; this.x=options.x | | 0; this.y=options.y | | 0 | } / / 2 render to map Food.prototype.render=function (map) {removeFood (); var div=document.createElement ('div'); this.x=new Tools (0grademap.offsetWidth.this.widthmer1) .roomNum; this.y=new Tools (0memmap.offsetHeightMaple this.heightMuir 1) .roomNum; div.style.width=this.width+'px'; div.style.height=this.height+'px'; div.style.backgroundColor=this.backgroundColor Div.style.left=this.x*this.width+'px'; div.style.top=this.y*this.height+'px'; div.style.position = 'absolute'; map.appendChild (div); foodDivs.push (div);} function removeFood () {for (var ifoodDivs.removeChild (foodDivs [I]) / / first delete foodDivs.splice from the page (iMagne1); / / delete the element at the specified location / / then delete it from the array} window.Food=Food;// expose Food before the outside can access}) ()

3 Snake object (Snake.js)

(function () {var snakeDivs= []; / / 1 Snake constructor function Snake (options) {options=options | | {}; this.body= [{XRV 3MagneyRed2MagneBGCC Lectra blue'}, {x1RV 2LYLV 2dBG CRAV blue'}, {x1VOLLING 2LING BG CRAV blue'}]; this.width=options.width | | 20 This.height=options.height | | 20; this.direction=options.direction | | 'right';} / / 2 render to map Snake.prototype.render=function (map) {removeSnake (); for (This.body [I] .x = this.body [I-1] .x; this.body [I] .y = this.body [I-1] .y } / / Snakehead Mobile var head=this.body [0]; switch (this.direction) {case 'left': head.x-=1; break; case' up': head.y-=1; break; case 'right': head.x+=1 Break; case 'down': head.y+=1; break;} if (head.x===food.x&&head.y===food.y) {/ / Snakehead coincides with food var last= this.body.length-1] This.body.push ({x:last.x, y:last.y, bgc:last.bgc}); food.render (map); / / this includes the operation of removing the previous food}} function removeSnake () {for (var i=snakeDivs.length-1) I > = 0 xss_clean -) {snakeDivs [I] [xss_clean] .removeChild (snakeDivs [I]); / / first delete snakeDivs.splice from the page (iMagazine 1); / / delete the specified location element / / then actually delete} window.Snake=Snake;} from the array) ()

4 Game objects (Game.js)

The main purpose is to control the beginning of the game and the meaning of the behavior corresponding to the keys in the game, organizing the two objects, snake and food.

(function () {var that; function Game () {this.food=new Food (); this.snake=new Snake (); that=this;} Game.prototype.start=function (map) {this.snake.render (map); this.food.render (map); var head=this.snake.body [0]; var span=document.getElementById ('tag'); var timerId=setInterval (function () {that.snake.move (that.food,map); that.snake.render (map)) If ((head.x > map.offsetWidth/that.snake.width-2) | | head.xmap.offsetHeight/that.snake.height-2) | | head.y

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.