个人中心
gpt4 book ai didi

javascript - 对象未出现在 Canvas 主体负载上

转载 作者：行者123 更新时间：2023-11-29 23:18:19 25 4
gpt4 key购买 nike

我一直在尝试为我的太空入侵者游戏编写启动部分。但是，当主体加载我的对象之一时(startbtn 变量)没有出现在 Canvas 上。

下面是我的游戏代码

    <html>
    <head>
         <title>Space Invaders</title>
    </head>
    <body onload="startGame()">
    <script type="text/javascript">

    var startbtn;
    function startGame(){
            startbtn = new compenent(50, 20, "blue", 120, 10);
            myGameArea.start();
    }

    var myGameArea = {

        canvas: document.createElement("canvas"),
        start: function(){
            this.canvas.width = 420;
            this.canvas.height = 220;
            ctx = this.context = this.canvas.getContext("2d");
            document.body.insertBefore(this.canvas, 
            document.body.childNodes[0]);
                ctx.font="35px Verdena";
                ctx.fillText("Welcome to Space Invaders",10,50);



            },
            clear : function(){
                this.context.clearRect(0, 0, this.canvas.width , 
                this.canvas.height);


            }

    }

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

    function updateGame(){
        myGameArea.clear();
        startbtn.update();
    }
    </script>
    </body>
    </html>

如果有人能帮助我，那就太好了。

最佳答案

主要问题是 updateGame() 从未被调用。您可以将它添加到 startGame() 函数中，以便在设置 Canvas 后运行。完成此操作后，蓝色框显示但不显示文本。原因是因为 myGameArea.clear(); 清除了在 myGameArea.start 函数中绘制的文本。删除 myGameArea.clear(); 导致:

var startbtn;

function startGame() {
  startbtn = new compenent(50, 20, "blue", 120, 10);
  myGameArea.start();
  updateGame();
}

var myGameArea = {
  canvas: document.createElement("canvas"),
  start: function() {
    this.canvas.width = 420;
    this.canvas.height = 220;
    ctx = this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas,
      document.body.childNodes[0]);
    ctx.font = "35px Verdena";
    ctx.fillText("Welcome to Space Invaders", 10, 50);
  },
  clear: function() {
    this.context.clearRect(0, 0, this.canvas.width,
      this.canvas.height);
  }
}

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

function updateGame() {
  //myGameArea.clear();
  startbtn.update();
}

startGame(); // moved from body.onload

但是，在这一点上，制作功能齐全的太空入侵者游戏可能会遇到一些潜在的设计障碍。您正在使用的 w3schools 教程正在尝试基本的 entity-component system ，但这可能会让初学者感到困惑，所以如果没有别的，我鼓励您浏览其他教程以了解上下文。

随着您的示例的发展，动画具有基本部分:

  1. 初始化例程(创建对象并为所有内容设置初始位置)
  2. 更新例程(重新定位物体，计算碰撞和损坏)
  3. 渲染例程(画框)

init 运行一次，或者在某些情况下每当动画(或游戏关卡)需要重置时运行。更新和渲染例程每秒运行多次，共同构成主动画循环(每一个循环每帧执行一次，因此它们本质上是同一“动画循环”函数的一部分):

              ----------------
              |              |
              v              |
init -----> update -----> render

这要求每个例程都负责他们的任务，而不是其他。每次渲染调用都应该清除屏幕，然后绘制每个可见对象。例如，init 函数不应包含任何渲染代码。

另外值得一提的是:被绘制的一切都是一个对象(或实体)。 W3schools 的教程让您开始走这条路，但是您将如何区分 button 组件和 spaceInvader 组件？你可以把它们分开objects/classes完全适合初学者。

下一层抽象是状态，每个状态都有自己的init --> update --> render 函数:

 ----------------------------------------    ---------------------------------------- 
 |             menu state               |    |             game state               |
 |                                      |    |                                      |
 |                 ----------------     |    |                 ----------------     |
 |                 |              |     |    |                 |              |     |
 |                 v              |     |    |                 v              |     |
 |   init -----> update -----> render   |    |   init -----> update -----> render   |
 ----------------------------------------    ----------------------------------------

所有这些对您的示例意味着什么？您正在尝试使用一些文本和一个按钮来设置菜单状态以开始游戏。管理一堆游戏状态会变得非常复杂，所以像 Phaser 这样的图形库报价built-in state management systems .如果您愿意，您可以设计一个或推迟问题并使用变量或 bool 值来确定您处于哪种状态。对于初学者，我建议在单一状态下工作，然后在必要时添加更多状态。换句话说，考虑简化或跳过菜单状态以支持游戏状态，直到您准备好使用状态。

制作动画的另一个具有挑战性的方面是处理鼠标事件。你怎么知道你的按钮何时被点击了？至少，您需要使用 event listener and some math .图书馆可以do it for you .

不管怎样，得到你的循环going在 JS 中需要 requestAnimationFrame或(不太可能/推荐)setInterval .查看一些 basic examples来自 MDN 网络文档。

我希望这有助于提供一条前进的道路，并突出显示您在使用当前方法走得更远之前可能需要研究的一些领域。

关于javascript - 对象未出现在 Canvas 主体负载上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51803951/

25 4 0
文章推荐： android - 无法访问 ClassB 类文件，因为找不到
文章推荐： php - 获取MySQL在特定时间添加的信息
文章推荐： android - 我想在主要 Activity 中使用 fragment 方法
文章推荐： php - 尝试用 php 回显 mysql 表中没有的每个 int
行者123
个人简介

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

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