<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Platformer Game</title>
</head>
<body>
<style>
canvas
{
background: lightgreen;
display: block;
margin: 0 auto;
}
h1
{
text-align: center;
}
</style>
<h1>Przygody Pandy</h1>
<canvas id="gra" width="1280px" height="580px"></canvas>
<script>
var can = document.getElementById('gra');
var ctx = can.getContext('2d');
var GrafikaPlatformy = new Image();
GrafikaPlatformy.src = 'https://thumbs.dreamstime.com/b/d-drzewo-na-kawa%C5%82ek-ziemi-wyspie-troszk%C4%99-27654618.jpg';
var plat = [];
plat[0] = new Platforma(0, 500,750, 80);
plat[1] = new Platforma(730, 500,750, 80);
plat[2] = new Platforma(100, 250,100, 40);
plat[3] = new Platforma(240, 360,100, 40);
plat[4] = new Platforma(500, 430,100, 40);
plat[5] = new Platforma(380, 180,100, 40);
plat[6] = new Platforma(730, 300,100, 40);
plat[7] = new Platforma(670, 100,100, 40);
plat[8] = new Platforma(1000, 390,100, 40);
plat[9] = new Platforma(200, 70,100, 40);
plat[10] = new Platforma(1160, 320,100, 10);
plat[11] = new Platforma(910, 160,100, 40);
var GrafikaMonety = new Image();
GrafikaMonety.src = 'https://e7.pngegg.com/pngimages/879/138/png-clipart-coin-coin-money-thumbnail.png';
var mon = [];
mon[0] = new Moneta(130, 190, 35, 35);
mon[1] = new Moneta(270, 300,35, 35);
mon[2] = new Moneta(530, 330,35, 35);
mon[3] = new Moneta(410, 120,35, 35);
mon[4] = new Moneta(760, 240,35, 35);
mon[5] = new Moneta(700, 40,35, 35);
mon[6] = new Moneta(1030, 330,35, 35);
mon[7] = new Moneta(230, 30,35, 35);
mon[8] = new Moneta(1190, 260,35, 35);
var przesz = [];
przesz[0] = new Przeszkoda(40, 170,35, 40, 5,'https://thumbs.dreamstime.com/b/bambus-z-li%C5%9B%C4%87mi-zielony-%C5%82odyga-ro%C5%9Bliny-azjatycki-patyk-i-ga%C5%82%C4%85%C5%BA-laska-azjatycka-ekologia-%C5%9Bwie%C5%BCo%C5%9B%C4%87-rysunek-p%C5%82aski-198442014.jpg');
przesz[1] = new Przeszkoda(420, 340,35, 40, 10,'https://img.pixers.pics/pho_wat(s3:700/FO/31/65/46/00/700_FO31654600_cb2060edba95befb33f6948dbc01832c.jpg,543,700,cms:2018/10/5bd1b6b8d04b8_220x50-watermark.png,over,323,650,jpg)/naklejki-rysunek-siedzacego-lwa.jpg.jpg');
var Grafikapostaci = new Image();
Grafikapostaci.src = 'https://i.pinimg.com/736x/69/d8/3f/69d83f0dfba0d3e4283e932559da20aa.jpg';
var xPos = 10;
var yPos = 20;
var szerPos = 50;
var wysPos = 50;
var hp = 100;
var wysSkok = 120;
var licznik = 0;
document.addEventListener('keydown',ruchPostaci, false);
var dx = 0;
function ruchPostaci(e)
{
if(e.keyCode == 37)
{
dx = -2;
}
else if(e.keyCode == 39)
{
dx = 2;
}
else if(e.keyCode == 38 && dy == 0)
{
dy = -3;
}
}
document.addEventListener('keyup', stop, false);
function stop(e)
{
if(e.keyCode == 37)
{
dx = 0;
}
else if(e.keyCode == 39)
{
dx = 0;
}
}
function kolizjaZMoneta()
{
for (var i=0; i<mon.length; i++)
{
if(yPos < mon[i].y + mon[i].wys/2 &&
yPos + wysPos > mon[i].y + mon[i].wys/2 &&
xPos < mon[i].x + mon[i].szer/2&&
xPos + szerPos > mon[i].x + mon[i].szer/2)
{
mon[i].czywidoczna = false;
}
}
}
function kolizjaZPrzeszkoda()
{
for (var i=0; i<przesz.length; i++)
{
if(yPos < przesz[i].y + przesz[i].wys/2 &&
yPos + wysPos > przesz[i].y + przesz[i].wys/2 &&
xPos < przesz[i].x + przesz[i].szer/2&&
xPos + szerPos > przesz[i].x + przesz[i].szer/2)
{
przesz[i].czywidoczna = false;
hp = hp - przesz[i].zabiera;
if (hp <= 0)
{
location.reload();
}
}
}
}
function rysujplatformy()
{
for (var i = 0;i<plat.length;i++)
{
ctx.drawImage(GrafikaPlatformy, plat[i].x, plat[i].y, plat[i].szer, plat[i].wys);
}
}
function rysujmonety()
{
for (var i = 0;i<mon.length;i++)
{
if (mon[i].czywidoczna == true)\
{
ctx.drawImage(GrafikaMonety, mon[i].x, mon[i].y, mon[i].szer, mon[i].wys)
}
}
}
function rysujprzeszkody()
{
for (var i = 0;i<przesz.length;i++)
{
if (przesz[i].czywidoczna == true)
{
ctx.drawImage(przesz[i].GrafikaPrzeszkody, przesz[i].x, przesz[i].y, przesz[i].szer, przesz[i].wys);
}
}
}
var dy = 0;
document.addEventListener('keydown',ruchPostaci, false);
var dx = 0;
function rysuj()
{
ctx.clearRect(0,0,can.width,can.height);
rysujplatformy();
rysujmonety();
rysujprzeszkody();
ctx.drawImage(Grafikapostaci, xPos, yPos, szerPos, wysPos)
grawitacja();
xPos = xPos + dx;
kolizjaZMoneta();
kolizjaZPrzeszkoda();
}
function Platforma(px, py, pszer, pwys)
{
this.x = px;
this.y = py;
this.szer = pszer;
this.wys = pwys;
}
function Moneta (px, py, pszer, pwys)
{
this.x = px;
this.y = py;
this.szer = pszer;
this.wys = pwys;
this.czywidoczna = true;
}
function grawitacja()
{
if (dy >= 0)
{
dy = 3;
for (var i=0; i<plat.length; i++)
{
if(yPos + wysPos > plat[i].y &&
yPos + 0.8*wysPos < plat[i].y &&
xPos + szerPos/2 > plat[i].x &&
xPos + szerPos/2 <plat[i].x + plat[i].szer)
{
dy = 0;
}
}
}
else
{
licznik = licznik + 3;
if (licznik >= wysSkok)
{
dy = 0;
licznik = 0;
}
}
yPos = yPos + dy;
}
function czyKoniec()
{
czySaMonety = false;
for (var i=0; i<mon.length; i++)
{
if(mon[i].czywidoczna == true)
{
czySaMonety = true;
}
}
if (czySaMonety == false)
{
ctx.clearRect(0,0,can.width,can.height);
ctx.font = "120px Georgia";
ctx.fillText("WYGRYWASZ", 200, 300);
}
}
function Przeszkoda (px, py, pszer, pwys, pzabiera, pnazwa)
{
this.x = px;
this.y = py;
this.szer = pszer;
this.wys = pwys;
this.czywidoczna = true;
this.zabiera = pzabiera;
this.GrafikaPrzeszkody = new Image();
this.GrafikaPrzeszkody.src = pnazwa;
}
</script>
</body>
</html>
