42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

miscs and basic responsive.

Browse Source
This commit is contained in:
LuckyLaszlo
2022-10-15 17:41:54 +02:00
parent c2e0618427
commit 03835c3c2b
2 changed files with 113 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
pong.html
View File

@@ -4,38 +4,78 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
#canvas-container {
text-align: center;
}
canvas {
border:1px solid #d3d3d3;
background-color: #333333;
width: 80%;
}
</style>
</head>
<body onload="startGame()">
<div id="canvas-container">
</div>
<script>
// "use strict";
var player1;
var player2;
var score1;
var score2;
var ball;
var playerSpeed = 2;
function startGame() {
player1 = new component(15, 60, "white", 10, 100);
player2 = new component(15, 60, "white", 455, 100);
// ball = new component(10, 10, "white", 240, 125);
ball = new component(10, 10, "white", 40, 125);
myGameArea.createGameArea();
// Const
const w = myGameArea.canvas.width;
const h = myGameArea.canvas.height;
const w_mid = w/2;
const h_mid = h/2;
const pw = w/50;
const ph = pw*5;
const ball_size = pw; // const ball_size = w/50;
const score_size = w/16;
// Component
player1 = new component(pw, ph, "white", 0+w/50, h_mid-ph/2);
player2 = new component(pw, ph, "white", w-w/50-pw, h_mid-ph/2);
ball = new component(ball_size, ball_size, "white", w_mid-ball_size/2, h_mid-ball_size/2);
score1 = new score(score_size+"px", "Consolas", "white", w_mid-w/8, w/12);
score2 = new score(score_size+"px", "Consolas", "white", w_mid+w/8-score_size/2, w/12);
// Grid
w_grid_mid = new component(w, 1, "darkgreen", 0, h_mid);
w_grid_u1 = new component(w, 1, "yellow", 0, h/4);
w_grid_d1 = new component(w, 1, "yellow", 0, h-h/4);
h_grid_mid = new component(1, h, "darkgreen", w_mid, 0);
h_grid_u1 = new component(1, h, "yellow", w/4, 0);
h_grid_d1 = new component(1, h, "yellow", w-w/4, 0);
myGameArea.start();
}
var myGameArea = {
keys: new Map(),
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
createGameArea : function() {
this.canvas.width = 500;
this.canvas.height = 300;
// var heightRatio = 1;
// this.canvas.height = this.canvas.width * heightRatio;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
// document.body.insertBefore(this.canvas, document.body.childNodes[0]);
document.getElementById("canvas-container").appendChild(this.canvas);
},
start : function() {
this.interval = setInterval(gameLoop, 20);
window.addEventListener('keydown', function (e) {
myGameArea.keys.set(e.key, true);
@@ -46,30 +86,72 @@ var myGameArea = {
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop : function() {
clearInterval(this.interval);
}
}
function score(size, font, color, x, y) {
this.size = size;
this.font = font;
this.color = color;
this.x = x;
this.y = y;
this.text = "0";
this.update = function() {
ctx = myGameArea.context;
ctx.font = this.size + " " + this.font;
ctx.fillStyle = this.color;
ctx.fillText(this.text, this.x, this.y);
}
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.color = color;
this.x = x;
this.y = y;
this.speedX = 0;
this.speedY = 0;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
}
this.crashWith = function(otherobj) { // From W3schools. To redo.
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var otherleft = otherobj.x;
var otherright = otherobj.x + (otherobj.width);
var othertop = otherobj.y;
var otherbottom = otherobj.y + (otherobj.height);
var crash = true;
if ((mybottom < othertop) ||
(mytop > otherbottom) ||
(myright < otherleft) ||
(myleft > otherright)) {
crash = false;
}
return crash;
}
}
function gameLoop() {
if (ball.crashWith(player1))
myGameArea.stop();
playerMove();
// ball.x += -0.5;
// ball.y += +0.2;
draw();
drawGrid();
}
function draw() {
@@ -77,31 +159,43 @@ function draw() {
player1.update();
player2.update();
ball.update();
score1.update();
score2.update();
}
function drawGrid() {
w_grid_mid.update();
w_grid_u1.update();
w_grid_d1.update();
h_grid_mid.update();
h_grid_u1.update();
h_grid_d1.update();
}
function playerMove() {
player1.speedX = 0;
player1.speedY = 0;
if ( myGameArea.keys.get("a") )
{ player1.speedX += -1; }
{ player1.speedX += -playerSpeed; }
if ( myGameArea.keys.get("d") )
{ player1.speedX += 1; }
{ player1.speedX += playerSpeed; }
if ( myGameArea.keys.get("w") )
{ player1.speedY += -1; }
{ player1.speedY += -playerSpeed; }
if ( myGameArea.keys.get("s") )
{ player1.speedY += 1; }
{ player1.speedY += playerSpeed; }
player1.newPos();
player2.speedX = 0;
player2.speedY = 0;
if ( myGameArea.keys.get("ArrowLeft") )
{ player2.speedX += -1; }
{ player2.speedX += -playerSpeed; }
if ( myGameArea.keys.get("ArrowRight") )
{ player2.speedX += 1; }
{ player2.speedX += playerSpeed; }
if ( myGameArea.keys.get("ArrowUp") )
{ player2.speedY += -1; }
{ player2.speedY += -playerSpeed; }
if ( myGameArea.keys.get("ArrowDown") )
{ player2.speedY += 1; }
{ player2.speedY += playerSpeed; }
player2.newPos();
}

BIN
pong_example.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB