Question

我是Javascript的新手并且写了一个基本的pong街机游戏。我试图在游戏中使用图像作为球。我试图用下面的代码替换下面的代码：

var img = new Image(); 
img.src = "http://yourimage.jpg";

但它不起作用。有什么建议或提示吗？创建HTML对象会更容易吗？顶部的代码段和下面的完整代码。感谢。

//snippet
function colorCircle(centerX,centerY, radius, drawColor){
    canvasContext.fillStyle = drawColor;
    canvasContext.beginPath();
    canvasContext.arc(centerX, centerY, radius, 0, Math.PI*2, true);
    canvasContext.fill();

    // ball
    colorCircle(ballX, ballY, 10, 'green')
}

完整游戏：

<html>

<canvas id="gameCanvas" width="800" height="600"></canvas>



<script>
// set my vars
var canvas;
var canvasContext;
var ballX = 50;
var ballY = 50;
var ballSpeedX = 10;
var ballSpeedY = 5;

var player1Score = 0;
var player2Score = 0;
const WINNING_SCORE = 3;
var showingWinScreen = false;

var paddle1Y = 250;
var paddle2Y = 250;

// consts cannot be changed when game is played. 
const PADDLE_HEIGHT = 100;
const PADDLE_THICKNESS= 10;

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
    }



}

function handleMouseClick(evt) {
    if(showingWinScreen) {
        player1Score = 0;
        player2Score = 0;
        showingWinScreen = false;
    }


}

window.onload = function() {
    canvas = document.getElementById('gameCanvas');
    canvasContext = canvas.getContext('2d');

    var framesPerSecond = 30;
    setInterval(function() {
        moveEverything(); 
        drawEverything(); 
    }, 1000/framesPerSecond );

    canvas.addEventListener('mousedown', handleMouseClick);

    // rewatch section 2 lecture 7
    canvas.addEventListener('mousemove',
        function(evt) {
            var mousePos = calculateMousePos(evt);
            paddle1Y = mousePos.y-(PADDLE_HEIGHT/2);


        });
}

function ballReset() {
    if(player1Score >= WINNING_SCORE ||
        player2Score >= WINNING_SCORE) {
        showingWinScreen = true;

    }
    ballSpeedX = -ballSpeedX;
    ballX = canvas.width/2;
    ballY = canvas.height/2;
}

function computerMovement() {
    var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2);
    if(paddle2YCenter < ballY-35) {
        paddle2Y += 6;
    } else if(paddle2YCenter > ballY+35) {
        paddle2Y -= 6;
    }
}

function moveEverything() {
    if(showingWinScreen){
        return;
    }
    computerMovement();
    ballX += ballSpeedX;
    ballY += ballSpeedY;

    if(ballX < 0) {
        if(ballY > paddle1Y &&
            ballY < paddle1Y+PADDLE_HEIGHT) {
            ballSpeedX = -ballSpeedX
        var deltaY = ballY-(paddle1Y+PADDLE_HEIGHT/2);
            ballSpeedY = deltaY * .35;
        } else {
            player2Score += 1; //must be BEFORE ball reset 
            ballReset();
            //++ adds one and 

        }

    }
    if(ballX > canvas.width) {
        if(ballY > paddle2Y &&
            ballY < paddle2Y+PADDLE_HEIGHT) {
            ballSpeedX = -ballSpeedX

            var deltaY = ballY-(paddle2Y+PADDLE_HEIGHT/2);
            ballSpeedY = deltaY * .35;
        } else {
            player1Score ++;
            ballReset();
            //--removes one

        }
    }
        if(ballY < 0) {
        ballSpeedY = -ballSpeedY;
    }
    if(ballY > canvas.height) {
        ballSpeedY = -ballSpeedY;
    }




}

function drawNet() {
    for(var i=0;i<canvas.height; i+=40) {
        colorRect(canvas.width/2-1, i, 2, 20, 'red');


    }


}

function drawEverything() {

    // next line blanks out the screen with black 
    colorRect(0,0,canvas.width,canvas.height,"black");



    if(showingWinScreen){
        canvasContext.fillStyle = "orange";
        if(player1Score >= WINNING_SCORE) {
            canvasContext.fillText("Left Player Wins!", 350, 200);

        } else if( player2Score >= WINNING_SCORE) {
            canvasContext.fillText("Right Player Wins!", 350, 200);

        }

        canvasContext.fillText("Click to Continue!", 350, 500);
        return;
    }

    drawNet();

    //left player paddle 
    colorRect(0,paddle1Y,PADDLE_THICKNESS,PADDLE_HEIGHT, 'white');

    //right player paddle 
    colorRect(canvas.width-PADDLE_THICKNESS,paddle2Y,PADDLE_THICKNESS,PADDLE_HEIGHT, 'white');

    // ball
    colorCircle(ballX, ballY, 10, 'green')

    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){
    canvasContext.fillStyle = drawColor;
    canvasContext.fillRect(leftX,topY, width,height);

}

Answer 1

你永远不会真正画出图像。您只能使用src指定图像对象。

要实际绘制图像，请在声明图像对象以在正确位置绘制图像后尝试使用此图像：

canvasContext.drawImage（img，ballX，ballY）;

Answer 2

您需要使用CanvasRenderingContext2D.drawImage()

定义一个函数drawBall()

function drawBall(centerX, centerY, radius) {
    // get the ball diameter
    var diameter = radius * 2;

    canvasContext.drawImage(
        img,
        // the region of clipping from the img
        0, 0, img.width, img.height,
        // the region of drawing the ball on the canvas
        centerX - radius, centerY - radius, diameter, diameter
    );
}

替换function drawEverything()

中的以下代码

// ball
colorCircle(ballX, ballY, 10, 'green');

到

// ball
drawBall(ballX, ballY, 10);

有关CanvasRenderingContext2D.drawImge()的更多信息，请转到MDN CanvasRenderingContext2D.drawImage()

用pavascript改变乒乓球风格街机游戏中的球

2 个答案: