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

最新推荐文章于 2024-07-22 14:50:39 发布
最新推荐文章于 2024-07-22 14:50:39 发布
阅读量2.3k 收藏 7
点赞数 2
分类专栏： Html5游戏制作 H5游戏 游戏制作 文章标签： html html5 javascript 游戏 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fujian87232/article/details/115037280
版权

做了一个简单的 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) { //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;
        }
    }


    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) { //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 < 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);
}
弹了个球
关注
专栏目录
js-game-pong:这是对经典 Atari 游戏 Pong! 的再现。 使用 HTML5 画布和 JavaScript
05-31
JS游戏乒乓！ 这是对经典 Atari 游戏 Pong! 的再现。 使用 HTML5 画布和 JavaScript。 在此处查看实时版本： :
python设计经典Pong 游戏
g20083959的博客
06-28 1418
coursera课程上的第四个课程mini-project 设计经典的ponggame 游戏的介绍和说明参见http://www.ponggame.org/ 在具体求解过程中的步骤如下 1，初始化各个变量（canvas尺寸，paddle尺寸，中间线，） 2，spawn_ball（）函数的编写，此函数作用可以在初始game中进行调用，同时每次状态结束时怎样产生新的状态，初始变量的设置包括设定
用 html+css+javaScript 写弹弹球小游戏
最新发布
weixin_43720253的博客
07-22 695
弹弹球小游戏：小球在规定区域内弹动，碰到上、左、右三侧时会反弹。玩家使用鼠标控制底部挡板使小球反弹。碰到底部则弹出结束弹窗。改变速度滑动条的值会动态调整小球的移动速度，小球的初始位置和方向随机化。页面效果代码如下
推荐开源项目：HTML5版的复古游戏 - Pac-Man
gitblog_00032的博客
06-06 434
推荐开源项目：HTML5版的复古游戏 - Pac-Man pacmanPac-Man game written in HTML5 + CSS3 + jQuery with Canvas. This WebApp is a Responsive Web Design (RWD) website.项目地址:https://gitcode.com/gh_mirrors/pacman2/pacman 1...
这里我会为您提供几个简单的小游戏代码示例，分别用 Python（使用 pygame 库）、JavaScript（使用浏览器中的 canvas）和 Java（使用基本的控制台输出）来实现。
HunterLawrence的博客
04-29 367
这里我会为您提供几个简单的小游戏代码示例，分别用 Python（使用 pygame 库）、JavaScript（使用浏览器中的 canvas）和 Java（使用基本的控制台输出）来实现。
网页设计代码
YJH040325的博客
01-13 971
<title>爱家居</title>网站首页</span><span>床和床垫</span><span>卧室纺织品</span><span>灯具照明</span><span class="search">输入商品名称
HTML5弹球游戏.zip
03-20
在这个"HTML5弹球游戏.zip"压缩包中，包含了一个名为"Pong"的游戏，这表明我们即将探讨的是一个基于HTML5技术构建的弹球游戏。 游戏开发，特别是HTML5游戏开发，已经成为现代前端开发者的重要技能之一。HTML5游戏的...
非html5实现js版弹球游戏示例代码
10-26
在本示例中，我们将探讨如何使用JavaScript而非HTML5 Canvas来实现一个简单的弹球游戏。虽然HTML5的Canvas提供了一种强大的方式来绘制图形和动画，但JavaScript同样能够通过操作DOM元素来创建交互式的游戏体验。 ...
非html5实现js版弹球游戏示例代码共22页.pdf.z
10-31
在本资源中，我们关注的是一个使用JavaScript而非HTML5实现的弹球游戏示例。虽然HTML5提供了Canvas等强大的图形绘制API，使得开发此类游戏更为便捷，但此项目选择使用纯JavaScript来创建游戏，展示了JavaScript在...
src-0.04.rar_breakout_pinball_sdl_sdl 游戏_弹球
09-19
"breakout_pinball_sdl_sdl 游戏_弹球"这部分标签则揭示了压缩包内容的核心：一个基于SDL库开发的弹球类游戏，可能融合了Breakout和Pinball的元素。Breakout是一款经典的街机游戏，玩家通过控制一块可移动的挡板反弹...
HTML5弹珠砖块游戏源代码
07-24
通过研究这个HTML5弹珠砖块游戏的源代码，开发者不仅可以了解如何使用HTML5和JavaScript构建游戏，还可以学习到游戏设计的基本原则，如游戏循环、动画制作、碰撞检测等。这对于提升Web开发技能和理解游戏开发流程...
H5弹球游戏
06-24
H5弹球游戏
html5弹球游戏
06-12
一个用html5开发的弹球小游戏，涉及技术包括画布的使用及碰撞检测
HTML5 canvas弹球小游戏
04-27
用HTML5 canvas开发的简易弹球小游戏，原理简单。
HTML5弹球打砖块小游戏.zip
05-23
HTML5弹球打砖块小游戏，左、右箭头键或移动鼠标，控制小球打砖块。
【HTML5游戏】碰撞球游戏
burningdzb的博客
06-13 848
1.对h5自己的理解 ​ html用于将内容表现出来，css用于格式,javascript用于动态表示加各种特性 2.代码 ​ html代码，先用一个div弄一个计分板，style里画了两个方块，一个球，一个背景的格式，然后放在一个新的div里面. ​ 声明是HTML5，规定是utf-8编码，header页眉，footer页脚，JavaScript代码放在所有代码结束之前，防止javascript...
Python游戏——Pong
HellowZheng的博客
05-16 572
大家还记得小时候玩的游戏——“Pong”吗？ 今天，我们使用Python还原这个经典游戏。 整活！ from turtle import Screen import turtle as t import time t.tracer(0) #加速画图 #屏幕左边 side = 400 top = 300 #创建小球 ball = t.Turtle() ball.penup()#抬笔，移动中不留下痕迹 ball.shape("circle") ball.color("darkorange") ball_x
基于HTML体育运动兵乓球网站项目的设计与实现【学生网页设计作业源码】
qq_365392777
10-23 428
????文章目录​​一、????‍????网站题目​​​​二、✍️网站描述​​​​三、????网站介绍​​​​四、????网站演示​​​​五、⚙️ 网站代码​​​​????HTML结构代码​​​​????CSS样式代码​​​​六、???? 如何让学习不再盲目​​​​七、????更多干货​​一、????‍????网站题目????校园篮球网页设计、⚽足球体育运动、????体育游泳运动、????兵乓球 、????网球...
html5弹球游戏的实现,html5版弹球游戏
weixin_33128703的博客
05-30 421
按住鼠标左键拖动方块，避免小球撞到你1.[代码][HTML]代码//var stage = new createjs.Stage("canvas");$(function(){var game = new Game("canvas");game.setOverHandler(function(t){$("#hint").html("游戏结束");});});您坚持了0秒您的浏览器不支持HTML52...
JavaScript非HTML5弹球游戏示例及代码
"非html5实现js版弹球游戏示例代码教程" 本文将深入探讨如何使用JavaScript而非HTML5来构建一款简单的弹球游戏。虽然HTML5自带的Canvas API使得弹球游戏开发变得更加直观，但纯JavaScript同样能够实现这类游戏的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值