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

开始前的html页面
 
开始后的html游戏界面
 
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 rel="stylesheet" type="text/css" href="css/index.css"/>

</head>

<body>
<center>
<div id="gamePanel" tabindex="0">
<div class="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>
</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源文件:


代码如下:

// 砖类
var Brick = function(gamePanel) {

// 砖的dom元素
this.dom = null;

// 砖块所在的画布
this.gamePanel = gamePanel;

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

// 是否带有魔法棒
this.magic = null;

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

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

this.init();

}

Brick.prototype = {

// 初始化
init : function() {

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

},

// 为position: relative的Brick初始化位置
setPosition : function(x, y) {

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

},

// 为positon : relative的Brick初始化尺寸
setSize : function(width, height) {

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

},

// 初始化生成魔法棒
initMagic : function() {

var _this = this;
// 随机数
var random = parseInt(Math.random()*1000 + 1, 10);

var type = random % 5 == 0 ? "good" : random % 4 == 0 ? "bad" : "none";

// 新建一个魔法棒对象
var magic = new Magic(type);

this.magic = magic;

magic.initPosition(this);

// 将魔法棒添加进砖块中
this.gamePanel.appendChild(magic.dom);

magic.onEnd = function() {

_this.gamePanel.removeChild(magic.dom);

};

magic.animation(this.gamePanel.clientHeight);

},

// 击中后的动作
onEnd : function() {

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

}

}

魔法棒类代码即magic.js源文件实现如下:


代码如下:

// 魔法棒类
var Magic = function(type) {

// Magic的dom元素
this.dom = null;

// Magic的dom信息
this.left = 0;
this.top = 0;
this.width = 0;
this.height = 0;

this.type = type;

this.init();

}

Magic.prototype = {

// 魔法棒类型
magicType : {

"good" : "magic",
"bad" : "shortMagic",
"none" : ""

},

// 每次移动位移
movepy : 3,

// 移动速度
movespeed : 20,

// 初始化魔法棒
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);

},

// 魔法棒初始化位置
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 : function() {

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

},

// 魔法棒动画,height为游戏背景高度
animation : function(height) {

if (this.type == "none") {

return;

}

var _this = this;

// 向下移动函数
var downMove = function() {

_this.top = _this.top + _this.movepy;
_this.update();

// 判断魔法棒下移是否越界,是否击中stick
if (_this.top < height && !_this.isBeatStick()) {

setTimeout(downMove, _this.movespeed);

} else {

// 动画结束触发事件
_this.onEnd();

}

};

downMove();

},

// 动画结束触发事件,外部覆盖
onEnd : function() {},

// 魔法棒是否击中挡板以及击中后处理事件,外部覆盖
isBeatStick : function() {}

}

挡板类代码即stick.js源文件如下:


代码如下:

// 新建棒类
var Stick = function() {

// 飞机对应的dom元素
this.dom = null;

// 是否移动中
this.isMove = false;

// 移动的ID
this.moveId = null;

// 是否弹球中
this.isSend = false;

// 变大标记
this.bigCount = 0;

// 变小标记
this.smallCount = 0;

// 接棒的宽度变大变小时做存储
this.width = 0;

this.init();

}

Stick.prototype = {

// 游戏背景Dom
gamePanel : null,

// 游戏背景宽度
gameWidth : 0,

// 游戏背景高度
gameHeight : 0,

// 魔法棒移动速度
movepx : 10,

// 魔法棒移动频率
movesp : 30,

// 方向键值对应
keyCodeAndDirection : {

37 : "left",
39 : "right"

},

// 初始化
init : function() {

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

},

// 设置位置
setPosition : function(gamePanel, width, height) {

// 将魔法棒添加进游戏背景中
this.gamePanel = gamePanel;
this.gamePanel.appendChild(this.dom);

// 设置飞机的初始位置
this.dom.style.left = (width - this.dom.clientWidth)/2 + "px";
this.dom.style.top = height - this.dom.clientHeight + "px";

// 获取到游戏背景的宽和高
this.gameWidth = width;
this.gameHeight = height;

},

// 键盘按下事件
keydown : function(e) {

var keyCode = e.keyCode;

if (!this.isMove) {

this.move(keyCode);

}

},

// 键盘释放事件
keyup : function(e) {

// 判断是否为键盘释放
if (this.keyCodeAndDirection[e.keyCode]) {

// 停止移动
this.stopMove();

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

// 设置为非发弹中
this.isSend = false;

}

},

// 移动
move : function(keyCode) {

// 设置为移动中
this.isMove = true;
var _this = this;

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

}

},

// 向左移动
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();

}

},

// 向右移动
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();

}

},

// 变小
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";

},

// 变大
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";

}

},

// 停止移动
stopMove : function() {

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

},

// 发射弹球,外部接口,
onSendBall : function() {},

// 改分数外部接口
onChangeScore : function() {}

}

部分难点技术实现

通过键盘左右方向键移动挡板的代码实现:


代码如下:

// 键盘按下事件
keydown : function(e) {

var keyCode = e.keyCode;

if (!this.isMove) {

this.move(keyCode);

}

},

// 键盘释放事件
keyup : function(e) {

// 判断是否为键盘释放
if (this.keyCodeAndDirection[e.keyCode]) {

// 停止移动
this.stopMove();

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

// 设置为非发弹中
this.isSend = false;

}

},

// 移动
move : function(keyCode) {

// 设置为移动中
this.isMove = true;
var _this = this;

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

}

},

// 向左移动
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();

}

},

// 向右移动
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();

}

},

时间: 2013-09-21

java实现会反弹的小球示例

Java实现简单的球的弹射,碰到墙壁就反弹一下,代码如下  复制代码 代码如下: package tsct; import java.awt.Color;import java.awt.Graphics;import java.awt.Image;import java.awt.event.WindowStateListener;import java.io.File;import java.io.IOException; import javax.imageio.ImageIO;import

解析Java中的定时器及使用定时器制作弹弹球游戏的示例

在我们编程过程中如果需要执行一些简单的定时任务,无须做复杂的控制,我们可以考虑使用JDK中的Timer定时任务来实现.下面LZ就其原理.实例以及Timer缺陷三个方面来解析java Timer定时器. 一.简介       在java中一个完整定时任务需要由Timer.TimerTask两个类来配合完成. API中是这样定义他们的,Timer:一种工具,线程用其安排以后在后台线程中执行的任务.可安排任务执行一次,或者定期重复执行.由TimerTask:Timer 安排为一次执行或重复执行的任务.

java算法实现预测双色球中奖号码

