Skocz do zawartości

  • 👋 Witaj na MPCForum!

    Przeglądasz forum jako gość, co oznacza, że wiele świetnych funkcji jest jeszcze przed Tobą! 😎

    • ✅ Pełny dostęp do działów i ukrytych treści
    • ✅ Możliwość pisania i odpowiadania w tematach
    • ✅ System prywatnych wiadomości
    • ✅ Zbieranie reputacji i rozwijanie swojego profilu
    • ✅ Członkostwo w jednej z największych społeczności graczy

    👉 Dołączenie zajmie Ci mniej niż minutę – a zyskasz znacznie więcej!

    Zarejestruj się teraz

Rekomendowane odpowiedzi

juvik Uczeń

juvik

Opublikowano
Uczeń

juvik

Opublikowano

Witam postanowiłem napisać tutorial o pisaniu gier w html5 i javascript.

Jest on przeznaczony dla osób, które przynajmniej w podstawowym stopniu ogarniają w/w języki.

Zaczynajmy!

Pierw robimy szkielet html

<!doctype html>
<html>
<head>
<title>Game</title>
<script>
</script>
</head>
<body>
<canvas id='canvs'>
Canvas nie jest obsługiwany! 
</canvas>
<script>
</script>
</body>
</html>

Ok koniec z html, teraz piszemy w js. Zacznijmy od deklaracji zmiennych.

var game;
var canvas;
var pozX=500; //pozycja startowa X
var pozY=500; //pozycja startowa Y 
var height=800; //wysokosc canvas
var width=600; //serokosc canvas
var refresh=60;//prędkość odświeżania 
var enemy = [];//tablica przechowująca obiekty 
var ctx;
var count=0;//licznik obiektów
var limit=5;//limit przeciwników na jedną plansze
var speed = 5;//prędkość pocisku
var speed_p = 3;//prędkość obiektów
var hits=0;//ilość zestrzelonych obiektów
var gameLoop;

Ok teraz napiszmy parę funkcji.

function startgame() {
//na razie puste
}
function gracz(X, Y, pocisk, status){
this.x = X; //współrzędna x obiektu
this.y = Y; //współrzędna y obiektu
this.pocisk=pocisk; //Czy obiekt jest pociskiem
this.status = status; //Czy obiekt nie został trafiony
}
function startG() {
game = document.getElementById("canvs"); //przypisujemy zmiennej 'game' element canvas
game.height = height; //ustawiamy wysokość na zmienną 'height'
game.width = width; //ustawiamy szerokość na zmienną 'width'
enemy[0] = new gracz(100, 100); //do tablicy przeciwnicy na pozycji zero ustawiamy koordynaty na 100 i 100 
gameLoop = setInterval(startgame, refresh); //włączamy główną pętle gry
 window.addEventListener('keydown', whatKey, true); //sprawdzamy czy jakiś klawisz został naciśnięty
ctx = game.getContext('2d');
}
function whatKey(evt) { 
        switch (evt.keyCode) { //jaki klawisz zostal nacisniety
 case 37:
 break;
 case 39:
 break;
 case 32:
 break;
 case 38:
 break;
 case 40:
 break;
        }
      }

Ok zajmijmy się funkcją startgame

function startgame() {
 ctx.fillStyle = "rgba(0, 0, 0, 1)";
    ctx.fillRect(0, 0, width, height);//czyścimy plansze
//////////////////////////////////rysujemy gracza
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.arc(pozX, pozY, 10, 0, 2*Math.PI, true);
ctx.closePath();
ctx.fill();
////////////////////////////////
if(count++ < limit){//sprawdzanie czy liczba obietków jest w normie
var bools = new gracz(Math.floor(width*Math.random()), Math.floor(height/2*Math.random()), false, 0); //losowanie pozycji przeciwnika
enemy[enemy.length] = bools; //wstawienie pozycji do tablicy
}
for(var i=0;i < enemy.length; i++){ //pętla
if(enemy[i].status == 0 || enemy[i].pocisk){ //jeśli obiekt nie został zestrzelony
/////////////////////////////
if(enemy[i].pocisk){
ctx.fillStyle = "red"; //gdy jest to pocisk pokoloruj go na czerwono
}else{ ctx.fillStyle = "yellow"; } //gdy przeciwnik pokoloruj na żólto
ctx.beginPath();
        ctx.rect(enemy[i].x, enemy[i].y, 15, 10); //rysujemy przeciwnika
        ctx.closePath();
        ctx.fill();
///////////////////////////
//////////////////////////
if (enemy[i].x < pozX && !enemy[i].pocisk)enemy[i].x += speed_p-1;
if (enemy[i].y < pozY && !enemy[i].pocisk)enemy[i].y += speed_p-1; //proste AI goniące gracza po mapie
if (enemy[i].x > pozX && !enemy[i].pocisk)enemy[i].x -= speed_p-1;
if (enemy[i].y > pozY && !enemy[i].pocisk)enemy[i].y -= speed_p-1;
//////////////////////
/////////////////////jeśli przeciwnik cię złapał, przegrałeś
if(pozX == enemy[i].x && enemy[i].y == pozY && !enemy[i].pocisk){
clearInterval(gameLoop);
  ctx.font = 50;
           ctx.fillStyle = "white";
            ctx.fillText("przegrales", width/2, height/2);
 
            ctx.font = 50;
            ctx.fillStyle = "white";
            ctx.fillText("Odswiez strone, by powtorzyc", width/2+30, height/2+30); 
}
////////////////////////
}
         if(hits>=limit)//////////jeśli strąciliśmy wszystkich przeciwników wygraliśmy 
{
clearInterval(gameLoop);
  ctx.font = 50;
           ctx.fillStyle = "white";
            ctx.fillText("Wygrales", width/2, height/2);
 
            ctx.font = 50;
            ctx.fillStyle = "white";
            ctx.fillText("Odswiez strone, by powtorzyc", width/2+30, height/2+30);
}
////////////////////////////
/////////////////////////////sprawdzamy czy pocisk trafił w cel
if(enemy[i].pocisk){
enemy[i].y -= speed;
for(var j=0;j<enemy.length;j++){
if(enemy[j].y > enemy[i].y && enemy[j].y < pozY && !enemy[j].pocisk)
if(enemy[j].x < enemy[i].x && (enemy[i].x < enemy[j].x+15 || enemy[i].x < enemy[j].x-15) && !enemy[j].pocisk){enemy[j].status = 1;enemy[j].x = -100;enemy[j].y = 0;hits++;}
}
}
////////////////////////
}
}

Ok mamy już prawie wszystko jeszcze tylko sterowanie

function whatKey(evt) {
        switch (evt.keyCode) {
        case 37://lewa strzałka
pozX -= speed_p;
if(pozX-10 < 0)pozX=10;//kolizja
          break;
        case 39: //prawa strzałka
pozX += speed_p;
if(pozX+10 > width)pozX=width-10;//kolizja
          break;
 case 32://spacja
 enemy[enemy.length] = new gracz(pozX, pozY, true, 1);
 break;
 case 38://strzałka w góre
 pozY -= speed_p
  if(pozY-10 < 0)pozY=10;//kolizja
 break;
 case 40://strzałka w dół
 pozY += speed_p;
 if(pozY+10 > wysokosc)pozY=height-10;//kolizja
 break;
        }
      }

Jeszcze tylko aktywować całą gre

...
<canvas id='canvs'>
Canvas nie jest obsługiwany! 
</canvas>
<script>
startG();
</script>
...

Całość prezentuje się tak:

<!doctype html>
<html>
<head>
<title>Game</title>
<style>
</style>
<script>
var game;
var canvas;
var pozX=500; //pozycja startowa X
var pozY=500; //pozycja startowa Y 
var height=800; //wysokosc canvas
var width=600; //serokosc canvas
var refresh=60;//prędkość odświeżania 
var enemy = [];//tablica przechowująca obiekty 
var ctx;
var count=0;//licznik obiektów
var limit=5;//limit przeciwników na jedną plansze
var speed = 5;//prędkość pocisku
var speed_p = 3;//prędkość obiektów
var hits=0;//ilość zestrzelonych obiektów
var gameLoop;
function startgame() {
 ctx.fillStyle = "rgba(0, 0, 0, 1)";
    ctx.fillRect(0, 0, width, height);//czyścimy plansze
//////////////////////////////////rysujemy gracza
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.arc(pozX, pozY, 10, 0, 2*Math.PI, true);
ctx.closePath();
ctx.fill();
////////////////////////////////
if(count++ < limit){//sprawdzanie czy liczba obietków jest w normie
var bools = new gracz(Math.floor(width*Math.random()), Math.floor(height/2*Math.random()), false, 0); //losowanie pozycji przeciwnika
enemy[enemy.length] = bools; //wstawienie pozycji do tablicy
}
for(var i=0;i < enemy.length; i++){ //pętla
if(enemy[i].status == 0 || enemy[i].pocisk){ //jeśli obiekt nie został zestrzelony
/////////////////////////////
if(enemy[i].pocisk){
ctx.fillStyle = "red"; //gdy jest to pocisk pokoloruj go na czerwono
}else{ ctx.fillStyle = "yellow"; } //gdy przeciwnik pokoloruj na żólto
ctx.beginPath();
        ctx.rect(enemy[i].x, enemy[i].y, 15, 10); //rysujemy przeciwnika
        ctx.closePath();
        ctx.fill();
///////////////////////////
//////////////////////////
if (enemy[i].x < pozX && !enemy[i].pocisk)enemy[i].x += speed_p-1;
if (enemy[i].y < pozY && !enemy[i].pocisk)enemy[i].y += speed_p-1; //proste AI goniące gracza po mapie
if (enemy[i].x > pozX && !enemy[i].pocisk)enemy[i].x -= speed_p-1;
if (enemy[i].y > pozY && !enemy[i].pocisk)enemy[i].y -= speed_p-1;
//////////////////////
/////////////////////jeśli przeciwnik cię złapał, przegrałeś
if(pozX == enemy[i].x && enemy[i].y == pozY && !enemy[i].pocisk){
clearInterval(gameLoop);
  ctx.font = 50;
           ctx.fillStyle = "white";
            ctx.fillText("przegrales", width/2, height/2);
 
            ctx.font = 50;
            ctx.fillStyle = "white";
            ctx.fillText("Odswiez strone, by powtorzyc", width/2+30, height/2+30);
}
////////////////////////
}
         if(hits>=limit)//////////jeśli strąciliśmy wszystkich przeciwników wygraliśmy
{
clearInterval(gameLoop);
  ctx.font = 50;
           ctx.fillStyle = "white";
            ctx.fillText("Wygrales", width/2, height/2);
 
            ctx.font = 50;
            ctx.fillStyle = "white";
            ctx.fillText("Odswiez strone, by powtorzyc", width/2+30, height/2+30);
}
////////////////////////////
/////////////////////////////sprawdzamy czy pocisk trafił w cel
if(enemy[i].pocisk){
enemy[i].y -= speed;
for(var j=0;j<enemy.length;j++){
if(enemy[j].y > enemy[i].y && enemy[j].y < pozY && !enemy[j].pocisk)
if(enemy[j].x < enemy[i].x && (enemy[i].x < enemy[j].x+15 || enemy[i].x < enemy[j].x-15) && !enemy[j].pocisk){enemy[j].status = 1;enemy[j].x = -100;enemy[j].y = 0;hits++;}
}
}
////////////////////////
}
}
function gracz(X, Y, pocisk, status){
this.x = X; //pozycja x obiektu
this.y = Y; //pozycja y obiektu
this.status = status; //czy obiekt nie jest zestrzelony
this.pocisk=pocisk;//czy obiekt nie jest pociskiem
}
function startG() {
game = document.getElementById("canvs"); //przypisujemy zmiennej 'game' element canvas
game.height = height; //ustawiamy wysokość na zmienną 'height'
game.width = width; //ustawiamy szerokość na zmienną 'width'
enemy[0] = new gracz(100, 100); //do tablicy enemy na pozycji zero ustawiamy koordynaty na 100 i 100 
gameLoop = setInterval(startgame, refresh); //włączamy główną pętle gry
 window.addEventListener('keydown', whatKey, true); //sprawdzamy czy jakiś klawisz został naciśnięty
ctx = game.getContext('2d');
}
function whatKey(evt) {
        switch (evt.keyCode) {
        case 37: //lewa strzałka strzałka
pozX -= speed_p;
if(pozX-10 < 0)pozX=10;//kolizja
          break;
        case 39: //prawa strzałka
pozX += speed_p;
if(pozX+10 > width)pozX=width-10;//kolizja
          break;
 case 32://spacja
 enemy[enemy.length] = new gracz(pozX, pozY, true, 1);
 break;
 case 38://strzałka w góre
 pozY -= speed_p
  if(pozY-10 < 0)pozY=10;//kolizja
 break;
 case 40:
 pozY += speed_p;//strzałka w dół
 if(pozY+10 > height)pozY=height-10;//kolizja
 break;
        }
      }
</script>
</head>
<body>
<canvas id='canvs'>
Canvas nie jest obsługiwany! 
</canvas>
<script>
startG();
</script>
</body>
</html>

OK to by było na tyle mam nadzieję, że poradnik się przyda.

Mam świadomość,że gra nie jest idealna i ma trochę błędów, ale dla początkujących powinna być prosta do ogarnięcia i naprawy ewentualnych błędów. A co lepiej uczy programowania od edycji jakiegoś kodu?

Sopelek997 Weteran

Sopelek997

Opublikowano
Weteran

Sopelek997

Opublikowano

nie ref tylko 'reflesh' xD

 

Jak robisz tuta to chociaż sformatuj porządnie kod i nazywaj zmienne w jednym języku.

981841412442977292370.png
juvik Uczeń

juvik

Opublikowano
Uczeń

juvik

  • Autor
Opublikowano

@up 

 

 

nie ref tylko 'reflesh'  xD

A co za różnica?

 

 

Jak robisz tuta to chociaż sformatuj porządnie kod i nazywaj zmienne w jednym języku.

Ok zmieniłem zmienne na jeden język

shooly Rekrut

shooly

Opublikowano
Rekrut

shooly

Opublikowano

Kod jest totalnie nieczytelny - głównie przez "///////////////////////////////////////", losowe spacje i TABy.

 

A odświeżać to po ang. "refresh", a nie "reflesh".

No i - mogłeś chociaż napisać jaką grę tworzysz i pisać po kolei.

 

P.S. "Funkcją", a nie "funkcjom".

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

Tematy
×
×
  • Dodaj nową pozycję...