HTML和JavaScript游戏开发在点击sprite时传递参数_Javascript_Html_Webpage_Game Development

HTML和JavaScript游戏开发在点击sprite时传递参数

javascript html

HTML和JavaScript游戏开发在点击sprite时传递参数,javascript,html,webpage,game-development,Javascript,Html,Webpage,Game Development,我已经用javascript用html创建了一个游戏。我想添加一个选项，在游戏的最开始，你可以点击一个男孩或女孩精灵开始游戏的角色分别。现在，当我运行以下代码时，游戏开始了： <onload = "init()"> 我已经在网上搜索了很多次，没有找到我想要做的事情。基本上在初始化之前，我希望有一个屏幕，一个简单的网页，显示男孩精灵和女孩精灵。最终的结果是，如果点击了男孩精灵，那么游戏开始加载所有男孩图像，如果点击了女孩精灵，那么游戏将开始加载所有女孩图像。以下是我尝试执行的代码/伪

我已经用javascript用html创建了一个游戏。我想添加一个选项，在游戏的最开始，你可以点击一个男孩或女孩精灵开始游戏的角色分别。现在，当我运行以下代码时，游戏开始了：

<onload = "init()">

我已经在网上搜索了很多次，没有找到我想要做的事情。基本上在初始化之前，我希望有一个屏幕，一个简单的网页，显示男孩精灵和女孩精灵。最终的结果是，如果点击了男孩精灵，那么游戏开始加载所有男孩图像，如果点击了女孩精灵，那么游戏将开始加载所有女孩图像。以下是我尝试执行的代码/伪代码，但由于html是一种标记语言，我不确定如何实现这一点：

<body>

<p>


<IMG STYLE="position:absolute; TOP:250px; LEFT:100px; WIDTH:300px; HEIGHT:300px" SRC="images/boy.png"/>

<IMG STYLE="position:absolute; TOP:250px; LEFT:600px; WIDTH:300px; HEIGHT:300px" SRC="images/girl.png"/>


</p>

if (images/boy.png is clicked){
    var boy = "boy";
    <onload = "init(boy)"> // passes the argument of boy so images can be loaded accordingly
}

if (girlSprite is clicked){
    var girl = "girl";
    <onload = "init(girl)"> // passes the argument of girl so images can be loaded accordingly
}

</body>

我认为您必须使用带有sprite的link元素来捕获click事件

例如，对于精灵图像：

<div id="example-boy-link">
  <a href="#" onclick="boyFunc();"/>
</div>

   #example-boy-link a { 
        display: inline-block;
        width: 300px;
        height: 300px;
        background-image: url('yoursprite');
        background-position: -300px -100px;
    }

希望这有帮助

是的，事实上我已经用这种方式实现了，而且很有效，但从长远来看，效率不高。谢谢你的帖子！我采用了不同的方法，为不同的onload创建了一个函数。该函数完成了我需要的所有操作，但我现在遇到了一个问题，当切换到init时，屏幕显示在当前屏幕下。所以我在运行函数，他们点击播放器，然后切换到init，现在新屏幕在旧屏幕下加载。有什么想法吗？