JavaScript Не заполнение холста - PullRequest
Новая
       22

JavaScript Не заполнение холста

0 голосов
/ 04 апреля 2020

I просто начал писать эту программу, впервые применив JavaScript для рисования изображений. Это dr aws фон, если я уберу объявление var = turret, но как только я объявлю turret, оно не сможет нарисовать фон. Любые идеи относительно того, что происходит?

Спасибо, 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaShooter</title>
    <style></style>
</head>

<body>
    <canvas id="gameCanvas" width="700" height="500"></canvas>
    <script>
        const FPS = 30; //frames per second rate
        const turretSize = 30; //turret height in px

        /** @type {HTMLCanvasElement} */
        var canv = document.getElementById("gameCanvas");
        var ctx = canv.getContext("2d");

        var turret = {
            x: canv.width / 2;
            y: canv.height / 2;
            r: turretSize / 2;
            a: 90 / 180 * Math.PI; //converted to radians
        }

        //game loop
        setInterval(update, 1000/FPS);

        function update(){
            //draw background
            ctx.fillStyle = "black";
            ctx.fillRect(0,0,canv.width, canv.height); 

            //draw triangular turret
            ctx.strokeStyle = "yellow";
            stroke.lineWidth = 1;

            ctx.beginPath();
            ctx.moveTo(   //tip of turret
                turret.x + turret.r * Math.cos(turret.a), 
                turret.y - turret.r * Math.sin(turret.a)  
                      );
            ctx.lineTo(   //rear left of turret
                turret.x - ship.r * Math.cos(turret.a) + Math.sin(turret.a),
                turret.y + ship.r * Math.cos(turret.a) - Math.sin(turret.a)
            )
            ctx.stroke();
        }

1 Ответ

0 голосов
/ 04 апреля 2020

Во-первых, когда вы делаете башню, вы используете точки с запятой. Попробуйте: 

var turret = {
    x: canv.width / 2, // try commas instead
    y: canv.height / 2,
    r: turretSize / 2,
    a: 90 / 180 * Math.PI //converted to radians
}

Есть некоторые другие ошибки, такие как stroke.lineWidth, ход не определен и ship.r, судно не определено. Надеюсь, это поможет вам правильно определить башню.

...