• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Zamiana wygenerowanych elementów na obrazki

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
+2 głosów
371 wizyt
pytanie zadane 9 października 2016 w JavaScript przez Dawid Wiśniewski Nowicjusz (140 p.)



Witam, stworzyłem bardzo prostą gierkę z poradnika, cel w niej jest prosty i myślę że każdemu znany.
Mamy dwie paletki, jedną kontrolujemy za pomocą myszki, a drugą kontroluje komputer, odbijamy piłkę między sobą a komputerem.

Gra działa, zlicza punkty, ale chciałbym ją upiększyć.

Gra ma czarne tło, niebieską piłkę i paletki - wszystko napisane w JS.

Ja chciałbym zamienić kulkę na mój własny obrazek kulki, tak żeby wszystko działało dalej tak samo z wyjątkiem wyglądu kuli z pustej na obrazek. 

Jeżeli byłoby to możliwe to analogicznie chciałbym zmienić tło na jakieś ładniejsze od czarnego koloru oraz paletki (prostokąty na coś innego), lecz nie wiem jak to zrobić dlatego tutaj proszę o pomoc.

Oto kod całej gry: http://pastebin.com/pCH2SCLQ

2 odpowiedzi

0 głosów
odpowiedź 9 października 2016 przez syguts Bywalec (2,200 p.)

Spróbuj tak:

<html>
<canvas id="gameCanvas" width="800" height="600"> </canvas>
<script>
var canvas;
var canvasContext;
var ballX = 50; // polozenie kuli w osi X
var ballY = 50; // polozenie kuli w osi Y
var ballSpeedX = 10; // szybkosc przemieszczania sie kuli w osi X
var ballSpeedY = 4; // szybkosc przemieszczania sie kuli w osi X
 
// punkty startowe graczy
var player1Score = 0;
var player2Score = 0;
 
var paddle1Y = 250; //polozenie paletki gracza na osi Y
var paddle2Y = 250; //polozenie paletki komputera na osi Y
const PADDLE_THICKNESS = 10; //grubosc paletek
const PADDLE_HEIGHT = 100; //wysokosc paletek
 
 
//sprawdzanie polozenia myszki
function calculateMousePos(evt) {
    var rect = canvas.getBoundingClientRect();
    var root = document.documentElement;
    var mouseX = evt.clientX - rect.left - root.scrollLeft;
    var mouseY = evt.clientY - rect.top - root.scrollTop;
    return {
        x:mouseX,
        y:mouseY
    };
}
 
window.onload = function() {
    canvas = document.getElementById('gameCanvas');
    canvasContext = canvas.getContext('2d');
 
    var framesPerSecond = 60;
    setInterval(function() {
            moveEverything();
            drawEverything();  
        }, 1000/framesPerSecond);
 
    canvas.addEventListener('mousemove',
        function(evt) {
            var mousePos = calculateMousePos(evt);
            paddle1Y = mousePos.y - (PADDLE_HEIGHT/2);
        });
}
 
// reset pozycji kuli
function ballReset() {
    ballSpeedX = -ballSpeedX;
    ballX = canvas.width/2;
    ballY = canvas.height/2;
}
 
// automatyczne sterowanie
function computerMovement() {
    var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2);
    if(paddle2YCenter < ballY - 35) {
        paddle2Y = paddle2Y + 6;
    } else if(paddle2YCenter > ballY + 35) {
        paddle2Y = paddle2Y - 6;
    }
}
 
function moveEverything() {
    computerMovement();
 
    ballX = ballX + ballSpeedX;
    ballY = ballY + ballSpeedY;
   
    if(ballX < 0) {
        if(ballY > paddle1Y &&
            ballY < paddle1Y+PADDLE_HEIGHT) {
            ballSpeedX = -ballSpeedX;
        } else {
            ballReset();
            player2Score++;
        }
    }
    if(ballX > canvas.width) {
        if(ballY > paddle2Y &&
            ballY < paddle2Y+PADDLE_HEIGHT) {
            ballSpeedX = -ballSpeedX;
        } else {
            ballReset();   
            player1Score++;
        }
    }
    if(ballY < 0) {
        ballSpeedY = -ballSpeedY;
    }
    if(ballY > canvas.height) {
        ballSpeedY = -ballSpeedY;
    }
}
 