双色球选号规则红球是1~33选6个,蓝球1~16选1个. 它有17721088种排列组合, 这个代码实现了如何将一组双色球号码 转换成第n个排列组合数字, 以及如何根据第n个排列组合数字生成一组双色球号码. 分析一下今年的中奖号码所隐含的排列组合序号,也许你会找到规律, 哈哈,或许你能用它算出下一次的中奖号码,赶快试试吧! DoubleColorBall.java import java.util.Arrays; public class DoubleColorBall { /** * 根据双色

使用基于jquery的gamequery插件做JS乒乓球游戏

我建议大家先学会些基础的JS,再学jquery,这样会更好接受些新的东西.今天我们要试着做个js经典游戏,打乒乓球的游戏,这款游戏大概是我做得最多次的了,我有用过xna.flash.js都做过同一款.先上张截图,不然大伙还不知道是什么东西. 它的演示地址是:http://www.lovewebgames.com/demo/gamepingbang/ 采用的技术是jquery+gamequery, jquery大家都知道是什么了,本文重点介绍下gamequery,gamequery是一款jquer

Android重力传感器实现滚动的弹球

熟知: 什么是传感器: 所谓传感器能够探测如光.热.温度.重力.方向 等等的功能! Android中提供传感器有哪些: 1.  加速度传感器(重力传感器)      2.  陀螺仪传感器      3.  光传感器      5.  恒定磁场传感器      6.  方向传感器      7.  恒定的压力传感器      8.  接近传感器      9.  温度传感器 一. 问题描述 Android中有多达11种传感器,不同的手机设备支持的传感器类型也不尽相同 1. 重力传感器 GV-sen

用js实现小球的自由移动代码

正在学习javascript 的朋友可以把它当作小练习动手做一做.加强自己的动手编码能力. 参考代码: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title>ggggg</title><link rel="stylesheet" type="text/css&qu

python开发的小球完全弹性碰撞游戏代码

完成这个小球的完全弹性碰撞游戏灵感来自于: 下面是我花了一周下班时间所编写的一个小球完全弹性碰撞游戏: 游戏初始化状态: 最下面的游标和修改小球的移动速度 源码部分: 复制代码 代码如下: #python tkinter#python version 3.3.2 from tkinter import * '''    判断    两个小球    {        圆心:A(x1,y1)  半径:r  X轴速度:Vax  Y轴速度:Vay        圆心:B(x2,y2)  半径:R  X轴

Java基于swing实现的弹球游戏代码

本文实例讲述了Java基于swing实现的弹球游戏代码.分享给大家供大家参考. 主要功能代码如下: 复制代码 代码如下: package Game; import java.awt.Graphics; import java.awt.Insets; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.util.ArrayList; import java.util.Random;

Java实力弹弹球实现代码

先看看效果图: 直接上代码了. 微调按钮加画布画几个圆,再实现监听... package cn.hncu.threadDemo.thread2; import java.awt.Canvas; import java.awt.Color; import java.awt.Graphics; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.FocusEven

用JS实现3D球状标签云示例代码

Matter: 1.发现实例不足,无法悬停(有待解决) 2.无法系统随机自动上色(有待解决) 首先使用标签云的一家高知名度的网站---照片共享网站Flickr.标签云的设计者是交互设计师Stewart Butterfield.之后,标签云被诸如del.Technorati等网站采纳. 首次公布的外观标签云(或至少是一个加权名单),可归结起来主要是"潜意识档案" ,在 Douglas Coupland的Microserfs( 1995 ) .在Lester Leaps Out,威尔士诗人

一个很有趣3D球状标签云兼容IE8

看见一个很有趣的标签云,3D球状,兼容 IE 8,亲测可用!其他版本没有测试.觉得挺有意思就拿来记录下来,学习学习,本文下方会放出我看的文章地址,先看一下效果: 接下来是代码,html + css + js,不是基于jQuery的,所以不需要引入,代码复制下来就可以看到效果: <div id="div1"> <a href="http://www.cnblogs.com/ntt1219/" rel="external nofollow&q

jquery 3D 标签云示例代码

相关选项 zoom: 90 初始的缩放度 min_zoom: 25 max_zoom: 120 zoom_factor: 2 - 鼠标滚轮的缩放速度 rotate_factor: -0.45 - 鼠标移动时球体旋转的数量.正数将反向旋转 fps: 10 - 定义每秒动画更新的次数 centrex: 250 - 在container div中水平方向旋转中心 centrey: 250 在container div中垂直方向旋转中心 min_font_size: 12 max_font_size:

three.js实现3D模型展示的示例代码

由于项目需要展示3d模型,所以对three做了点研究,分享出来 希望能帮到大家 先看看效果: three.js整体来说 不是很难 只要你静下心来研究研究 很快就会上手的 首先我们在页面上需要创建一个能够放置3D模型的画布 也可以说是初始化 Three var WIDTH,HEIGHT; var renderer; function initThree() { WIDTH = document.documentElement.clientWidth/2; <!--{foreach from=$re

利用js实现前后台传送Json的示例代码

无论使用什么框架都存在着从controller向Html页面或者jsp页面传递数据的问题,最常用的方式是传递Json字符串.以前对这块知识有些模糊,现在整理一下. [Jquery基本方法] 实现传值常用的是Jquery以及内部封装的ajax.首先看一下jquery的get()和post()语法.get()方法是从服务器获得数据,其主要参数就是获得后台请求地址,以及负责处理的回调函数: $.get(URL,callback); $("button").click(function(){

django js实现部分页面刷新的示例代码

例子中,我用的是显示机器上的进程信息的表格,获取不同的机器的进程信息时,更新这个展示信息的表格,如下: 当我在输入框中输入ip时,我希望只是更新这个表格,页面其他部分不变,实现方式如下: 1.在原页面中设置这个表格的id为pstable <table class="table table-striped" id="pstable"> <thead> <tr> <th>user</th> <th>

node.js 用socket实现聊天的示例代码

本文介绍了node.js 用socket实现聊天的示例代码,分享给大家,也给自己留个笔记,具体如下: 服务器搭建 app.js const http = require("http"); const express = require("./express"); //创建一个服务 const server = http.createServer(express); //监听服务端口 server.listen(8001,()=>{ console.log(&q

JS实现3D图片旋转展示效果代码

本文实例讲述了JS实现3D图片旋转展示效果代码.分享给大家供大家参考.具体如下: 这是一段JavaScript代码,围绕成3D模型样式的JavaScript图片旋转展示代码,这里为了演示方便,将图片替换成了数字,预留出了图片的位置,这样速度快些,会HTML的朋友都知道用时候该怎么做.本图片旋转需要手功控制,每点击一下,图片旋转一次,很方便. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-3d-pic-scroll-show-style-c

js实现的tab标签切换效果代码分享

这是一款基于js实现的tab标签切换效果,是一款无需jQuery,原生javascript制作的tab切换效果源码.点击上面的标题即可实现对应页面的切换功能,非常具有实用价值. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js实现的tab标签切换效果代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans

jQuery(js)获取文字宽度(显示长度)示例代码

今天遇到了获取文字宽度的问题,查了很久,终于在一个国外网站上找到了方法,但是不能直接使用,于是修改了一下,成功使用到了项目中,在这里分享给大家. 首先在body标签最后添加一个子标签: 复制代码 代码如下: <span id="ruler">test</span> 然后添加相应的css代码: 复制代码 代码如下: #ruler { visibility: hidden; white-space: nowrap; font-size: 24px; } 接下来直接在