个人中心
gpt4 book ai didi

javascript - 为什么我的游戏大小取决于我如何设置 Canvas 大小

转载 作者：太空宇宙 更新时间：2023-11-04 13:21:31 24 4
gpt4 key购买 nike

我有一个用于 JavaScript 游戏的 Canvas 。使用 jQuery 或外部 CSS 时， Canvas 大小正确，但游戏图形比应有的大(导致大部分图形不显示在屏幕上)。

使用内联 CSS 时，我没有遇到任何图形问题。虽然它确实完成了工作，但我需要能够随时调整 Canvas 的大小。

当使用 jQuery 时，我在调整大小后获取 Canvas 的上下文，希望这会起作用，但它没有。有人可以告诉我发生了什么，或者可以指导我到哪里可以了解有关管理 HTML Canvas 上下文的更多信息吗？

这是我的 HTML 代码，不包含内联 css

HTML:

<!DOCTYPE html>
<html>

        <head>
                <script type = "text/javascript" src = "//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
                <script type = "text/javascript" src = "games/snake.js"></script>

                <link rel = "stylesheet" type = "text/css" href = "styles/home.css" />
        </head>

        <body>
                <div id = "navBar" class = "navAtt">
                        <div id = "firstButton" class = "navButton">Play Game</div> 
                </div>

                <div id = "mainView" class = "center">
                        <canvas id = "canvas" class = "center"></canvas>
                </div> 

                <script>
                        var firstButton = $("#firstButton");
                        var canvas = $("#canvas");

                        firstButton.click(function() {
                                /* This is where I was sizing with jQuery; no other size methods were used
                                        canvas.width(450);
                                        canvas.height(400);
                                */
                                var ctx = $("#canvas")[0].getContext("2d");
                                startSnakeGame(canvas.width(), canvas.height(), ctx);
                        });
                </script>
        </body>
</html>

CSS:

body {
        background-color: #66C2FF;
        margin: 0;
}

#navBar {
        border-bottom: 2px solid #2CABB4;
        position: fixed;
        width: 100%;
}

#mainView {
        padding-top: 100px;
        width: 1200px;
}

#canvas { /* This is how I'm affecting the size; This is blank when I try using jQuery */
        width: 450px;
        height: 400px;
}

.center {
        margin-left: auto;
        margin-right: auto;
}

.navAtt {
        background-color: #29A3A3;
        height: 40px;
        opacity: 0.7;
}

.navButton {
        padding: 10px 20px;
        float:left;
}

JavaScript(游戏)

function startSnakeGame(w, h, ctx) {
    init();

    var cw = 10;
    var d;
    var food;
    var score;
    var cw = 10;
    var d;
    var food;
    var score;
    var snake_array; 

    function init() {
        d = "right"; 
        create_snake();
        create_food(); 
        score = 0;

        if(typeof game_loop != "undefined") clearInterval(game_loop);
        game_loop = setInterval(paint, 60);
    }

    function create_snake() {
        var length = 5; 
        snake_array = []; 
        for(var i = length-1; i>=0; i--) {
            snake_array.push({x: i, y:0});
        }
    }

    function create_food() {
        food = {
            x: Math.round(Math.random()*(w-cw)/cw), 
            y: Math.round(Math.random()*(h-cw)/cw), 
        };
    }

    function paint() {
        ctx.fillStyle = "white";
        ctx.fillRect(0, 0, w, h);
        ctx.strokeStyle = "black";
        ctx.strokeRect(0, 0, w, h);

        var nx = snake_array[0].x;
        var ny = snake_array[0].y;

        if(d == "right") nx++;
        else if(d == "left") nx--;
        else if(d == "up") ny--;
        else if(d == "down") ny++;

        if(nx == -1 || nx == w/cw || ny == -1 || ny == h/cw || check_collision(nx, ny, snake_array)) {
            init();
            return;
        }

        if(nx == food.x && ny == food.y) {
            var tail = {x: nx, y: ny};
            score++;
            create_food();
        } else {
            var tail = snake_array.pop(); 
            tail.x = nx; tail.y = ny;
        }

        snake_array.unshift(tail);

        for(var i = 0; i < snake_array.length; i++) {
            var c = snake_array[i];
            paint_cell(c.x, c.y);
        }

        paint_cell(food.x, food.y);
        var score_text = "Score: " + score;
        ctx.fillText(score_text, 5, h-5);
    }

    function paint_cell(x, y) {
        ctx.fillStyle = "blue";
        ctx.fillRect(x*cw, y*cw, cw, cw);
        ctx.strokeStyle = "white";
        ctx.strokeRect(x*cw, y*cw, cw, cw);
    }

    function check_collision(x, y, array) {
        for(var i = 0; i < array.length; i++) {
            if(array[i].x == x && array[i].y == y)
             return true;
        }
        return false;
    }

    $(document).keydown(function(e) {
        var key = e.which;
        if(key == "37" && d != "right") d = "left";
        else if(key == "38" && d != "down") d = "up";
        else if(key == "39" && d != "left") d = "right";
        else if(key == "40" && d != "up") d = "down";
    })
}

最佳答案

你的 Canvas 就像一张图片，如果你用 css 缩放它，图形就会放大。使用 javascript 设置 Canvas 的宽度和高度。 

var canvas = document.getElementsByTagName('canvas')[0];
canvas.width  = 450;
canvas.height = 450;

顺便说一句，这是重复的。 Canvas width and height in HTML5

关于javascript - 为什么我的游戏大小取决于我如何设置 Canvas 大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24048809/

24 4 0
文章推荐： html - 在 IE8 中加载时背景图像挂起
文章推荐： css - 不确定是使用 Flexbox、表格还是行和列
文章推荐： javascript - 如何使用 JavaScript 在 WebKit 中获取 accessKeyLabel？
文章推荐： javascript - 使用 div 模拟动态表格单元格宽度增长
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com