function drawEverything() {
    // czarne tlo	
    colorRect(0,0,canvas.width,canvas.height, "picture.jpg");

 
    // lewa paletka
    colorRect(0,paddle1Y,PADDLE_THICKNESS,PADDLE_HEIGHT,'white');
 
    // prawa paletka (sterowana przez komputer)
    colorRect(canvas.width-PADDLE_THICKNESS,paddle2Y,PADDLE_THICKNESS,PADDLE_HEIGHT,'white');
 
    // pilka
    colorCircle(ballX, ballY, 10, '#0066CC');
 
//tablica punktow
    canvasContext.fillText(player1Score, 100, 100);
    canvasContext.fillText(player2Score, canvas.width-100, 100);
}
 
function colorCircle(centerX, centerY, radius, drawColor) {
    canvasContext.fillStyle = drawColor;
    canvasContext.beginPath();
    canvasContext.arc(centerX, centerY, radius, 0,Math.PI*2,true);
    canvasContext.fill();
}
 
function colorRect(leftX,topY, width,height, drawColor) {
	var image = new Image();
	image.src = drawColor;
	var pat=canvasContext.createPattern(image, "repeat");
    canvasContext.fillStyle = pat;
    canvasContext.fillRect(leftX,topY, width,height);
}
</script>
</html>

W miejscu w którym wczesniej podawales kolor teraz podaj sciezki do plików np dla tła:

 colorRect(0,0,canvas.width,canvas.height, "picture.jpg");

analogicznie dla paletek

komentarz 9 października 2016 przez Dawid Wiśniewski Nowicjusz (140 p.)
edycja 9 października 2016 przez Dawid Wiśniewski
// edit
Dzięki! Mój błąd, tło działa, coś pomajsterkuje i będzie dobrze!
Wkleiłem całą zawartość do .js nie usuwając kodu html dlatego nie działało.

Jest tylko jeden problem. Paletki zniknęły a obrazek kuli się przewija (z każdym ruchem obrazek zmienia położenie tzn. jeśli wstawiłbym jakiś obrazek z napisem, to litery by sie przewijały - jeśli rozumiesz o co mi chodzi)
komentarz 9 października 2016 przez syguts Bywalec (2,200 p.)
nie bardzo rozumiem, wklej aktualny kod to moze cos spróbuje poradzić w wolnej chwili
komentarz 9 października 2016 przez Dawid Wiśniewski Nowicjusz (140 p.)

Może będzie prościej jak opiszę całą historię, otóż muszę zrobić grę z udziałem pewnej osoby (długa historia), zamiast kulki ma być jej twarz zaokrąglona jednak po edycji kodu coś się psuje i zamiast pokazywać oryginalny obrazek ciągle go przewija - link oraz zniknęły paletki.

Oto kod źródłowy powyższego skryptu - http://pastebin.com/jz0NB1Dk

komentarz 10 października 2016 przez syguts Bywalec (2,200 p.)

Spróbuj tak:

var canvas;
var canvasContext;
var ballX = 50; // polozenie kuli w osi X
var ballY = 50; // polozenie kuli w osi Y
var ballSpeedX = 10; // szybkosc przemieszczania sie kuli w osi X
var ballSpeedY = 4; // szybkosc przemieszczania sie kuli w osi X
 
// punkty startowe graczy
var player1Score = 0;
var player2Score = 0;
 
var paddle1Y = 250; //polozenie paletki gracza na osi Y
var paddle2Y = 250; //polozenie paletki komputera na osi Y
const PADDLE_THICKNESS = 10; //grubosc paletek
const PADDLE_HEIGHT = 100; //wysokosc paletek
 
 
//sprawdzanie polozenia myszki
function calculateMousePos(evt) {
    var rect = canvas.getBoundingClientRect();
    var root = document.documentElement;
    var mouseX = evt.clientX - rect.left - root.scrollLeft;
    var mouseY = evt.clientY - rect.top - root.scrollTop;
    return {
        x:mouseX,
        y:mouseY
    };
}
 
window.onload = function() {
    canvas = document.getElementById('gameCanvas');
    canvasContext = canvas.getContext('2d');
 
    var framesPerSecond = 60;
    setInterval(function() {
            moveEverything();
            drawEverything();  
        }, 1000/framesPerSecond);
 
    canvas.addEventListener('mousemove',
        function(evt) {
            var mousePos = calculateMousePos(evt);
            paddle1Y = mousePos.y - (PADDLE_HEIGHT/2);
        });
}
 
