Html5游戏制作 弹球游戏Pong （可在线预览对战 ^ |
您所在的位置：网站首页 › 弹跳球球小游戏 › Html5游戏制作 弹球游戏Pong （可在线预览对战 ^ |
Html5游戏制作 弹球游戏Pong （可在线预览对战 ^
|
做了一个简单的 Html5 弹球游戏，模仿上古街机的游戏……(^ _ ^) . 今天更新访问地址，找个人一起对个战吧 http://h5demo.yyfuncdn.com/res/gameDemo/Pong/index.html 左侧控制 w 上 s 下； 右侧控制 上下箭头* 使用了PIXI框架做的（感觉挺靠谱），还原了游戏的基本功能玩法。分享下并附上全套可运行的源码。 下载地址 http://101.201.112.95/2021/HTML5Game01.zip 复制到浏览器 . 案例源码下载后，放到web环境下浏览器打开index.html就可以运行了 . 制作过程 一、制作显示界面显示部分首先创建应用，然后添加图片并设置显示位置。 使用了两张图片： 1、球图片 2、挡板图片 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 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) { //w leftMoveSpeed = -8; } else if(keyCode == 83) { //s leftMoveSpeed = 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) { //w leftMoveSpeed = 0; } else if(keyCode == 83) { //s leftMoveSpeed = 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 leftBlock.y = 550; } rightBlock.y += rightMoveSpeed; if(rightBlock.y 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 //左挡板 if(ball.x leftBlock.x - leftBlock.width / 2) { if(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) { if(ball.y rightBlock.y - rightBlock.height / 2) { if(isRightBlockCrash == false) { if(speedX //回弹角度增益 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 |
中间的虚线使用程序画的，分数显示使用文本Text对象制作的【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |