html5游戏对象未显示_Html_Canvas

html5游戏对象未显示

html canvas

html5游戏对象未显示,html,canvas,Html,Canvas,您好，我正在尝试制作一个简单的HTML5游戏，我已经学习了一些教程，但是我的代码似乎有一些问题。程序应向玩家显示红场： <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <style> canvas {

您好，我正在尝试制作一个简单的HTML5游戏，我已经学习了一些教程，但是我的代码似乎有一些问题。程序应向玩家显示红场：

<!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>


帆布
{
边框：1px实心#D3；
背景色：#f1f1；
}
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var theplayer=新组件（30,30，“红色”，10,120）；
功能图层（宽度、高度、颜色、x、y）
{
这个。宽度=宽度；
高度=高度；
这个颜色=颜色；
这个.x=x；
这个。y=y；
this.update=函数（）
{
context.fillStyle=颜色；
context.fillRect（this.x，this.y，this.width，this.height）；
}
}
函数clearboard（）
{
clearRect（0,0，canvas.width，canvas.height）；
}
函数rungame（）
{
透明板（）；
theplayer.update（）；
}

我可以知道代码有什么问题吗？我如何解决它

试试这个：

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);

您好，请问这部分代码是做什么的？rungame=setInterval（函数（）{clearboard（）；theplayer.update（）；}，1000/30）；