html5画板游戏,HTML 5画布游戏停止(HTML 5 canvas game stop)

HTML 5画布游戏停止(HTML 5 canvas game stop)

我使用HTML 5画布和javascript在我的网页上创建了一个游戏。游戏循环运行，用户可以使用键盘播放。 网页上的游戏画布具有ID =“gamecanvas”。

但是，当视口大小减小时，我想停止游戏并将其替换为动画(游戏在小屏幕尺寸上播放效果不佳)

为了实现这一点，我想将游戏画布的ID属性从 ID ID =“gamecanvas” 转换为 ID = =“animationcanvas”。

这将确保我的动画Javascript文件将访问canavs(而不是游戏Javascript文件)。

这是否可能使用Jquery并且最终会崩溃浏览器，因为两个脚本正在运行并运行？

有人可以帮我完成下面的功能吗？

// HTML 5 canvas元素

//切换ID代码

$(document).ready(function() {

var $window = $(window);

function checkWidth() {

var windowsize = $window.width();

if (windowsize < 979) {

...... Change ID

}

else {

Change Id...

}

}

// Execute on load

checkWidth();

// Bind event listener

$(window).resize(checkWidth);

});

非常感谢

I have created a game on my webpage using HTML 5 canvas and javascript.. the game runs in a loop and the user can play this using the keyboard. The game canvas on the webpage has an ID ="gamecanvas".

However, when the view port size decreases, I want to STOP the game and replace this with an animation (the game does not play well on a small screen size)

To achieve this I want to swop the ID attribute of the game canvas FROM ID ="gamecanvas" TO ID= ="animationcanvas".

This will ensure that my animation Javascript file will access the canavs (as opposed to the game Javascript file).

Is this POSSIBLE using Jquery and will this eventually crash the browser as two scripts are lopping and running ?

Can someone help me complete the function below?

// HTML 5 canvas element

// switch ID code

$(document).ready(function() {

var $window = $(window);

function checkWidth() {

var windowsize = $window.width();

if (windowsize < 979) {

...... Change ID

}

else {

Change Id...

}

}

// Execute on load

checkWidth();

// Bind event listener

$(window).resize(checkWidth);

});

Many thanks

原文：https://stackoverflow.com/questions/29235251

更新时间：2020-01-01 04:44

最满意答案

$(document).ready(function() {

var $window = $(window);

var $canvas = $("canvas");

function checkWidth() {

$canvas.attr("id", $window.width()<979 ? "animationcanvas" : "gamecanvas");

}

// Execute on load

checkWidth();

// Bind event listener

$window.resize(checkWidth);

});

To switch the ID:

$(document).ready(function() {

var $window = $(window);

var $canvas = $("canvas");

function checkWidth() {

$canvas.attr("id", $window.width()<979 ? "animationcanvas" : "gamecanvas");

}

// Execute on load

checkWidth();

// Bind event listener

$window.resize(checkWidth);

});

相关问答

您之前没有包含jQuery核心脚本，这就是它失败的原因。 另外，我建议使用jQuery函数来添加属性，而不是使用字符串。

Test Game

...

你可以设置一个像rafId这样的全局变量，并在你调用rAF的行中使它成为像; rafId = requestAnimationFrame(animate);

然后在需要时调用cancelAnimationFrame()如cancelAnimationFrame(rafId) You can set a global variable like rafId and in the line you invoke rAF make it like; rafId = requestAnimationFr

...

屏幕下方 要测试对象是否位于屏幕底部，这只是一个简单的测试： If obj.y >= (canvas.height - object.height) then don't increase obj y position.

盒子堆叠 要让你的盒子堆叠，你需要在每个循环上检查一个特定的盒子是否与另一个盒子碰撞： for (var i=0; i

var boxA = boxes[i];

for (var j=0; j

...

你需要描述画布不同的改变你的代码：

至：

这就是你应该如何描述画布，一切都应该工作：D You need to describe canvas

...

要切换ID： jsBin演示 $(document).ready(function() {

var $window = $(window);

var $canvas = $("canvas");

function checkWidth() {

$canvas.attr("id", $window.width()<979 ? "animationcanvas" : "gamecanvas");

}

// Execute on load

...

正如jing3142所说，你不能在不是为它们设计的元素上监听键盘事件。 但是，您可以强制为其设计元素。 canvas.tabIndex = 1000;

现在，您可以将canvas.addEventListener与键盘事件一起使用。 这比window.addEventListener更好，因为这样就不会干扰页面上的任何其他元素，例如实际的输入元素。 请注意，当画布具有焦点时，您可能会在某些浏览器中看到虚线轮廓。 要删除此： canvas.style.outline = "none";

玩的开心

...

我担心你的代码有点乱，我决定从一个干净的石板开始。 使用bottom和right getter / setter。 您可以分别根据left / width和top / height值计算它们。 这样可以避免在修改例如left时改变互补变量。 您似乎正在寻找矩形的碰撞检测算法。 如果矩形具有相同的x坐标，则这很容易 - 如果第一个的底部位于另一个的顶部之上，或者如果第一个的顶部位于另一个的底部之下，则两个这样的矩形不会发生碰撞。 只要它们发生碰撞，就可以使用此算法和while循环生成新的涡轮机。 这

...

哎呀，最后我找到了答案，我们可以通过在config.xml中修改来停止弹出屏幕找到答案如何防止应用程序在电话间隙中运行而不是垂直滚动？ Oops, Finally I have found the answer, We can stop bouncing the screen by modifying in the config.xml Found answer here How to prevent app running in phone-gap from scrolling vertical

...

我安装，测试和阅读了文档。 这是我发现的： KineticJS element.on(“mouseover”，function(){}); Easel.js element.addEventListener(“mouseover”，function(){}); 另外，Easel.js有很好的ButtonHelper类，可以自动使用3种不同的图像进行正常，悬停，按下状态。 Crafty.js element.bind('MouseOver'，... MelonJS 没有自动支持。 手动可以使用以下方

...

几乎所有像这样的连续动画的游戏每帧重绘一切; 聪明的更新算法只适用于屏幕的一小部分正在改变，并且有一个很好的规则来找出那部分重叠的部分。 这里有一些一般的优化建议： 确保尽可能多的图形由GPU处理，而不是由CPU处理。 (如果用户的浏览器不使用GPU进行2D画布渲染，这可能是不可能的，但是随着HTML5游戏的普及，你可以预期升级可能会改变。) 这意味着你应该避免精心制作巧妙的算法，以便在JS代码中尽可能少地做一些工作 - 除非避免在很容易确定它不可见的情况下执行大量绘图(例如，在屏幕边界之外)通常

...