Question

您好我正在尝试制作一个简单的html 5游戏，我已经遵循了一些教程，但似乎我的代码存在一些问题。程序应该显示红色方块的玩家：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <style>
        canvas
        {
            border:1px solid #d3d3d3;
            background-color: #f1f1f1;
        }
    </style>

</head>
<body> 
    <canvas id="myCanvas" width="1200" height="500"></canvas>
    <script>

        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var theplayer = new component(30, 30, "red", 10, 120);

        function theplayer(width, height, color, x, y)
        {
            this.width = width;
            this.height = height;
            this.color = color;
            this.x = x;
            this.y = y;

            this.update=function()
            {
                context.fillStyle = color;
                context.fillRect(this.x,this.y,this.width,this.height);
            }

        }

        function clearboard()
        {
            context.clearRect(0,0,canvas.width,canvas.height);
        }

        function rungame()
        {
            clearboard();
            theplayer.update();
        }

    </script>
</body>

我可能知道代码有什么问题以及如何修复它？

Answer 1

试试这个：

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

theplayer = function(width, height, color, x, y)
{
    this.width = width;
    this.height = height;
    this.color = color;
    this.x = x;
    this.y = y;    

    this.update=function()
    {
        context.fillStyle = color;
        context.fillRect(this.x,this.y,this.width,this.height);
    }
}

var theplayer = new theplayer(30, 30, "red", 10, 120);

function clearboard()
{
    context.clearRect(0,0,canvas.width,canvas.height);
}

rungame = setInterval(function()
{
   clearboard();
   theplayer.update();
}, 1000 / 30);

html5游戏对象没有显示

1 个答案: