开始后的html游戏界面
Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > Non-html5 implementation of js version of pinball game sample code_javascript skills

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

WBOY
Release： 2016-05-16 17:21:55
Original
1325 people have browsed it

The html page before starting
Non-html5 implementation of js version of pinball game sample code_javascript skills
The html game interface after starting
Non-html5 implementation of js version of pinball game sample code_javascript skills
html page layout, that is, the source code of the index.html file is as follows:

Copy code The code is as follows:





pinball game







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( );

}

},

Related labels：
html5 js
source：php.cn
Previous article：JavaScript enhanced custom event event_javascript skills Next article：JavaScript enhanced custom callback example_javascript skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
How do I get my image to appear on the page's main display? What I want to do is receive some photos using NASAAPI. These photos are then displayed on...
From 2024-04-06 15:33:12
0
1
433
Can PDF files run HTML5 and Javascript? I have a stupid idea to try and make a program that won't be blocked on any computer since...
From 2024-04-05 12:57:00
0
1
456
What is the difference between enctype and formenctype in HTML5? I'm just wondering what's the difference between the attributes enctype and formenctype in...
From 2024-04-02 11:47:56
0
1
275
Make the page mobile-friendly? I have many web pages and some websites. The thing is, I'm a beginner. I'm using basic htm...
From 2024-04-01 20:42:38
0
1
259
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template