Pre-start HTML page
After the beginning of the HTML game interface
HTML page layout, i.e. index.html file source code is as follows:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Pinball Games </title>
<link rel= "stylesheet" type= "Text/css" href= "Css/index.css"/>
<body>
<center>
<div id= "Gamepanel" tabindex= "0" >
<div class= "score" > Score:
<span id= "Score" >0</span>
</div>
<div id= "startbtn" onclick= "Start ()" ></div>
</div>
</center>
<script type= "Text/javascript" src= "Js/magic.js" ></script>
<script type= "Text/javascript" src= "Js/brick.js" ></script>
<script type= "Text/javascript" src= "Js/ball.js" ></script>
<script type= "Text/javascript" src= "Js/stick.js" ></script>
<script type= "Text/javascript" src= "Js/game.js" ></script>
</body>
INDEX.CSS File source code is as follows:
Copy Code code as follows:
#gamePanel {
width:504px;
height:504px;
Background:black;
position:relative;
}
#gamePanel. score{
font-size:20px;
Color:white;
Position:absolute;
left:0;
top:0;
z-index:9999;
}
#gamePanel. bullet{
width:5px;
height:15px;
Position:absolute;
Background:url (.. /img/bullet.png);
Overflow:hidden;
}
#gamePanel. stick{
width:80px;
height:18px;
Position:absolute;
Background:blue;
}
#gamePanel. ball{
width:15px;
height:15px;
Position:absolute;
Background:url (.. /img/ball.gif);
}
#gamePanel. Brick {
width:28px;
height:28px;
position:relative;
Background:url (.. /img/brick.gif);
Float:left;
}
#gamePanel. Hidebrick {
width:28px;
height:28px;
position:relative;
Background:black;
Float:left;
}
#gamePanel. Magic {
width:27px;
height:11px;
Position:absolute;
Background:green;
}
#gamePanel. shortmagic {
width:28px;
height:12px;
Position:absolute;
Background:yellow;
}
#gamePanel. bingo{
width:18px;
height:18px;
Position:absolute;
Background:url (.. /img/bingo2.png);
}
#startBtn {
border-width:20px;
Border-style:solid;
Border-color:black Black Black Green;
Position:absolute;
left:240px;
top:240px;
Cursor:pointer;
width:0px;
height:0px;
Overflow:hidden;
}
The JavaScript part is divided into 5 source files, namely ball.js (Ball), brick.js (Brick Class), Game.js (game Class), Magic.js (Magic Wand Class), Stick.js (baffle Class)
The ball code is implemented as follows:
Copy Code code as follows:
Ball
var Ball = function () {
Pinball DOM elements
This.dom = null;
Whether to activate
This.isfirst = true;
Moving direction of Bouncing ball
This.direction = null;
This.init ();
}
Ball.prototype = {
Lateral moving speed of pinball ball
Movepx:3,
Velocity of projectile moving vertically
Movepy:2,
Moving frequency of Bouncing ball
MOVESP:20,
Elastic Ball moving frequency mapping
Movespmap: {
1:75,
2:65,
3:50,
4:40
},
Class
Init:function () {
This.dom = document.createelement ("div");
This.dom.className = "Ball";
},
Set the initialization position of the pinball, x and Y coordinates
Setposition:function (x, y) {
This.dom.style.left = x + "px";
This.dom.style.top = y + "px";
},
Pinball animation, is moving, incoming parameters for the game background of the width and height
Animation:function (gamewidth, gameheight, stick) {
var _this = this;
Actual lateral moving speed, left or right
var _movepx = this.dom.offsetLeft > GAMEWIDTH/2? -1*this.movepx:this.movepx;
var _movepy = this.dom.offsetTop > GAMEHEIGHT/2? This.movepy: -1*this.movepy;
Handling Move functions
var process = function () {
X,y coordinates of the pinball
var left = _this.dom.offsetleft;
var top = _this.dom.offsettop;
Do you want to turn the other way
if (left <= 0 | | | | >= gamewidth-_this.dom.clientwidth) {
_MOVEPX *=-1;
}
var Iscrashstick = _this. Oncheckcrashstick ();
var iscrashball = _this. Oncheckcrashbrick ();
To decide if you want to turn the other way.
if (Top < 0 | | iscrashstick | | iscrashball) {
_movepy *=-1;
}
Move Down
top = top + _movepy;
left = left + _movepx;
Set Pinball Position
_this.dom.style.top = top + "px";
_this.dom.style.left = left + "px";
if (Top > Gameheight) {
_this.onend ();
Alert ("You Lose");
} else {
settimeout (process, _THIS.MOVESP);
}
Judging the direction of bouncing ball
if (_movepx > 0 && _movepy < 0) {
_this.direction = "Rightup";
Return
}
if (_movepx > 0 && _movepy > 0) {
_this.direction = "Rightdown";
Return
}
if (_movepx < 0 && _movepy < 0) {
_this.direction = "Leftup";
Return
}
if (_movepx < 0 && _movepy > 0) {
_this.direction = "Leftdown";
Return
}
};
Start moving
Process ();
},
External interface to detect if a magic wand was hit
Oncheckcrashstick:function () {},
External interface to detect if a brick was hit
Oncheckcrashbrick:function () {},
Pinball End Event
Onend:function () {},
Game Over
Gameover:function () {}
}
The Brick class code is as follows Brick.js source file:
Copy Code code as follows:
Brick Class
var Brick = function (Gamepanel) {
Dom Elements of Bricks
This.dom = null;
The canvas where the bricks are
This.gamepanel = Gamepanel;
Whether to activate
This.islive = true;
Is it a magic wand?
This.magic = null;
This.width = 28;
This.height = 28;
This.left = 0;
this.top = 0;
This.init ();
}
Brick.prototype = {
Class
Init:function () {
This.dom = document.createelement ("div");
This.dom.className = "Brick";
},
Initialization position for position:relative brick
Setposition:function (x, y) {
This.left = x;
This.top = y;
},
Brick Initialization dimensions for positon:relative
Setsize:function (width, height) {
This.width = width;
This.height = height;
},
Initialize to generate magic wand
Initmagic:function () {
var _this = this;
Random number
var random = parseint (Math.random () *1000 + 1, 10);
var type = random% 5 = 0? "Good": random% 4 = 0? "Bad": "None";
Create a new Magic wand object
var magic = new Magic (type);
This.magic = Magic;
Magic.initposition (this);
To add a magic wand into the bricks
This.gamePanel.appendChild (Magic.dom);
Magic.onend = function () {
_this.gamepanel.removechild (Magic.dom);
};
Magic.animation (This.gamePanel.clientHeight);
},
The action after the hit
Onend:function () {
This.islive = false;
This.dom.className = "Hidebrick";
This.initmagic ();
}
}
Magic Wand Class code that is Magic.js source file implementation is as follows:
Copy Code code as follows:
Magic Wand Class
var Magic = function (type) {
Magic DOM Elements
This.dom = null;
Dom Information for Magic
This.left = 0;
this.top = 0;
this.width = 0;
this.height = 0;
This.type = type;
This.init ();
}
Magic.prototype = {
Magic Wand Type
Magictype: {
"Good": "Magic",
"Bad": "Shortmagic",
"None": ""
},
Each move displacement
Movepy:3,
Moving speed
MOVESPEED:20,
Initialize Magic Wand
Init:function () {
This.dom = document.createelement ("div");
This.dom.className = This.magictype[this.type];
This.dom.style.display = "None";
This.width = parseint (This.dom.style.width, 10);
This.height = parseint (This.dom.style.height, 10);
},
Magic Wand Initialization Position
Initposition:function (Brick) {
This.left = Brick.left;
This.top = Brick.top;
This.dom.style.left = this.left + "px";
This.dom.style.top = this.top + "px";
},
Update location
Update:function () {
This.dom.style.left = this.left + "px";
This.dom.style.top = this.top + "px";
},
Magic Wand Animation, height for game background Heights
Animation:function (height) {
if (This.type = = "None") {
Return
}
var _this = this;
Move function down
var downmove = function () {
_this.top = _this.top + _this.movepy;
_this.update ();
Judge whether the magic wand moves out of bounds or hits stick
if (_this.top < height &&!_this.isbeatstick ()) {
SetTimeout (Downmove, _this.movespeed);
} else {
Animation End Trigger Event
_this.onend ();
}
};
Downmove ();
},
Animation End trigger event, external overlay
Onend:function () {},
Whether the magic wand hits the bezel and handles events after hitting the external overlay
Isbeatstick:function () {}
}
The baffle class code is the Stick.js source file as follows:
Copy Code code as follows:
New Stick Class
var Stick = function () {
The corresponding DOM element of the airplane
This.dom = null;
Whether to move in
This.ismove = false;
The ID of the move
This.moveid = null;
Whether or not to play the ball
This.issend = false;
Variable size marker
This.bigcount = 0;
Change small mark
This.smallcount = 0;
The width of the bar becomes larger and the hour is stored.
this.width = 0;
This.init ();
}
Stick.prototype = {
Game Background Dom
Gamepanel:null,
Game Background width
gamewidth:0,
Game Background Height
gameheight:0,
Magic Wand Moving Speed
Movepx:10,
Magic Wand Moving Frequency
Movesp:30,
Directional key values correspond
Keycodeanddirection: {
Panax Notoginseng: "Left",
: "Right"
},
Class
Init:function () {
This.dom = document.createelement ("div");
This.dom.className = "stick";
},
Set Location
Setposition:function (gamepanel, width, height) {
Add Magic wand to the game background
This.gamepanel = Gamepanel;
This.gamePanel.appendChild (This.dom);
Set the initial position of the aircraft
This.dom.style.left = (width-this.dom.clientwidth)/2 + "px";
This.dom.style.top = height-this.dom.clientheight + "px";
Get the width and height of the game background
This.gamewidth = width;
This.gameheight = height;
},
Keyboard press Event
Keydown:function (e) {
var keycode = E.keycode;
if (!this.ismove) {
This.move (KeyCode);
}
},
Keyboard Release Events
Keyup:function (e) {
Determine if the keyboard is free
if (This.keycodeanddirection[e.keycode]) {
Stop Moving
This.stopmove ();
else if (E.keycode = 32) {
Set to non-projectile
This.issend = false;
}
},
Move
Move:function (keycode) {
Set to move in
This.ismove = true;
var _this = this;
To determine the direction of movement
Switch (This.keycodeanddirection[keycode]) {
Case ' left ': {
This.moveid = setinterval (function () {_this.moveleft ();}, _THIS.MOVESP);
Break
}
Case ' right ': {
This.moveid = setinterval (function () {_this.moveright ();}, _THIS.MOVESP);
Break
}
Default:break;
}
},
Move left
Moveleft:function () {
var left = this.dom["Offsetleft"];
left = left-this.movepx >= 0? left-this.movepx:0;
This.dom.style["Left" = left + "px";
if (left = = 0) {
This.stopmove ();
}
},
Move right
Moveright:function () {
var left = this.dom["Offsetleft"];
var maxdistance = this.gamewidth-this.dom.clientwidth;
left = left + this.movepx <= maxdistance? Left + this.movepx:maxDistance;
This.dom.style["Left" = left + "px";
if (left = = maxdistance) {
This.stopmove ();
}
},
Become smaller
Changesmall:function () {
if (This.smallcount >= 1) {
Return
} else {
This.dom.style.width = + "px";
This.smallcount + +;
This.bigcount >= 1? This.bigcount--: This.bigcount + 0;
}
This.dom.style.left = parseint (This.dom.style.left, ten) + + "px";
This.dom.style.width = + "px";
},
Become larger
Changebig:function () {
if (This.bigcount >= 1) {
Return
} else {
This.dom.style.width = + "px";
This.bigcount + +;
This.smallcount >= 1? This.smallcount--: This.smallcount + 0;
}
if (parseint (this.dom.style.left) <= 75) {
This.dom.style.width = parseint (This.dom.style.width, ten) + + parseint (This.dom.style.left, ten) + "px";
This.dom.style.left = 0 + "px";
Return
else if (This.dom.style.width + + parseint (this.dom.style.left) >= this.gamePanel.clientWidth) {
This.dom.style.left = parseint (This.dom.style.left, ten)-the "PX";
This.dom.style.width = this.dom.style.width + + "px";
Return
} else {
This.dom.style.left = parseint (This.dom.style.left, Ten)-+ "px";
This.dom.style.width = + "px";
}
},
Stop Moving
Stopmove:function () {
This.ismove = false;
Clearinterval (This.moveid);
},
Projectile ball, external interface,
Onsendball:function () {},
To change the fractional external interface
Onchangescore:function () {}
}
Some difficult techniques to achieve
The key to move the bezel around the keyboard is to implement the code:
Copy Code code as follows:
Keyboard press Event
Keydown:function (e) {
var keycode = E.keycode;
if (!this.ismove) {
This.move (KeyCode);
}
},
Keyboard Release Events
Keyup:function (e) {
Determine if the keyboard is free
if (This.keycodeanddirection[e.keycode]) {
Stop Moving
This.stopmove ();
else if (E.keycode = 32) {
Set to non-projectile
This.issend = false;
}
},
Move
Move:function (keycode) {
Set to move in
This.ismove = true;
var _this = this;
To determine the direction of movement
Switch (This.keycodeanddirection[keycode]) {
Case ' left ': {
This.moveid = setinterval (function () {_this.moveleft ();}, _THIS.MOVESP);
Break
}
Case ' right ': {
This.moveid = setinterval (function () {_this.moveright ();}, _THIS.MOVESP);
Break
}
Default:break;
}
},
Move left
Moveleft:function () {
var left = this.dom["Offsetleft"];
left = left-this.movepx >= 0? left-this.movepx:0;
This.dom.style["Left" = left + "px";
if (left = = 0) {
This.stopmove ();
}
},
Move right
Moveright:function () {
var left = this.dom["Offsetleft"];
var maxdistance = this.gamewidth-this.dom.clientwidth;
left = left + this.movepx <= maxdistance? Left + this.movepx:maxDistance;
This.dom.style["Left" = left + "px";
if (left = = maxdistance) {
This.stopmove ();
}
},
