非html5实现js版弹球游戏示例代码

开始前的html页面

非html5实现js版弹球游戏示例代码

 
开始后的html游戏界面

非html5实现js版弹球游戏示例代码

 
html页面布局,即index.html文件源码如下:

复制代码 代码如下:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>弹球游戏</title>
<link type="text/css" href="https://www.jb51.net/css/index.css"/>

</head>

<body>
<center>
<div tabindex="0">
<div>分数:
<span>0</span>
</div>
<div></div>
</div>
</center>
<script type="text/javascript" src="https://www.jb51.net/js/magic.js"></script>
<script type="text/javascript" src="https://www.jb51.net/js/brick.js"></script>
<script type="text/javascript" src="https://www.jb51.net/js/ball.js"></script>
<script type="text/javascript" src="https://www.jb51.net/js/stick.js"></script>
<script type="text/javascript" src="https://www.jb51.net/js/game.js"></script>
</body>
</html>


index.css文件源码如下:

复制代码 代码如下:


#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;

}


JavaScript部分分为5个源文件,即ball.js(球类)、brick.js(砖类)、game.js(游戏类)、magic.js(魔法棒类)、stick.js(挡板类)

球类代码实现如下:

复制代码 代码如下:


// 球类
var Ball = function() {

// 弹球dom元素
this.dom = null;

// 是否激活
this.isFirst = true;

// 弹球移动方向
this.direction = null;

this.init();

}

Ball.prototype = {

// 弹球横向移动速度
movepx : 3,

// 弹球纵向移动速度
movepy : 2,

// 弹球移动频率
movesp : 20,

// 弹球移动频率映射
movespMap : {

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

},

// 初始化
init : function() {

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

},

// 设置弹球的初始化位置,x与y坐标
setPosition : function(x, y) {

this.dom.style.left = x + "px";
this.dom.style.top = y + "px";

},

// 弹球动画,就是移动,传入参数为游戏背景的宽与高
animation : function(gameWidth, gameHeight, stick) {

var _this = this;

// 实际的横向移动速度,左或者右
var _movepx = this.dom.offsetLeft > gameWidth/2 ? -1*this.movepx : this.movepx;
var _movepy = this.dom.offsetTop > gameHeight/2 ? this.movepy : -1*this.movepy;

// 处理移动函数
var process = function() {

// 弹球的x,y坐标
var left = _this.dom.offsetLeft;
var top = _this.dom.offsetTop;

// 是否要调转方向
if (left <= 0 || left >= gameWidth - _this.dom.clientWidth) {

_movepx *= -1;

}

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

// 判断是否想上调转方向
if (top < 0 || isCrashStick || isCrashBall) {

_movepy *= -1;

}

// 向下移动
top = top + _movepy;
left = left + _movepx;

// 设置弹球位置
_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);

}

// 判断弹球移动方向
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;

}

};

// 开始移动
process();

},

// 外部接口,检测是否撞到魔法棒
OnCheckCrashStick : function() {},

// 外部接口,检测是否撞到砖块
OnCheckCrashBrick : function() {},

// 弹球结束事件
onend : function() {},

// 游戏结束
gameover : function() {}

}


砖类代码如下brick.js源文件:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdzjzw.html