Native JavaScript Object-oriented development childhood classic play brick games

Knowledge Points: JS Object-oriented, JS motion collision detection, JS random color, dynamic generation dynamic monitoring implementation principle, motion realization principle, modular programming idea, event monitoring package, page refresh event, call and bind change this point and so on.

HTML code:

<div id="wrap"></div><div id="ball"></div><div id="ward"></div><div id="score">0分</div><div id="gameover">    <p>总分:74</p>    <span>确定</span></div>

CSS code:

    <style type= "Text/css" > * {margin:0; padding:0; cursor:none;}        a {text-decoration:none;}        UL, Li {list-style:none;}        body {font-size:14px; font-family: "Microsoft Jas Black"; Background:url ("images/bg.jpg") top/cover;} #ball {width:15px; height:15px; background: #b4ff0d; border-radius:50%; position:absolute; top:0; left:0; box-shado w:0 0 9px 9px #f3ff67;  } #ward {width:120px; height:30px; z-index:999; Background-color: #336688; border-radius:10px; box-shadow:0 0 4PX #333333; Position:absolute; left:0; } #score {width:100px; height:100px; font-size:40px; position:absolute; right:40px; top:40px; color: #ff2541 ;        } #wrap {width:90%; height:500px; position:relative; top:100px; left:0; right:0; margin:auto;} #wrap Div {width:45px; height:15px; border:1px solid #ff645b; position:absolute; Background:rgb (255,); box-sh adow:0 0 9px 1px rgb (255, 187, 136) inset; top:0; left:0; TraNsform-origin:top Center} #gameover {position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; wid th:300px; height:200px; box-shadow:0 0 4px #222222; Background-color: #e1e1e1; Display:none} #gameover p {width:100%; height:40px; text-align:center; font-size:36px; color: #336688; margi n-top:50px; } #gameover span {width:60%; height:40px; display:block; margin:38px auto 0; text-align:center; font-size:20 px Background: #336688; Color: #ffffff; border-radius:10px; line-height:40px; } </style>

JavaScript code:

