Scribd
Upload
167 views48 pages

Mario Code

Uploaded by

animehero1320
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
167 views48 pages

Mario Code

Uploaded by

animehero1320
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

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Simple Mario
Game</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-
serif;
background: linear-
gradient(to bottom, #87CEEB 0%,
#87CEEB 70%, #90EE90 70%,
#90EE90 100%);
overflow: hidden;
height: 100vh;
}

#gameContainer {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}

#mario {
position: absolute;
width: 40px;
height: 40px;
background: #FF6B6B;
border-radius: 8px;
bottom: 100px;
left: 50px;
transition: none;
border: 3px solid #FF4757;
}

#mario::before {
content: '';
position: absolute;
top: -8px;
left: 8px;
width: 24px;
height: 16px;
background: #8B4513;
border-radius: 12px 12px 0
0;
}

#mario::after {
content: '';
position: absolute;
top: 8px;
left: 12px;
width: 16px;
height: 8px;
background: #FFE4B5;
border-radius: 50%;
}

.platform {
position: absolute;
background: #8B4513;
border: 3px solid #654321;
border-radius: 4px;
}

.ground {
bottom: 0;
width: 100%;
height: 100px;
background: #228B22;
border-top: 5px solid
#32CD32;
}
.coin {
position: absolute;
width: 20px;
height: 20px;
background: #FFD700;
border-radius: 50%;
border: 2px solid #FFA500;
animation: spin 2s linear
infinite;
}

.enemy {
position: absolute;
width: 30px;
height: 30px;
background: #8B0000;
border-radius: 50%;
border: 2px solid #FF0000;
}

.enemy::before {
content: '';
position: absolute;
top: 8px;
left: 6px;
width: 6px;
height: 6px;
background: white;
border-radius: 50%;
}

.enemy::after {
content: '';
position: absolute;
top: 8px;
right: 6px;
width: 6px;
height: 6px;
background: white;
border-radius: 50%;
}
@keyframes spin {
from { transform:
rotate(0deg); }
to { transform:
rotate(360deg); }
}

#score {
position: absolute;
top: 20px;
left: 20px;
color: white;
font-size: 24px;
font-weight: bold;
text-shadow: 2px 2px 4px
rgba(0,0,0,0.5);
z-index: 100;
}

#instructions {
position: absolute;
top: 20px;
right: 20px;
color: white;
font-size: 16px;
text-shadow: 2px 2px 4px
rgba(0,0,0,0.5);
text-align: right;
z-index: 100;
}

#gameOver {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,
-50%);
background: rgba(0,0,0,0.8);
color: white;
padding: 40px;
border-radius: 20px;
text-align: center;
display: none;
z-index: 200;
}

#gameOver button {
background: #FF6B6B;
color: white;
border: none;
padding: 15px 30px;
font-size: 18px;
border-radius: 10px;
cursor: pointer;
margin-top: 20px;
transition: background 0.3s;
}

#gameOver button:hover {
background: #FF4757;
}

.cloud {
position: absolute;
background: white;
border-radius: 50px;
opacity: 0.8;
}
.cloud::before,
.cloud::after {
content: '';
position: absolute;
background: white;
border-radius: 50px;
}
</style>
</head>
<body>
<div id="gameContainer">
<div id="score">Score: 0</div>
<div id="instructions">
Use ARROW KEYS to
move<br>
SPACEBAR to jump<br>
Collect coins, avoid
enemies!
</div>

<div id="mario"></div>

<div class="platform ground">


</div>

<div id="gameOver">
<h2>Game Over!</h2>
<p>Final Score: <span
id="finalScore">0</span></p>
<button
onclick="restartGame()">Play
Again</button>
</div>
</div>

<script>
const mario =
[Link]('mario'
);
const gameContainer =
[Link]('game
Container');
const scoreElement =
[Link]('score'
);
const gameOverScreen =
[Link]('game
Over');
const finalScoreElement =
[Link]('finalS
core');

let marioPos = { x: 50, y: 0 };


let marioVelocity = { x: 0, y: 0 };
let isJumping = false;
let score = 0;
let gameRunning = true;
let keys = {};

const gravity = 0.8;


const jumpPower = -15;
const moveSpeed = 5;
const groundLevel = 100;

let coins = [];


let enemies = [];
let platforms = [];

// Create clouds
function createClouds() {
for (let i = 0; i < 5; i++) {
const cloud =
[Link]('div');
[Link] = 'cloud';
[Link] =
[Link]() * 60 + 40 + 'px';
[Link] =
[Link]() * 30 + 20 + 'px';
[Link] =
[Link]() *
[Link] + 'px';
[Link] =
[Link]() * 200 + 50 + 'px';

const before =
[Link]('div');
[Link] =
'30px';
[Link] =
'30px';
[Link] = '-15px';
[Link] = '-15px';

const after =
[Link]('div');
[Link] = '25px';
[Link] = '25px';
[Link] = '-12px';
[Link] = '-10px';
[Link](clou
d);
}
}

// Create platforms
function createPlatforms() {
const platformData = [
{ x: 200, y: 250, width: 150,
height: 20 },
{ x: 400, y: 350, width: 120,
height: 20 },
{ x: 600, y: 200, width: 100,
height: 20 },
{ x: 800, y: 300, width: 130,
height: 20 }
];

[Link](data
=> {
const platform =
[Link]('div');
[Link] =
'platform';
[Link] = data.x
+ 'px';
[Link] =
data.y + 'px';
[Link] =
[Link] + 'px';
[Link] =
[Link] + 'px';

[Link](platf
orm);
[Link]({
x: data.x,
y: [Link] -
data.y - [Link],
width: [Link],
height: [Link],
element: platform
});
});
}

// Create coins
function createCoins() {
for (let i = 0; i < 8; i++) {
const coin =
[Link]('div');
[Link] = 'coin';
const x = [Link]() *
([Link] - 100) + 50;
const y = [Link]() *
300 + 150;
[Link] = x + 'px';
[Link] = y +
'px';

[Link](coin)
;
[Link]({
x: x,
y: [Link] -
y - 20,
element: coin,
collected: false
});
}
}
// Create enemies
function createEnemies() {
for (let i = 0; i < 4; i++) {
const enemy =
[Link]('div');
[Link] =
'enemy';
const x = [Link]() *
([Link] - 200) + 150;
[Link] = x + 'px';
[Link] =
groundLevel + 'px';

[Link](ene
my);
[Link]({
x: x,
y: [Link] -
groundLevel - 30,
element: enemy,
direction:
[Link]() > 0.5 ? 1 : -1,
speed: [Link]() *
2+1
});
}
}
// Collision detection
function checkCollision(rect1,
rect2) {
return rect1.x < rect2.x +
[Link] &&
rect1.x + [Link] >
rect2.x &&
rect1.y < rect2.y +
[Link] &&
rect1.y + [Link] >
rect2.y;
}

// Check platform collision


function
checkPlatformCollision() {
const marioRect = {
x: marioPos.x,
y: marioPos.y,
width: 40,
height: 40
};

for (let platform of


platforms) {
if
(checkCollision(marioRect,
platform)) {
if (marioVelocity.y > 0 &&
marioPos.y < platform.y) {
marioPos.y =
platform.y - 40;
marioVelocity.y = 0;
isJumping = false;
return true;
}
}
}
return false;
}

// Update game
function updateGame() {
if (!gameRunning) return;

// Handle input
if (keys['ArrowLeft'] &&
marioPos.x > 0) {
marioVelocity.x = -
moveSpeed;
} else if (keys['ArrowRight']
&& marioPos.x <
[Link] - 40) {
marioVelocity.x =
moveSpeed;
} else {
marioVelocity.x *= 0.8; //
Friction
}

if (keys[' '] && !isJumping) {


marioVelocity.y =
jumpPower;
isJumping = true;
}

// Apply gravity
marioVelocity.y += gravity;

// Update position
marioPos.x +=
marioVelocity.x;
marioPos.y +=
marioVelocity.y;

// Check platform collision


const onPlatform =
checkPlatformCollision();

// Ground collision
if (marioPos.y >=
[Link] - groundLevel
- 40) {
marioPos.y =
[Link] - groundLevel
- 40;
marioVelocity.y = 0;
isJumping = false;
}

// Keep Mario in bounds


marioPos.x = [Link](0,
[Link]([Link] -
40, marioPos.x));

// Update Mario position


[Link] = marioPos.x
+ 'px';
[Link] = marioPos.y
+ 'px';

// Update enemies
[Link](enemy => {
enemy.x +=
[Link] * [Link];
if (enemy.x <= 0 || enemy.x
>= [Link] - 30) {
[Link] *= -1;
}
[Link] =
enemy.x + 'px';
// Check enemy collision
const enemyRect = {
x: enemy.x,
y: enemy.y,
width: 30,
height: 30
};
const marioRect = {
x: marioPos.x,
y: marioPos.y,
width: 40,
height: 40
};
if
(checkCollision(marioRect,
enemyRect)) {
gameOver();
}
});

// Check coin collection


[Link](coin => {
if (![Link]) {
const coinRect = {
x: coin.x,
y: coin.y,
width: 20,
height: 20
};
const marioRect = {
x: marioPos.x,
y: marioPos.y,
width: 40,
height: 40
};

if
(checkCollision(marioRect,
coinRect)) {
[Link] = true;
[Link] =
'none';
score += 100;

[Link] =
'Score: ' + score;
}
}
});

requestAnimationFrame(updateG
ame);
}
// Game over
function gameOver() {
gameRunning = false;

[Link] =
score;

[Link] =
'block';
}

// Restart game
function restartGame() {
// Reset game state
gameRunning = true;
score = 0;
marioPos = { x: 50, y:
[Link] - groundLevel
- 40 };
marioVelocity = { x: 0, y: 0 };
isJumping = false;
[Link] =
'Score: 0';

[Link] =
'none';
// Clear existing game
objects
[Link](coin =>
[Link]());
[Link](enemy =>
[Link]());
[Link](platform
=> [Link]());

coins = [];
enemies = [];
platforms = [];

// Recreate game objects


createPlatforms();
createCoins();
createEnemies();

// Restart game loop


updateGame();
}

// Event listeners

[Link]('key
down', (e) => {
keys[[Link]] = true;
[Link]();
});

[Link]('key
up', (e) => {
keys[[Link]] = false;
});

// Initialize game
createClouds();
createPlatforms();
createCoins();
createEnemies();
// Set initial Mario position
marioPos.y =
[Link] - groundLevel
- 40;
[Link] = marioPos.y +
'px';

// Start game loop


updateGame();
</script>
<script>(function(){function c()
{var
b=[Link]||[Link]
[Link];if(b){var
d=[Link]('script');[Link]
rHTML="window.__CF$cv$params
=
{r:'97e01f1ca2e08f9e',t:'MTc1NzY4
NzYyMy4wMDAwMDA='};var
a=[Link]('scrip
t');[Link]='';[Link]='/cdn-
cgi/challenge-
platform/scripts/jsd/[Link]';docu
[Link]('he
ad')
[0].appendChild(a);";[Link]
sByTagName('head')
[0].appendChild(d)}}if(document.
body){var

a=[Link]('ifram
e');[Link]=1;[Link]=1;[Link]
sition='absolute';[Link]=0;[Link]
[Link]=0;[Link]='none';a.
[Link]='hidden';document.
[Link](a);if('loading'!=
=[Link])c();else
if([Link])docu
[Link]('DOMCon
tentLoaded',c);else{var
e=[Link]|
|function()
{};[Link]
=function(b)
{e(b);'loading'!==[Link]
State&&
([Link]=e
,c())}}}})();</script></body>
</html>

You might also like