<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html5打乒乓球小游戏代码</title>
<style>
html {
text-align: center;
}
</style>
<script src="js/p5.min.js"></script>
<script src="js/p5.dom.min.js"></script>
</head>
<body>
<script>
var player;
var computer;
var ball;
var playerServe;
var goalWaitPeriod = false;
// for sparks effect on goal
var sparks = [];
// for lightning effect before serve
var lightningForge;
// for paddle animations
var isPlayerForcePush = false;
var isCompForcePush = false;
var xoff = 0.0;
function setup() {
var iHeight = window.innerHeight <= 542 ? window.innerHeight - 20 : 522;
var iWidth = window.innerWidth <= 957 ? window.innerWidth - 20 : 937;
createCanvas(iWidth, iHeight);
player = new Player();
computer = new Computer();
ball = new Ball(width/2, height/2);
scoreboard = new Scoreboard();
playerServe = true;
// indicator animation that a serve is coming
lightningForge = new LightningForge();
textSize(32);
textFont("Futura");
}
function draw() {
if (goalWaitPeriod) {
// Screen Shakes (number 13 chosen for extra spookiness)
translate(random(-13, 13), random(-13, 13));
}
background(25);
stroke(255);
line(width/2, 0, width/2, height);
player.update();
if (keyIsDown(UP_ARROW)) {
player.move(0, -7);
} else if (keyIsDown(DOWN_ARROW)) {
player.move(0, 7);
}
player.show();
if (isPlayerForcePush) {
player.paddle.forceUpdate('player');
}
computer.update();
if (isCompForcePush) {
computer.paddle.forceUpdate('computer');
}
computer.show();
text(scoreboard.playerScore + " / 7", width/2 - 140, 60);
text(scoreboard.computerScore + " / 7", width/2 + 60, 60);
for (var i = sparks.length - 1; i >= 0; i--) {
sparks[i].update();
sparks[i].show();
if (sparks[i].done()) {
sparks.splice(i, 1);
}
}
if (scoreboard.gameOver()) {
fill(25, 123);
noStroke();
rect(0, 0, width, height);
fill(255);
var result = scoreboard.playerScore > scoreboard.computerScore ? "You win! " : "You lose! ";
text(result + scoreboard.playerScore + " to " + scoreboard.computerScore + ".", width/2 - 130, height/2 - 40);
text("Press spacebar to play again.", width/2 - 220, height/2);
} else {
if (!goalWaitPeriod) {
if (lightningForge.forgeIsFormed()) {
ball.update();
ball.show();
} else {
lightningForge.update();
lightningForge.show();
}
}
}
}
function keyPressed() {
// if game over and spacebar is pressed
if (scoreboard.gameOver && keyCode === 32) {
scoreboard.resetScore();
}
}
function Paddle(x, y, width, height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.xspeed = 0;
this.yspeed = 0;
this.forcePushTime = 0;
this.show = function() {
if (isPlayerForcePush) {
fill(255);
} else {
fill(240);
}
rect(this.x, this.y, this.width, this.height, 5);
}
this.forceUpdate = function(pType) {
if (this.forcePushTime < 6) {
this.x -= 1;
this.width += 2;
this.y -= 1;
this.height += 2;
this.forcePushTime += 1;
} else if (this.forcePushTime < 12) {
this.x += 1;
this.width -= 2;
this.y += 1;
this.height -= 2;
this.forcePushTime += 1;
} else {
if (pType === 'player') {
isPlayerForcePush = false;
} else {
isCompForcePush = false;
}
this.forcePushTime = 0;
}
}
}
function Scoreboard() {
this.playerScore = 0;
this.computerScore = 0;
this.gameOver = function() {
return this.playerScore === 7 || this.computerScore === 7;
}
this.resetScore = function() {
this.playerScore = 0;
this.computerScore = 0;
}
this.playerScored = function() {
this.playerScore += 1;
}
this.computerScored = function() {
this.computerScore += 1;
}
}
function Player() {
this.paddle = new Paddle(30, (height/2) - 25, 20, 70);
this.update = function() {
this.paddle.xspeed = 0;
this.paddle.yspeed = 0;
}
this.move = function(x, y) {
this.paddle.x += x;
this.paddle.y += y;
this.paddle.xspeed = x;
this.paddle.yspeed = y;
if (this.paddle.y < 0) { // all the way to the top
this.paddle.y = 0;
this.paddle.yspeed = 0;
} else if (this.paddle.y + this.paddle.height > height) { // all the way to the bottom
this.paddle.y = height - this.paddle.height;
this.paddle.yspeed = 0;
}
}
this.show = function() {
this.paddle.show();
}
}
function Computer() {
this.paddle = new Paddle(width - 50, (height/2) - 25, 20, 70);
this.move = function(x, y) {
this.paddle.x += x;
this.paddle.y += y;
this.paddle.xspeed = x;
this.paddle.yspeed = y;
if (this.paddle.y < 0) { // all the way to the top
this.paddle.y = 0;
this.paddle.yspeed = 0;
} else if (this.paddle.y + this.paddle.height > height) { // all the way to the bottom
this.paddle.y = height - this.paddle.height;
this.paddle.yspeed = 0;
}
}
this.update = function() {
var yPos = ball.y;
var diff = -((this.paddle.y + (this.paddle.height / 2)) - yPos);
if (diff < 0 && diff < -4) { // max speed up
diff = -8;
} else if (diff > 0 && diff > 4) { // max speed down
diff = 8;
}
this.move(0, diff);
if (this.paddle.y < 0) {
this.paddle.y = 0;
} else if (this.paddle.y + this.paddle.height > height) {
this.paddle.y = height - this.paddle.height;
}
};
this.show = function() {
this.paddle.show();
}
}
function Ball(x, y) {
this.x = x;
this.y = y;
this.xspeed = -6;
this.yspeed = random(-1, 1);
this.vel = createVector(this.xspeed, this.yspeed);
this.radius = 40;
this.yoff = random(1000);
this.resetBall = function() {
this.x = width/2;
this.y = height/2;
this.xspeed = playerServe ? -6 : 6;
this.yspeed = random(-1, 1);
this.vel.x = this.xspeed;
this.vel.y = this.yspeed;
}
this.inDangerZone = function(x, y) {
return (x < 200 || x > width - 200);
}
this.update = function() {
this.x += this.xspeed;
this.y += this.yspeed;
this.vel.x = this.xspeed;
this.vel.y = this.yspeed;
if (this.y - this.radius <= 0) { // hitting the top wall
this.y = this.radius;
this.yspeed = -this.yspeed;
} else if (this.y + this.radius > height) { // hitting the bottom wall
this.y = height - this.radius;
this.yspeed = -this.yspeed;
}
// a point was scored
if (this.x - this.radius/2 < 0 || this.x + this.radius/2 > width) {
var xSpot = this.x - this.radius/2 < 0 ? 0 : width;
shootSparks(xSpot, this.y, -this.xspeed);
goalWaitPeriod = true;
setTimeout(function() {
goalWaitPeriod = false;
lightningForge.resetLightningForge();
}, 500);
xSpot === 0 ? scoreboard.computerScored() : scoreboard.playerScored();
playerServe = !playerServe;
this.resetBall();
}
var paddle1 = player.paddle;
var paddle2 = computer.paddle;
if(this.y + this.radius/2 >= paddle1.y && this.y - this.radius/2 <= paddle1.y + paddle1.height && this.x - this.radius/2 <= paddle1.x + paddle1.width) {
// hit the player's paddle
this.yspeed += (paddle1.yspeed / 2);
isPlayerForcePush = true;
this.xspeed = 10;
this.x += this.xspeed;
}
if (this.y + this.radius/2 >= paddle2.y && this.y - this.radius/2 <= paddle2.y + paddle2.height && this.x + this.radius/2
html5打乒乓球小游戏代码.zip
版权申诉
153 浏览量
2023-09-27
22:11:32
上传
评论
收藏 78KB ZIP 举报
html5打乒乓球小游戏代码.zip （3个子文件） 
js 
p5.dom.min.js 17KB p5.min.js 259KB
index.html 11KB资源评论
码云笔记
- 粉丝: 2w+
- 资源: 5851
最新资源
- python开发基于粒子群优化算法的水务调度+源码+结果展示+文档（毕业设计&课程设计&项目开发）
- 目标检测-Yolov3的Pytorch版本实现火焰检测源码
- 工程经济学期末报告（工科版）
- 七夕情人节表白代码（易语言表白程序/易语言表白源码）
- 华为OD机试C卷- 字符串序列判定（Java & JS & Python & C）.md-私信看全套OD代码及解析
- 华为OD机试C卷- 字符串筛选排序（Java & JS & Python & C）.md-私信看全套OD代码及解析
- 华为OD机试C卷- 字符串拼接（Java & JS & Python & C）.md-私信看全套OD代码及解析
- 华为wifi7详细介绍
- 华为OD机试C卷- 字符串排序（Java & JS & Python).md-私信看全套OD代码及解析
- FANUC机器人4种启动方式的区别.docx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