// reset pozycji kuli
function ballReset() {
    ballSpeedX = -ballSpeedX;
    ballX = canvas.width/2;
    ballY = canvas.height/2;
}
 
// automatyczne sterowanie
function computerMovement() {
    var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2);
    if(paddle2YCenter < ballY - 35) {
        paddle2Y = paddle2Y + 6;
    } else if(paddle2YCenter > ballY + 35) {
        paddle2Y = paddle2Y - 6;
    }
}
 
function moveEverything() {
    computerMovement();
 
    ballX = ballX + ballSpeedX;
    ballY = ballY + ballSpeedY;
   
    if(ballX < 0) {
        if(ballY > paddle1Y &&
            ballY < paddle1Y+PADDLE_HEIGHT) {
            ballSpeedX = -ballSpeedX;
        } else {
            ballReset();
            player2Score++;
        }
    }
    if(ballX > canvas.width) {
        if(ballY > paddle2Y &&
            ballY < paddle2Y+PADDLE_HEIGHT) {
            ballSpeedX = -ballSpeedX;
        } else {
            ballReset();  
            player1Score++;
        }
    }
    if(ballY < 0) {
        ballSpeedY = -ballSpeedY;
    }
    if(ballY > canvas.height) {
        ballSpeedY = -ballSpeedY;
    }
}
 
function drawEverything() {
    // czarne tlo  
    colorRectBg(0,0,canvas.width,canvas.height, "picture.jpg");
 
 
    // lewa paletka
    colorRectPalet(0,paddle1Y,PADDLE_THICKNESS,PADDLE_HEIGHT,'white');
 
    // prawa paletka (sterowana przez komputer)
    colorRectPalet(canvas.width-PADDLE_THICKNESS,paddle2Y,PADDLE_THICKNESS,PADDLE_HEIGHT,'white');
 
    // pilka
    colorCircle(ballX, ballY, 30, 'Koala.jpg');
 
//tablica punktow
    canvasContext.fillText(player1Score, 100, 100);
    canvasContext.fillText(player2Score, canvas.width-100, 100);
}
 
function colorCircle(centerX, centerY, radius, drawColor) {
	var image = new Image();
    image.src = drawColor;
	canvasContext.drawImage(image, centerX, centerY, image.width/2, image.height/2);
    canvasContext.beginPath();
   
}
 
function colorRectPalet(leftX,topY, width,height, drawColor) {
    canvasContext.fillStyle = drawColor;
    canvasContext.fillRect(leftX,topY, width,height);
}
 
function colorRect(leftX,topY, width,height, drawColor) {
    var image = new Image();
    image.src = drawColor;
    var pat=canvasContext.createPattern(image, "repeat");
    canvasContext.fillStyle = pat;
    canvasContext.fillRect(leftX,topY, width,height);
}
 
function colorRectBg(leftX,topY, width,height, drawColor) {
    var image = new Image();
    image.src = drawColor;
    var pat=canvasContext.createPattern(image, "repeat");
    canvasContext.fillStyle = pat;
    canvasContext.fillRect(leftX,topY, width,height);
}

Wydaje mi sie ze co do pileczki to tu cos z przeliczaniem jest nie tak bo sie dziwnie pojawia w innym miejscu po pewnym czasie. Nie mniej jednak potrzebowales grafik to na ile bylem w stanie pomóc to pomoglem

komentarz 10 października 2016 przez syguts Bywalec (2,200 p.)
Ps. Mam nadzieje ze nie zamierzasz robić nikomu przykrości tym programem czy tez w jakikolwiek sposób poniżać innej osoby
0 głosów
odpowiedź 9 października 2016 przez Czort Nałogowiec (32,500 p.)

Podobne pytania

0 głosów
2 odpowiedzi 454 wizyt
0 głosów
0 odpowiedzi 140 wizyt
0 głosów
2 odpowiedzi 725 wizyt
pytanie zadane 8 grudnia 2017 w Nasze projekty przez IgorPia Nowicjusz (120 p.)

93,087 zapytań

142,045 odpowiedzi

321,468 komentarzy

62,435 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...