Skip to content

Instantly share code, notes, and snippets.

@vsecoder-old-account

vsecoder-old-account/Vsevolod_html-ping0pong.html

Created April 19, 2020 10:47
Show Gist options
  • Save vsecoder-old-account/e4ff64acfea19f85b06e2bc6a55c39c8 to your computer and use it in GitHub Desktop.
Save vsecoder-old-account/e4ff64acfea19f85b06e2bc6a55c39c8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Vsevolod_html-ping0pong.html
<!DOCTYPE html>
<html>
<head>
<title>Пинг-понг от Человеклюдя на JavaScript</title>
<style>
html, body { margin: 0; background: black; /*делаем красивый градиент*/}
.all {display: flex;
justify-content: center;
padding-bottom: 0px
margin-top: 0px }
</style></head><body>
<h1 style="border-bottom: 1px solid; border-bottom-color: yellow;margin-top: 1px;text-align: center; background: red; color:white;"><b>Пинг-понг</b></h1><br><div class="all">
<canvas id="pingpong" width="960" height="600"></canvas></div>
<script>
(function(){
var Ball = function () {return {radius: 8,color: 'white',x: 0,y: 0,yspeed: 5,xspeed: 7,bounce: 1.4,render: function (ctx){ctx.beginPath();ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI);ctx.fillStyle = this.color;ctx.fill();},move: function () {this.x = this.x + this.xspeed;this.y = this.y + this.yspeed; }}};
var Bracket = function () {return {w: 10,h: 100,x: 0,y: 0,speed: 20,color: 'white',render: function (ctx) { ctx.fillStyle = this.color;ctx.fillRect(this.x, this.y, this.w, this.h);}}};
var Player = function () {return {rate: 0};};
var Game = function () {var _this = this;this.params = {width: 960,height: 600,state: 'loading',maxRate: 5};this.canvasBlock = document.getElementById('pingpong');this.ctx = this.canvasBlock.getContext('2d');(function(){try{return document.addEventListener}catch(e){}return undefined;})()&&document.addEventListener('keydown', function (event) {_this.keyDownEvent.call(_this, event);});return this;};
Game.prototype = {
physic: function () {
var ball = game.objects.ball,
b1 = game.objects.bracket1,
b2 = game.objects.bracket2;
game.objects.ball.move();
if (ball.x + ball.radius/2 < 0) {
game.objects.ball.xspeed = -game.objects.ball.xspeed;
}
if (ball.x + ball.radius/2 > game.params.width) {
game.objects.ball.xspeed = -game.objects.ball.xspeed;
}
if (ball.y + ball.radius/2 > game.params.height || ball.y + ball.radius/2 < 0) {
game.objects.ball.yspeed = -game.objects.ball.yspeed;
}
if(ball.x <= 60 && ball.y >= b1.y && ball.y <= b1.y+b1.h) {
ball.xspeed = -ball.xspeed;
ball.xspeed = ball.xspeed * ball.bounce;
}
if(ball.x >= this.params.width-50 && ball.y >= b2.y && ball.y <= b2.y+b2.h) {
ball.xspeed = -ball.xspeed;
ball.xspeed = ball.xspeed * ball.bounce;
}
if(this.params.state === 'playerwait') {
ball.xspeed = 0;
ball.yspeed = 0;
if(this.params.lastGoalPlayer === 'player1') {
ball.x = this.params.lastGoalBracket.x + this.params.lastGoalBracket.w + ball.radius + 1;
ball.y = this.params.lastGoalBracket.y + this.params.lastGoalBracket.h/2;
}
if(this.params.lastGoalPlayer === 'player2') {
ball.x = this.params.lastGoalBracket.x - ball.radius - 1;
ball.y = this.params.lastGoalBracket.y + this.params.lastGoalBracket.h/2;
}
}
if(b1.y <= 0) b1.y = 1;
if(b2.y <= 0) b2.y = 1;
if(b1.y+b1.h >= this.params.height) b1.y = this.params.height-b1.h;
if(b2.y+b2.h >= this.params.height) b2.y = this.params.height-b2.h;
},
render: function () {
game.ctx.fillStyle = 'darkred';
game.ctx.fillRect(0,0, game.params.width, game.params.height);
game.objects.ball.render(game.ctx);
game.objects.bracket1.render(game.ctx);
game.objects.bracket2.render(game.ctx);
game.renderRate(game.ctx);
},
renderRate: function (ctx) {
var rateText = game.objects.player1.rate + ' : ' + game.objects.player2.rate;
ctx.fillStyle = 'white';
ctx.font = "30px Arial";
ctx.fillText(rateText,game.params.width/2,50);
},
logic: function () {
var ball = game.objects.ball;
if(this.params.state == 'game') {
if (ball.x + ball.radius/2 < 0) {
this.objects.player2.rate++;
this.params.state = 'playerwait';
this.params.lastGoalBracket = this.objects.bracket2;
this.params.lastGoalPlayer = 'player2';
}
if (ball.x + ball.radius/2 > game.params.width) {
this.objects.player1.rate++;
this.params.state = 'playerwait';
this.params.lastGoalBracket = this.objects.bracket1;
this.params.lastGoalPlayer = 'player1';
}
if(this.objects.player1.rate === this.params.maxRate) {
var rateText = game.objects.player1.rate + ' : ' + game.objects.player2.rate;
alert('Игрок слева выиграл Со счетом ' +rateText+ '. Ура!');
this.gameRestart();
}
if(this.objects.player2.rate === this.params.maxRate) {
var rateText = game.objects.player1.rate + ' : ' + game.objects.player2.rate;
alert('Игрок справа выиграл Со счетом ' +rateText+ ' Ура!');
this.gameRestart();
}}},
loop: function () {
var _this = this;
this.logic();
this.physic();
this.render();
this.requestLoop = requestAnimationFrame(function(){
_this.loop.call(_this);
});
},
keyDownEvent: function (event) {
var kCode = event.keyCode;
if(kCode === 83) {
game.objects.bracket1.y = game.objects.bracket1.y + game.objects.bracket1.speed;
}
if(kCode === 87) {
game.objects.bracket1.y = game.objects.bracket1.y - game.objects.bracket1.speed;
}
if(kCode === 40) {
game.objects.bracket2.y = game.objects.bracket2.y + game.objects.bracket2.speed;
}
if(kCode === 38) {
game.objects.bracket2.y = game.objects.bracket2.y - game.objects.bracket2.speed;
}
if(kCode === 69) {
this.restartBall();
}
if(kCode === 82) {
this.restartGame();
}
if(kCode === 32 && game.params.state === 'playerwait') {
this.kickBall();
}
},
kickBall: function () {
this.objects.ball.xspeed = 3;
this.objects.ball.yspeed = 3;
this.params.state = 'game';
},
startGame: function () {
var _this = this;
this.objects = {
ball: new Ball(),
player1: new Player(),
player2: new Player(),
bracket1: new Bracket(),
bracket2: new Bracket()
};
this.params.state = 'game';
this.objects.bracket1.x = 50;
this.objects.bracket1.y = this.params.height / 2 - this.objects.bracket1.h / 2;
this.objects.bracket2.x = this.params.width - 50;
this.objects.bracket2.y = this.params.height / 2 - this.objects.bracket1.h / 2;
this.objects.bracket2.color = 'white';
this.loop();
},
stopGame: function () {
this.params.state = 'stop';
cancelAnimationFrame(this.requestLoop);
document.removeEventListener('keydown', this.keyDownEvent);
delete(this.objects);
},
pauseGame: function () {
this.state = 'pause';
},
restartBall: function () {
this.objects.ball.x = game.params.width/2;
this.objects.ball.y = game.params.height/2;
this.objects.ball.xspeed = 3;
this.objects.ball.yspeed = 3;
},
restartGame: function () {
this.stopGame();
this.startGame();
}
};
window.onload = function () {
window.game = new Game();
game.startGame();
}
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment