Scribd
Upload
12 views12 pages

Código Foda

The document is an HTML file for a Pro Soccer Game, featuring a canvas for gameplay and controls including an analog stick and buttons for passing and shooting. It includes styles for the game interface, such as the scoreboard, timer, and goal messages, as well as JavaScript code to manage game mechanics, player movement, and scoring. The game is designed to be responsive and interactive, adapting to different screen sizes and user inputs.

Uploaded by

oficialffmax27
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views12 pages

Código Foda

The document is an HTML file for a Pro Soccer Game, featuring a canvas for gameplay and controls including an analog stick and buttons for passing and shooting. It includes styles for the game interface, such as the scoreboard, timer, and goal messages, as well as JavaScript code to manage game mechanics, player movement, and scoring. The game is designed to be responsive and interactive, adapting to different screen sizes and user inputs.

Uploaded by

oficialffmax27
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

<!

DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=yes">
<title>Pro Soccer Game</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
}

body {
overflow: hidden;
position: fixed;
width: 100%;
height: 100%;
background-color: #0e3b1c;
}

canvas {
background: linear-gradient(135deg, #0d3519 0%, #0e3b1c 25%, #0e3b1c 75%, #0d3519
100%);
display: block;
touch-action: none;
width: 100%;
height: 100%;
}

.button-container {
position: fixed;
bottom: 40px;
right: 40px;
display: flex;
gap: 20px;
z-index: 10;
}

.button {
width: 90px;
height: 90px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 16px;
color: white;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
transform: scale(1);
transition: transform 0.15s ease;
cursor: pointer;
opacity: 0.7;
}

.button:active {
transform: scale(0.92);
}

#buttonA {
background: radial-gradient(circle, #ff3838 0%, #e62020 100%);
box-shadow: 0 4px 15px rgba(255,0,0,0.3);
}

#buttonB {
background: radial-gradient(circle, #2ed573 0%, #26ae60 100%);
box-shadow: 0 4px 15px rgba(46,213,115,0.3);
}

#analog-stick {
position: fixed;
bottom: 40px;
left: 40px;
width: 150px;
height: 150px;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
touch-action: none;
z-index: 10;
}

#analog-knob {
position: absolute;
width: 60px;
height: 60px;
background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(200,200,200,0.95)
100%);
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
cursor: grab;
}

#analog-knob:active {
cursor: grabbing;
}

#placar {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
color: white;
font-family: Arial, sans-serif;
font-size: 24px;
background: rgba(0,0,0,0.5);
padding: 10px 20px;
border-radius: 10px;
z-index: 10;
}

.timer {
position: fixed;
top: 70px;
left: 50%;
transform: translateX(-50%);
color: white;
font-family: Arial, sans-serif;
font-size: 20px;
background: rgba(0,0,0,0.5);
padding: 5px 15px;
border-radius: 8px;
z-index: 10;
}

.gol-mensagem {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
color: white;
font-family: Arial, sans-serif;
font-size: 48px;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
z-index: 20;
}

.gol-mensagem.active {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}

.goal {
position: absolute;
width: 20px;
height: 30%;
border: 4px solid rgba(255, 255, 255, 0.8);
background: rgba(255, 255, 255, 0.1);
z-index: 5;
}

.goal-net {
position: absolute;
width: 100%;
height: 100%;
background:
repeating-linear-gradient(45deg,
rgba(255, 255, 255, 0.1) 0px,
rgba(255, 255, 255, 0.1) 2px,
transparent 2px,
transparent 8px
),
repeating-linear-gradient(-45deg,
rgba(255, 255, 255, 0.1) 0px,
rgba(255, 255, 255, 0.1) 2px,
transparent 2px,
transparent 8px
);
}

.goal-left {
left: 0;
top: 50%;
transform: translateY(-50%);
}

.goal-right {
right: 0;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<div id="analog-stick">
<div id="analog-knob"></div>
</div>
<div class="button-container">
<div id="buttonB" class="button">PASSE</div>
<div id="buttonA" class="button">CHUTE</div>
</div>
<div id="placar">
<span id="placarTime1">0</span>
:
<span id="placarTime2">0</span>
</div>
<div class="timer">10:00</div>
<div class="gol-mensagem">GOL!</div>
<div class="goal goal-left"><div class="goal-net"></div></div>
<div class="goal goal-right"><div class="goal-net"></div></div>
<script>
class Game {
constructor() {
this.canvas = document.getElementById('gameCanvas');
this.ctx = this.canvas.getContext('2d');
this.canvas.width = window.innerWidth;
this.canvas.height = window.innerHeight;

this.setupConstants();
this.setupGameState();
this.setupControls();
this.setupGoals();
this.resetPositions();

window.addEventListener('resize', () => {
this.handleResize();
});

window.addEventListener('orientationchange', () => {
setTimeout(() => {
this.handleResize();
}, 300);
});

this.gameTime = 600;
this.isGameActive = false;
this.lastFrameTime = Date.now();
this.gameLoop();
}
setupConstants() {
this.PLAYER_MAX_SPEED = 2.5;
this.PLAYER_ACCELERATION = 1.5;
this.PLAYER_FRICTION = 0.92;
this.PLAYER_RADIUS = 16;
this.HITBOX_RADIUS = 21;
this.BALL_RADIUS = 8;
this.BALL_FRICTION = 0.98;
this.BALL_BOUNCE = 0.5;
this.KICK_POWER = 10;
this.PASS_POWER = 7;
}

setupGameState() {
this.score1 = 0;
this.score2 = 0;
this.resetPositions();
this.analogPosition = { x: 0, y: 0 };
this.isAnalogActive = false;
this.buttonAPressed = false;
this.buttonBPressed = false;
this.ballRotation = 0;
this.analogTouchId = null;
}

setupControls() {
const analogStick = document.getElementById('analog-stick');
const analogKnob = document.getElementById('analog-knob');
const buttonA = document.getElementById('buttonA');
const buttonB = document.getElementById('buttonB');

const handleAnalogStart = (e) => {


const touch = e.type === 'mousedown' ? e : e.touches[0];
if (!this.analogTouchId) {
this.analogTouchId = touch.identifier || 'mouse';
this.isAnalogActive = true;
updateAnalogPosition(touch);
}
};

const handleAnalogMove = (e) => {


e.preventDefault();
const touch = e.type === 'mousemove' ? e :
Array.from(e.touches).find(t => t.identifier === this.analogTouchId);

if (touch && this.isAnalogActive) {


updateAnalogPosition(touch);
}
};

const handleAnalogEnd = (e) => {


if (e.type === 'mouseup' && this.analogTouchId === 'mouse' ||
e.type === 'touchend' && Array.from(e.changedTouches).some(t => t.identifier ===
this.analogTouchId)) {
this.analogTouchId = null;
this.isAnalogActive = false;
this.analogPosition = { x: 0, y: 0 };
analogKnob.style.transform = 'translate(-50%, -50%)';
}
};

const updateAnalogPosition = (touch) => {


const rect = analogStick.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
let dx = touch.clientX - centerX;
let dy = touch.clientY - centerY;
const distance = Math.hypot(dx, dy);
const maxDistance = rect.width / 2 - analogKnob.offsetWidth / 2;

if (distance > maxDistance) {


const angle = Math.atan2(dy, dx);
dx = Math.cos(angle) * maxDistance;
dy = Math.sin(angle) * maxDistance;
}

analogKnob.style.transform = `translate(calc(-50% + px), calc(-50% + px))`;


this.analogPosition = {
x: dx / maxDistance,
y: dy / maxDistance
};
};

analogStick.addEventListener('mousedown', handleAnalogStart);
document.addEventListener('mousemove', handleAnalogMove);
document.addEventListener('mouseup', handleAnalogEnd);
analogStick.addEventListener('touchstart', handleAnalogStart);
document.addEventListener('touchmove', handleAnalogMove, { passive: false });
document.addEventListener('touchend', handleAnalogEnd);

buttonA.addEventListener('touchstart', () => this.buttonAPressed = true);


buttonA.addEventListener('touchend', () => this.buttonAPressed = false);
buttonB.addEventListener('touchstart', () => this.buttonBPressed = true);
buttonB.addEventListener('touchend', () => this.buttonBPressed = false);
buttonA.addEventListener('mousedown', () => this.buttonAPressed = true);
buttonA.addEventListener('mouseup', () => this.buttonAPressed = false);
buttonB.addEventListener('mousedown', () => this.buttonBPressed = true);
buttonB.addEventListener('mouseup', () => this.buttonBPressed = false);
}
setupGoals() {
this.goalWidth = 20;
this.goalHeight = this.canvas.height * 0.3;
this.goalTop = (this.canvas.height - this.goalHeight) / 2;
}

resetPositions() {
this.player = {
x: this.canvas.width / 2,
y: this.canvas.height / 2,
vx: 0,
vy: 0,
rotation: 0
};

this.ball = {
x: this.canvas.width / 2,
y: this.canvas.height / 2,
vx: 0,
vy: 0
};
}

handleResize() {
this.canvas.width = window.innerWidth;
this.canvas.height = window.innerHeight;
this.setupGoals();
}

checkGoal() {
const ballInGoalVertically = this.ball.y > this.goalTop &&
this.ball.y < this.goalTop + this.goalHeight;

if (ballInGoalVertically) {
if (this.ball.x - this.BALL_RADIUS < this.goalWidth) {
this.score2++;
this.showGolMessage();
this.updateScoreboard();
this.resetPositions();
return true;
}
if (this.ball.x + this.BALL_RADIUS > this.canvas.width - this.goalWidth) {
this.score1++;
this.showGolMessage();
this.updateScoreboard();
this.resetPositions();
return true;
}
}
return false;
}

showGolMessage() {
const golMensagem = document.querySelector('.gol-mensagem');
golMensagem.classList.add('active');
setTimeout(() => {
golMensagem.classList.remove('active');
}, 2000);
}

updateScoreboard() {
document.getElementById('placarTime1').textContent = this.score1;
document.getElementById('placarTime2').textContent = this.score2;
}

updateTimer() {
if (this.gameTime > 0) {
const currentTime = Date.now();
const deltaTime = (currentTime - this.lastFrameTime) / 1000;
this.gameTime -= deltaTime;

const minutes = Math.floor(this.gameTime / 60);


const seconds = Math.floor(this.gameTime % 60);
document.querySelector('.timer').textContent =
`:`;
}
this.lastFrameTime = Date.now();
}

updateBall() {
this.ball.x += this.ball.vx;
this.ball.y += this.ball.vy;
this.ball.vx *= this.BALL_FRICTION;
this.ball.vy *= this.BALL_FRICTION;

if (this.ball.x < this.BALL_RADIUS) {


this.ball.x = this.BALL_RADIUS;
this.ball.vx = Math.abs(this.ball.vx) * this.BALL_BOUNCE;
}
if (this.ball.x > this.canvas.width - this.BALL_RADIUS) {
this.ball.x = this.canvas.width - this.BALL_RADIUS;
this.ball.vx = -Math.abs(this.ball.vx) * this.BALL_BOUNCE;
}
if (this.ball.y < this.BALL_RADIUS) {
this.ball.y = this.BALL_RADIUS;
this.ball.vy = Math.abs(this.ball.vy) * this.BALL_BOUNCE;
}
if (this.ball.y > this.canvas.height - this.BALL_RADIUS) {
this.ball.y = this.canvas.height - this.BALL_RADIUS;
this.ball.vy = -Math.abs(this.ball.vy) * this.BALL_BOUNCE;
}

this.ballRotation += Math.hypot(this.ball.vx, this.ball.vy) * 0.05;


}

updatePlayer() {
if (this.isAnalogActive) {
const targetVX = this.analogPosition.x * this.PLAYER_MAX_SPEED;
const targetVY = this.analogPosition.y * this.PLAYER_MAX_SPEED;
this.player.vx += (targetVX - this.player.vx) * this.PLAYER_ACCELERATION;
this.player.vy += (targetVY - this.player.vy) * this.PLAYER_ACCELERATION;
this.player.rotation = Math.atan2(this.analogPosition.y, this.analogPosition.x);
} else {
this.player.vx *= this.PLAYER_FRICTION;
this.player.vy *= this.PLAYER_FRICTION;
}

this.player.x += this.player.vx;
this.player.y += this.player.vy;
this.player.x = Math.max(this.PLAYER_RADIUS, Math.min(this.canvas.width -
this.PLAYER_RADIUS, this.player.x));
this.player.y = Math.max(this.PLAYER_RADIUS, Math.min(this.canvas.height -
this.PLAYER_RADIUS, this.player.y));

const dx = this.ball.x - this.player.x;


const dy = this.ball.y - this.player.y;
const distance = Math.hypot(dx, dy);
const minDist = this.PLAYER_RADIUS + this.BALL_RADIUS;

if (distance < minDist) {


const angle = Math.atan2(dy, dx);
this.ball.x = this.player.x + Math.cos(angle) * minDist;
this.ball.y = this.player.y + Math.sin(angle) * minDist;

if (this.buttonAPressed) {
this.ball.vx = Math.cos(this.player.rotation) * this.KICK_POWER;
this.ball.vy = Math.sin(this.player.rotation) * this.KICK_POWER;
} else if (this.buttonBPressed) {
this.ball.vx = Math.cos(this.player.rotation) * this.PASS_POWER;
this.ball.vy = Math.sin(this.player.rotation) * this.PASS_POWER;
} else {
const normalX = Math.cos(angle);
const normalY = Math.sin(angle);
const relativeVelX = this.ball.vx - this.player.vx;
const relativeVelY = this.ball.vy - this.player.vy;
const normalVel = relativeVelX * normalX + relativeVelY * normalY;

if (normalVel < 0) {
const bounceX = normalVel * normalX;
const bounceY = normalVel * normalY;
this.ball.vx = this.player.vx - bounceX * this.BALL_BOUNCE;
this.ball.vy = this.player.vy - bounceY * this.BALL_BOUNCE;
}
}
}
}

drawPlayer() {
this.ctx.save();
this.ctx.translate(this.player.x, this.player.y);
this.ctx.rotate(this.player.rotation);

const hitboxOpacity = (this.buttonAPressed || this.buttonBPressed) ? 0.2 : 0.6;


this.ctx.beginPath();
this.ctx.arc(0, 0, this.HITBOX_RADIUS, 0, Math.PI * 2);
this.ctx.fillStyle = `rgba(128, 128, 128, )`;
this.ctx.fill();

this.ctx.beginPath();
this.ctx.arc(0, 0, this.PLAYER_RADIUS, 0, Math.PI * 2);
this.ctx.fillStyle = '#1a73e8';
this.ctx.fill();

this.ctx.restore();
}

drawBall() {
this.ctx.save();
this.ctx.translate(this.ball.x, this.ball.y);
this.ctx.rotate(this.ballRotation);

this.ctx.beginPath();
this.ctx.arc(0, 0, this.BALL_RADIUS, 0, Math.PI * 2);
this.ctx.fillStyle = 'white';
this.ctx.fill();

this.ctx.beginPath();
this.ctx.moveTo(-this.BALL_RADIUS, 0);
this.ctx.lineTo(this.BALL_RADIUS, 0);
this.ctx.strokeStyle = 'rgba(0, 0, 0, 0.2)';
this.ctx.lineWidth = 2;
this.ctx.stroke();

this.ctx.restore();
}

gameLoop() {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

this.updateTimer();
this.updatePlayer();
this.updateBall();
this.checkGoal();

this.drawPlayer();
this.drawBall();

requestAnimationFrame(() => this.gameLoop());


}
}

new Game();
</script>
</body>
</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy