做了一个简单的 Html5 弹球游戏，模仿上古街机的游戏……(^ _ ^)

.
今天更新访问地址，找个人一起对个战吧
http://h5demo.yyfuncdn.com/res/gameDemo/Pong/index.html

左侧控制 w 上 s 下；右侧控制上下箭头*

介绍

使用了PIXI框架做的（感觉挺靠谱），还原了游戏的基本功能玩法。分享下并附上全套可运行的源码。

下载地址
http://101.201.112.95/2021/HTML5Game01.zip 复制到浏览器

.
案例源码下载后，放到web环境下浏览器打开index.html就可以运行了

完整代码

<html><head><script src="pixi.js"></script></head><body></body><script>//创建一个应用app，宽度 400、高度 400的显示区域。var app = new PIXI.Application(800,600);//将应用app的显示区域添加到浏览器中document.body.appendChild(app.view);//画中线var line = new PIXI.Graphics();app.stage.addChild(line);line.beginFill(0xFF3300);line.lineStyle(4, 0xffffff, 1);for(var i = 0; i < 40; i ++) {line.moveTo(400, i * 15);line.lineTo(400, i * 15 + 10);}//左侧挡板var leftBlock = new PIXI.Sprite.fromImage("block.jpg");app.stage.addChild(leftBlock);leftBlock.width = 20;leftBlock.height = 100;leftBlock.anchor.x = leftBlock.anchor.y = 0.5;leftBlock.x = 40;leftBlock.y = 300;//右侧挡板var rightBlock = new PIXI.Sprite.fromImage("block.jpg");app.stage.addChild(rightBlock);rightBlock.width = 20;rightBlock.height = 100;rightBlock.anchor.x = rightBlock.anchor.y = 0.5;rightBlock.x = 760;rightBlock.y = 300;//文字样式var style = {fontFamily: 'Arial',fontSize: 80,fill:'#ffffff',}//左侧分数var leftScore = new PIXI.Text("0", style);app.stage.addChild(leftScore);leftScore.anchor.x = leftScore.anchor.y = 0.5;leftScore.x = 200;leftScore.y = 70;//右侧分数var rightScore = new PIXI.Text("0", style);app.stage.addChild(rightScore);rightScore.anchor.x = rightScore.anchor.y = 0.5;rightScore.x = 600;rightScore.y = 70;//球var ball = new PIXI.Sprite.fromImage("ball.jpg");app.stage.addChild(ball);ball.width = 10;ball.height = 10;ball.anchor.x = ball.anchor.y = 0.5;ball.x = 200;ball.y = 300;//分数var leftScoreNum = 0;var rightScoreNum = 0;//左右挡板移动速度var leftMoveSpeed = 0; var rightMoveSpeed = 0; document.onkeydown = function (e) {var e = e || window.event;  //标准化事件对象var keyCode = e.keyCode;if(keyCode == 87) { //wleftMoveSpeed = -8;} else if(keyCode == 83) { //sleftMoveSpeed = 8;}if(keyCode == 38) { //上rightMoveSpeed = -8;} else if(keyCode == 40) { //下rightMoveSpeed = 8;}console.log(e.keyCode) //上87 下83 左85 右88}document.onkeyup = function (e) {var e = e || window.event;  //标准化事件对象var keyCode = e.keyCode;if(keyCode == 87) { //wleftMoveSpeed = 0;} else if(keyCode == 83) { //sleftMoveSpeed = 0;}if(keyCode == 38) { //上rightMoveSpeed = 0;} else if(keyCode == 40) { //下rightMoveSpeed = 0;}}var ballSpeed = 3;var ballSpeedAngle = 1/4 * Math.PI;app.ticker.add(animate);function animate() {leftBlock.y += leftMoveSpeed;if(leftBlock.y < 50) {leftBlock.y = 50;}if(leftBlock.y > 550) {leftBlock.y = 550;}rightBlock.y += rightMoveSpeed;if(rightBlock.y < 50) {rightBlock.y = 50;}if(rightBlock.y > 550) {rightBlock.y = 550;}var speedX = Math.cos(ballSpeedAngle) * ballSpeed;var speedY = Math.sin(ballSpeedAngle) * ballSpeed;ball.x += speedX;ball.y += speedY;//碰撞if(ball.y > 600) {ballSpeedAngle = -ballSpeedAngle;}if(ball.y < 0) {ballSpeedAngle = -ballSpeedAngle;}if(ball.x > 800) {//左边得分addScore(1);}if(ball.x < 0) {//右边得分addScore(2);}blockCrash(speedX);}var isLeftBlockCrash = false;//挡板与球的碰撞function blockCrash(speedX) {//左挡板if(ball.x < leftBlock.x + leftBlock.width / 2 && ball.x > leftBlock.x - leftBlock.width / 2) {if(ball.y < leftBlock.y + leftBlock.height / 2 && ball.y > leftBlock.y - leftBlock.height / 2) {if(isLeftBlockCrash == false) {if(speedX > 0) {ballSpeedAngle = -(ballSpeedAngle - Math.PI);} else {//回弹角度增益ballSpeedAngle = (ball.y - leftBlock.y)/50;ballSpeed = 10;}isLeftBlockCrash = true;}} else {isLeftBlockCrash = false;}} else {isLeftBlockCrash = false;}//右挡板if(ball.x < rightBlock.x + rightBlock.width / 2 && ball.x > rightBlock.x - rightBlock.width / 2) {if(ball.y < rightBlock.y + rightBlock.height / 2 && ball.y > rightBlock.y - rightBlock.height / 2) {if(isRightBlockCrash == false) {if(speedX < 0) {ballSpeedAngle = -(ballSpeedAngle - Math.PI);} else {//回弹角度增益ballSpeedAngle = Math.PI - (ball.y - rightBlock.y)/50;ballSpeed = 10;}isRightBlockCrash = true;}} else {isRightBlockCrash = false;}} else {isRightBlockCrash = false;}}//记分function addScore(type) {if(type == 1) {leftScoreNum ++;leftScore.text = leftScoreNum;ballSpeedAngle = 0;} else {rightScoreNum ++;rightScore.text = rightScoreNum;ballSpeedAngle = Math.PI;}//重置小球ball.x = 400;ball.y = 300;ballSpeed = 3;}</script>
</html>

制作过程

一、制作显示界面

显示部分首先创建应用，然后添加图片并设置显示位置。
使用了两张图片： 1、球图片 2、挡板图片

中间的虚线使用程序画的，分数显示使用文本Text对象制作的

代码拆解

1）创建应用

//创建一个应用app，宽度 400、高度 400的显示区域。
var app = new PIXI.Application(800,600);
//将应用app的显示区域添加到浏览器中
document.body.appendChild(app.view);

2）添加左右挡板

//左侧挡板
var leftBlock = new PIXI.Sprite.fromImage("block.jpg");
app.stage.addChild(leftBlock);
leftBlock.width = 20;
leftBlock.height = 100;
leftBlock.anchor.x = leftBlock.anchor.y = 0.5;
leftBlock.x = 40;
leftBlock.y = 300;//右侧挡板
var rightBlock = new PIXI.Sprite.fromImage("block.jpg");
app.stage.addChild(rightBlock);
rightBlock.width = 20;
rightBlock.height = 100;
rightBlock.anchor.x = rightBlock.anchor.y = 0.5;
rightBlock.x = 760;
rightBlock.y = 300;

3）绘制中线

var line = new PIXI.Graphics();
app.stage.addChild(line);
line.beginFill(0xFF3300);
line.lineStyle(4, 0xffffff, 1);
for(var i = 0; i < 40; i ++) {line.moveTo(400, i * 15);line.lineTo(400, i * 15 + 10);
}

4）添加小球

var ball = new PIXI.Sprite.fromImage("ball.jpg");
app.stage.addChild(ball);
ball.width = 10;
ball.height = 10;
ball.anchor.x = ball.anchor.y = 0.5;
ball.x = 200;
ball.y = 300;

5）添加左右得分显示

//文字样式
var style = {fontFamily: 'Arial',fontSize: 80,fill:'#ffffff',
}//左侧分数
var leftScore = new PIXI.Text("0", style);
app.stage.addChild(leftScore);
leftScore.anchor.x = leftScore.anchor.y = 0.5;
leftScore.x = 200;
leftScore.y = 70;//右侧分数
var rightScore = new PIXI.Text("0", style);
app.stage.addChild(rightScore);
rightScore.anchor.x = rightScore.anchor.y = 0.5;
rightScore.x = 600;
rightScore.y = 70;

二、制作控制功能

添加键盘事件，左侧挡板使用 w、s 键控制上下；右侧挡板使用上、下按钮控制。

代码拆解

1）定义挡板移动速度，并通过键盘事件控制速度大小

//左右挡板移动速度
var leftMoveSpeed = 0;
var rightMoveSpeed = 0; document.onkeydown = function (e) {var e = e || window.event;  //标准化事件对象var keyCode = e.keyCode;if(keyCode == 87) { //wleftMoveSpeed = -8;} else if(keyCode == 83) { //sleftMoveSpeed = 8;}if(keyCode == 38) { //上rightMoveSpeed = -8;} else if(keyCode == 40) { //下rightMoveSpeed = 8;}console.log(e.keyCode) //上87 下83 左85 右88
}document.onkeyup = function (e) {var e = e || window.event;  //标准化事件对象var keyCode = e.keyCode;if(keyCode == 87) { //wleftMoveSpeed = 0;} else if(keyCode == 83) { //sleftMoveSpeed = 0;}if(keyCode == 38) { //上rightMoveSpeed = 0;} else if(keyCode == 40) { //下rightMoveSpeed = 0;}
}

2）添加帧频函数，让挡板按照定义的速度上下移动移动

app.ticker.add(animate);function animate() {leftBlock.y += leftMoveSpeed;if(leftBlock.y < 50) {leftBlock.y = 50;}if(leftBlock.y > 550) {leftBlock.y = 550;}rightBlock.y += rightMoveSpeed;if(rightBlock.y < 50) {rightBlock.y = 50;}if(rightBlock.y > 550) {rightBlock.y = 550;}
}

三、制作弹球动画

制作挡板接球反弹功能，可以根据接球的位置决定反弹的角度，如果未接到球，对方得1分。

代码拆解

1）定义小球移动速度及移动方向变量

var ballSpeed = 3;
var ballSpeedAngle = 1/4 * Math.PI;

2）在帧频函数中制作小球移动功能

var speedX = Math.cos(ballSpeedAngle) * ballSpeed;
var speedY = Math.sin(ballSpeedAngle) * ballSpeed;ball.x += speedX;
ball.y += speedY;

3）小球碰撞屏幕上下边缘反弹

//碰撞
if(ball.y > 600) {ballSpeedAngle = -ballSpeedAngle;
}
if(ball.y < 0) {ballSpeedAngle = -ballSpeedAngle;
}

四、制作接球及得分功能

制作挡板接球反弹功能，可以根据接球的位置决定反弹的角度，如果未接到球，对方得1分。

代码拆解

1）添加挡板反弹功能

var isLeftBlockCrash = false;
//挡板与球的碰撞
function blockCrash(speedX) {//左挡板if(ball.x < leftBlock.x + leftBlock.width / 2 && ball.x > leftBlock.x - leftBlock.width / 2) {if(ball.y < leftBlock.y + leftBlock.height / 2 && ball.y > leftBlock.y - leftBlock.height / 2) {if(isLeftBlockCrash == false) {if(speedX > 0) {ballSpeedAngle = -(ballSpeedAngle - Math.PI);} else {//回弹角度增益ballSpeedAngle = (ball.y - leftBlock.y)/50;ballSpeed = 10;}isLeftBlockCrash = true;}} else {isLeftBlockCrash = false;}} else {isLeftBlockCrash = false;}//右挡板if(ball.x < rightBlock.x + rightBlock.width / 2 && ball.x > rightBlock.x - rightBlock.width / 2) {if(ball.y < rightBlock.y + rightBlock.height / 2 && ball.y > rightBlock.y - rightBlock.height / 2) {if(isRightBlockCrash == false) {if(speedX < 0) {ballSpeedAngle = -(ballSpeedAngle - Math.PI);} else {//回弹角度增益ballSpeedAngle = Math.PI - (ball.y - rightBlock.y)/50;ballSpeed = 10;}isRightBlockCrash = true;}} else {isRightBlockCrash = false;}} else {isRightBlockCrash = false;}}

2）添加计算得分的函数

//记分
function addScore(type) {if(type == 1) {leftScoreNum ++;leftScore.text = leftScoreNum;ballSpeedAngle = 0;} else {rightScoreNum ++;rightScore.text = rightScoreNum;ballSpeedAngle = Math.PI;}//重置小球ball.x = 400;ball.y = 300;ballSpeed = 3;}

3）在帧频中添加当小球碰移动到屏幕左右边缘时，得分函数的调用

if(ball.x > 800) {//左边得分addScore(1);
}
if(ball.x < 0) {//右边得分addScore(2);
}

Html5游戏制作弹球游戏Pong （可在线预览对战 ^_^）

介绍

完整代码

制作过程

一、制作显示界面

代码拆解

二、制作控制功能

代码拆解

三、制作弹球动画

代码拆解

四、制作接球及得分功能

代码拆解

最新文章

热门文章

Html5游戏制作 弹球游戏Pong （可在线预览对战 ^_^）

介绍

完整代码

制作过程

一、制作显示界面

代码拆解

二、制作控制功能

代码拆解

三、制作弹球动画

代码拆解

四、制作接球及得分功能

代码拆解

最新文章

热门文章

Html5游戏制作弹球游戏Pong （可在线预览对战 ^_^）