Zamiana wygenerowanych elementów na obrazki

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

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