<script type= "Text/javascript" >/* JavaScript are strictly case-sensitive a!==a; 1. Which elements are required the initial x position of the block in the area of the ball block the initial Y position 2. To have those behaviors initialize init init to hold the initial Method if instantiating an object calling all methods is cumbersome, so a one-time solution to create bricks creatbrick for loops generate bricks calculate each brick initialized to             P and left compute pyramid centerline position initialize small ball Initialize small ball x direction move vector initialize ball y direction move vector initialize ball width and height             Initialize ball start Motion event Initialize ball position x, y initialize bezel initialize bezel position x, y Initialize Mouse listener event             The movement of the bezel in the center follows the mouse x-direction move the baffle motion boundary around the ball moving the ball movement method Requestanimationframe Small ball x y vector self-amplification collision Detection {1: Ball and browser border collision Bounce X| |    Y 2: Ball and bezel collision rebound y 3. Ball and brick collision rebound y && remove Bricks} */  var oball = document.queryselector ("#ball");  Ball var oward = document.queryselector ("#ward"); Bezel VAr oscore = document.queryselector (' #score ');//scoreboard var owrap = document.queryselector (' #wrap '); Brick area var over = document.queryselector (' #gameover ');        End Function Breakout (Ball, Ward, score, wrap, over) {//Play Bricks Small Game object constructor This.ball = basketball;        This.ward = Ward;        This.scores = score;        This.wrap = wrap;        This.over = over;        this.x = 0;        This.y = 0;    This.score = 0;    } Breakout.prototype = {//prototype method Init:function () {//Initialize system This.ballstar ();  Initialize the ball this.creatbrick ();    Create Bricks This.wardmove ();  Bezel Move}, Creatbrick:function () {//Bricks initialize var x = DOCUMENT.DOCUMENTELEMENT.OFFSETWIDTH/2- Document.documentElement.offsetWidth *. 05,//Set Center position w = 45 * 2,//set transverse spacing datum value h = 15 * 2; Sets the longitudinal spacing datum value for (var i = 1; I <= 8; i++) {//loops the DIV 8 layer for (var j = 0; J < i * 2-1; j+ +) {//The number of bricks per layer is the number of layers *2-1                   var brick = document.createelement ("div");                    Brick.style.top = (i-1) * H + ' px ';                    Brick.style.left = x-(i * W) + (J * W) + ' px ';                This.wrap.appendChild (brick); }}}, Wardmove:function () {//bezel initialization this.ward.style.top = window.innerheight-  + ' px ';              Initialize the top position of the bezel This.ward.style.left = this.x-60 + ' px '; Initialize the left position of the bezel centered this.addevent (document, ' MouseMove ', This.mouseMove.bind (this));            Monitor mouse Movement}, Ballstar:function () {//ball initialization var this = this;    This.y = window.innerheight-200;       The position of the initialization coordinates x is moved up at the bottom of the window 200px this.x = WINDOW.INNERWIDTH/2;  The position of the initialization coordinates y window middle part this.ball.style.top = this.y + ' px '; The top value of the initialized ball is y This.ball.style.left = this.x + ' px ';                 The left value of the initialized ball is x this.ball.speed = 10; Initializes the speed of the ball this.ball.width = 15;                  Initialize the width of the ball this.ball.height = 15;                  Initialize the height of the ball Document.onclick = function () {//Click Start Game, Ball Motion This.ballmove (); Ball Move}},//Bezel move mousemove:function (e) {//mouse movement, bezel follow mouse Sport e = e | |                              window.event;    Event object compatibility handling var _left = E.PAGEX-THIS.WARD.OFFSETWIDTH/2; Guaranteed mouse movement, the middle position of the bezel sync mouse position _left = Math.min (Window.innerwidth-this.ward.offsetwidth, _left);                                         The bezel should not move right beyond the right edge of the screen _left = Math.max (0, _left);                                The bezel should not move left beyond the left edge of the screen this.ward.style.left = _left + ' px ';            By setting the left value of the bezel to implement the bezel movement}, Ballmove:function () {//ball start motion Document.onclick = null; Clear the document's Click event to prevent the reset motion this.ball.xspeed = this.ball.speed; Initialize the ball x motion speed and direction + for left-To the right this.ball.yspeed =-this.ball.speed;//Initialize the ball y motion speed and direction + for up-down function auto () {     The motion function Auto realizes cyclic this.x + = This.ball.xspeed by requestanimationframe recursive call;     x represents the current transverse position + = lateral movement speed 10 each time in their original position based on +10 this.y + = This.ball.yspeed;                   Y represents the current transverse position + = lateral movement speed 10 each time in its original position based on +10 This.crash ();   Collision Detection This.ball.style.left = this.x + ' px ';    Ball motion Assignment X-axis Motion this.ball.style.top = this.y + ' px '; Requestanimationframe (Auto.bind (this)) for the y-axis motion assignment of a small ball;        The native JS animation is implemented according to the CPU speed to implement the update} auto.call (this);        }, Crash:function () {var maxWidth = window.innerwidth-this.ball.offsetwidth;     Browser Left border = Browser width-the width of the ball var maxheight = window.innerheight-this.ball.offsetheight;               Browser Right border = browser height-the height of the ball if (this.y >= maxheight) {//the ball falls off after the game is over This.gameover ();                                     } if (this.x >= maxWidth) {this.ball.xspeed *=-1;                                          When the ball touches the right wall, the transverse movement speed takes the opposite direction movement this.x = maxWidth; Reset Ball Position} if (This.x < 0) {//Touch left wall reset lateral move speed and reset horizontal                The position is 0 this.ball.xspeed = this.ball.speed;            this.x = 0;                if (This.y < 0) {//after touching the top wall, reset the longitudinal movement speed and the longitudinal position to 0                This.ball.yspeed = This.ball.speed;            This.y = 0; }//Bezel Collision Detection Xweizhi if (Math.Abs (This.x-(This.ward.offsetLeft + (THIS.WARD.CLIENTWIDTH/2))) <                && Math.Abs (this.y-this.ward.offsettop-30) < () {var color = This.rancolor ();                This.ward.style.background = color;          This.ball.yspeed *=-1;      This.y = this.ward.offsettop-40; } for (var i = this.wrap.children.length-1; I >= 0; i--) {var ballmx = This.ball.offsetLef                T + (THIS.BALL.WIDTH/2);                var ballmy = This.ball.offsetTop + (THIS.BALL.HEIGHT/2);                var brickmx = (This.wrap.children[i].offsetleft + this.wrap.offsetLeft) + (45/2);                var brickmy = (this.wrap.children[i].offsettop + this.wrap.offsetTop) + (15/2); if (Math.Abs (BALLMX-BRICKMX) <= && math.abs (ballmy-brickmy) <=) {THIS.BALL.YSP                    Eed *=-1;                    This.y = brickmy;                    This.wrap.removeChild (This.wrap.children[i]);                    if (This.wrap.children.length = = 0) {this.gameover ();                } this.scorechange ();            }}}, Scorechange:function () {this.score++; This.scores.InnerHTML = this.score + ' min ';            }, Gameover:function () {this.over.style.display = ' block ';            this.over.children[0].innerhtml = ' Total score: ' + this.score;            var all = Document.queryselectorall (' * '); for (var i = 0; i < all.length; i++) {all[i].style.cursor = ' auto '} this.ward.st            Yle.display = ' None ';            This.ball.style.display = ' None ';            This.over.children[1].onclick = function () {window.location.reload (); }},/* Getstyle:function (Ele, Curr) {//Get property value return Ele.currentstyle? parseint (ele.currents         Tyle[curr]): parseint (getComputedStyle (ele, NULL) [Curr]);  },*/addevent:function (element, E, fn) {//Event listener return element.attachevent? Element.attachevent (' on ' +        E, FN): Element.addeventlistener (E, FN, false);            }, Rancolor:function () {//random color var color = ' # '; For (Var i = 0; I < 6;        i++) {color + = ' 0123456789abcdef ' [Math.floor (Math.random () * +)]} return color;    },} var breakout = new Breakout (Oball, Oward, Oscore, Owrap, over);    Breakout.init (); 200 lines to play with ....//200 rows of play ...</script>

Interested in learning to learn the Web front end can come to the Web front end Qun "189394454" can get 2018 of the latest web front-end learning materials for free.

Native JavaScript Object-oriented development childhood classic play brick games