Non-html5 implementation of js version of pinball game sample code_javascript skills

The html page before starting

The html game interface after starting

html page layout, that is, the source code of the index.html file is as follows:

Copy code The code is as follows:

Score:
0

< ;script type="text/javascript" src="js/ball.js">

The source code of the index.css file is as follows:

Copy the code The code is 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 type), brick.js (brick type), game.js (Game class), magic.js (Magic Wand class), stick.js (Baffle class)

The ball code is implemented as follows:

Copy Code The code is as follows:

// Ball
var Ball = function() {

// Pinball dom element
this.dom = null;

// Whether Activate
this.isFirst = true;

// Pinball movement direction
this.direction = null;

this.init();

}

Ball.prototype = {

// Lateral movement speed of pinball
movepx: 3,

// Longitudinal movement speed of pinball
movepy: 2 ,

// Pinball movement frequency
movesp : 20,

// Pinball movement frequency map
movespMap : {

1 : 75,
2 : 65,
3 : 50,
4 : 40

},

// Initialization
init : function() {

this.dom = document.createElement("div");
this.dom.className = "ball";

},

// Set the initial 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 means movement. The incoming parameters are the width and height of the game background.
animation: function(gameWidth, gameHeight, stick) {

var _this = this;

// Actual lateral movement 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;

// Process move function
var process = function () {

// x, y coordinates of the pinball
var left = _this.dom.offsetLeft;
var top = _this.dom.offsetTop;

// Whether to reverse direction
if (left <= 0 || left >= gameWidth - _this.dom.clientWidth) {

_movepx *= -1;

}

var isCrashStick = _this.OnCheckCrashStick();
var isCrashBall = _this.OnCheckCrashBrick();

// Determine whether you want to change the direction up
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);

}

// Determine the moving direction of the pinball
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, detect whether it hits the magic wand
OnCheckCrashStick: function() {},

// External interface, detect whether it hits the brick
OnCheckCrashBrick: function () {},

// Pinball end event
onend : function() {},

// Game over
gameover : function() {}

}

The brick code is as follows brick.js source file:

Copy code The code is as follows:

// Brick class
var Brick = function(gamePanel) {

// Brick’s dom element
this.dom = null;

//Canvas where the bricks are located
this.gamePanel = gamePanel;

// Whether to activate
this.isLive = true;

// Whether to have Magic Wand
this.magic = null;

this.width = 28;
this.height = 28;

this.left = 0;
this.top = 0;

this.init();

}

Brick.prototype = {

// Initialization
init : function() {

this.dom = document.createElement("div");
this.dom.className = "brick";

},

// is position: relative Brick initialization position
setPosition: function(x, y) {

this.left = x;
this.top = y;

},

//Initialize the size of Brick for positon: relative
setSize: function(width, height) {

this.width = width;
this.height = height;

},

//Initialize the 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);

// Add the magic wand to the brick
this.gamePanel.appendChild(magic.dom);

magic.onEnd = function() {

_this .gamePanel.removeChild(magic.dom);

};

magic.animation(this.gamePanel.clientHeight);

},

/ / Action after hit
onEnd : function() {

this.isLive = false;
this.dom.className = "hideBrick";
this.initMagic();

}

}

The magic wand class code, that is, the magic.js source file, is implemented as follows:

Copy the code The code is as follows:

//Magic wand class
var Magic = function(type) {

// Magic’s dom element
this.dom = null;

// Magic DOM information
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" : ""

},

// every time Movement displacement
movepy: 3,

// Movement speed
movespeed: 20,

// Initialization 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 position
update : function() {

this.dom.style.left = this.left "px";
this.dom.style.top = this .top "px";

},

// Magic wand animation, height is the height of the game background
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();

// Determine whether the magic wand moves down beyond the bounds, whether Hit stick
if (_this.top < height && !_this.isBeatStick()) {

setTimeout(downMove, _this.movespeed);

} else {

//Animation end trigger event
_this.onEnd();

}

};

downMove();

} ,

//Animation end trigger event, external coverage
onEnd : function() {},

// Whether the magic wand hits the baffle and handles the event after hitting it, external Override
isBeatStick: function() {}

}

The bezel class code is the stick.js source file as follows:

Copy code The code is as follows:

// Create a new stick class
var Stick = function() {

// DOM element corresponding to the aircraft
this.dom = null;

/ / Whether the ball is moving
this.isMove = false;

// ID of the move
this.moveId = null;

// Whether the pinball is playing
this. isSend = false;

// Make the mark bigger
this.bigCount = 0;

// Make the mark smaller
this.smallCount = 0;

// Store the width of the stick as it becomes larger or smaller
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,

/ / Direction key value corresponds to
keyCodeAndDirection: {

37 : "left",
39 : "right"

},

// Initialization
init : function() {

this.dom = document.createElement("div");
this.dom.className = "stick";

},

//Set the position
setPosition: function(gamePanel, width, height) {

// Add the 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 Event
keyup: function(e) {

// Determine whether the keyboard is released
if (this.keyCodeAndDirection[e.keyCode]) {

// Stop moving
this.stopMove();

} else if (e.keyCode == 32) {

// Set to non-shooting
this.isSend = false;

}

},

// Move
move: function(keyCode) {

// Set to moving
this. isMove = true;
var _this = this;

// Determine the movement direction
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();

}

},

// Make smaller
changeSmall : function() {

if ( this.smallCount >= 1) {

return;

} else {

this.dom.style.width = 80 "px";
this. smallCount ;

this.bigCount >= 1 ? this.bigCount -- : this.bigCount 0;

}

this.dom.style.left = parseInt( this.dom.style.left, 10) 20 "px";
this.dom.style.width = 40 "px";

},

// Get bigger
changeBig : function() {

if (this.bigCount >= 1) {

return;

} else {

this. dom.style.width = 80 "px";
this.bigCount ;

this.smallCount >= 1 ? this.smallCount -- : this.smallCount 0;

}

if (parseInt(this.dom.style.left, 10) <= 75 ) {

this.dom.style.width = parseInt(this.dom.style.width, 10) 75 parseInt(this.dom.style.left, 10) "px";
this.dom.style.left = 0 "px";

return;

} else if (this.dom.style.width 150 parseInt(this.dom.style.left, 10) >= this.gamePanel.clientWidth) {

this.dom.style.left = parseInt(this .dom.style.left, 10) - 150 "px";
this.dom.style.width = this.dom.style.width 150 "px";

return;

} else {

this.dom.style.left = parseInt(this.dom.style.left, 10) - 75 "px";
this.dom.style.width = 150 " px";

}

},

// Stop moving
stopMove: function() {

this.isMove = false;
clearInterval(this.moveId);

},

// Launch pinball, external interface,
onSendBall: function() {},


//Change score external interface
onChangeScore: function() {}

}

Implementation of some difficult technologies

Code implementation for moving the bezel through the left and right arrow keys of the keyboard:

Copy code The code is as follows:

// Keyboard press event
keydown : function(e) {

var keyCode = e.keyCode;

if ( !this.isMove) {

this.move(keyCode);

}

},

// Keyboard release event
keyup: function(e) {

// Determine whether the keyboard is released
if (this.keyCodeAndDirection[e.keyCode]) {

// Stop moving
this.stopMove( ;

},

// Move
move : function(keyCode) {

// Set to moving
this.isMove = true;
var _this = this;

// Determine the movement direction
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( );

}

},