我如何为我的这个javascript程序创建检测?
How can I create the detection for this javascript program of mine?
我一直在构建我们在课堂上做过的作业,我在检测部分被难住了。
我希望当我的new站在pokeball上时被"抓住",玩家移动键盘来控制new, pokeball会在一段时间内随机重新定位。
我如何创建一个函数,将检测当新的gif与pokeball重叠?
var _stage = document.getElementById("stage");
var _Mew = document.querySelector("img");
var _PokeBall = document.getElementById("PokeBall");
_stage.style.width = "800px";
_stage.style.height = "600px";
_stage.style.backgroundColor = "black";
_stage.style.marginLeft = "auto";
_stage.style.marginRight = "auto";
_Mew.style.position = "relative"; // Uses top and left from parent
_PokeBall.style.position = "relative"; // Uses top and left from parent
var leftPressed = false;
var rightPressed = false;
var upPressed = false;
var downPressed = false;
var player = [ 400, 300 ]; // Left, Top
var PokeBall = [100, 100];// Top, Left
var uIval = setInterval(update, 22.22); // 30fps update loop
var map = []; // empty Map Array
window.addEventListener("keydown", onKeyDown);
window.addEventListener("keyup", onKeyUp);
var Pval= setInterval(MovePokeball, 2000);
function generateMap()
{
for (var row = 0; row < 2; row++)
{
for(var col = 0; col <8; col++)
{
console.log("In row "+row);
}
}
}
/*map[row] = []; // Creating new array in specified row
for (var col = 0; col <8; col++)
{
console.log("In row "+row+"doing col"+col);
}
*/
function onKeyDown(event)
{
switch(event.keyCode)
{
case 37: // Left.
if ( leftPressed == false )
leftPressed = true;
break;
case 39: // Right.
if ( rightPressed == false )
rightPressed = true;
break;
case 38: // Up.
if ( upPressed == false )
upPressed = true;
break;
case 40: // Down.
if ( downPressed == false )
downPressed = true;
break;
default:
console.log("Unhandled key.");
break;
}
}
function onKeyUp(event)
{
switch(event.keyCode)
{
case 37: // Left.
leftPressed = false;
break;
case 39: // Right.
rightPressed = false;
break;
case 38: // Up.
upPressed = false;
break;
case 40: // Down.
downPressed = false;
break;
default:
console.log("Unhandled key.");
break;
}
}
function update() // Going to run 30fps
{
movePlayer();
// move enemies
// collision check
// animate sprites
PlayerCaught();
render();
}
function movePlayer()
{
if ( leftPressed == true && player[0] >= _Mew.width/2)
player[0] -= 10;
if ( rightPressed == true && player[0] < 800 - _Mew.width/2)
player[0] += 10;
if ( upPressed == true && player[1] >= _Mew.height/2 )
player[1] -= 10;
if ( downPressed == true && player[1] < 600 - _Mew.width/2)
player[1] += 10;
}
function render()
{
_Mew.style.left = player[0]-_Mew.width/2+"px";
_Mew.style.top = player[1]-_Mew.width/2+"px";
}
function PlayerCaught()
{
if (_PokeBall [100,100] = player [100,100])
window.alert("Mew Has Been Captured!")
}
function MovePokeball()
{
_PokeBall.style.left= Math.floor(Math.random()*801)+"px";
_PokeBall.style.top= Math.floor(Math.random()*601)+"px";
}
你问的是碰撞检测。这是通过确定两个多边形是否相交来完成的。由于您的程序非常简化,所以我提供一个非常简化的解决方案。我们将确定图形是否相交。这不是理想的做法。通常,图像和物理是完全分离的。但这是可行的(大多数情况下),希望它能鼓励你继续尝试。
首先,我们需要两个图像的高度和宽度,以便我们可以执行几何魔术。这可以很容易地在JavaScript中设置,就像您为_stage
所做的那样。但是,您已经在其他地方(可能在HTML中)定义了图像的src
,因此最好在那里定义高度和宽度。
<img id="PokeBall" src="pokeball.png" style="width:50px; height:50px" />
注意:这使用了"inline CSS",这是另一个不好的做法。但这是有效的,我不想现在把简单的事情过于复杂化。
现在你的PlayerCaught
方法有了完成它的工作所需的所有信息,那么我们如何检测碰撞?如果我们处理的是矩形,就很简单了。我们只需要确定一个物体的角是否在另一个物体的内部。我们怎么做呢?基本上,我们看它们是否在X轴和Y轴上相交。
取两个矩形:A
和B
。它们都有四条边:top
, left
, right
和bottom
。边top
和bottom
为Y值,边left
和right
为X值。如果满足下列条件之一,则两个矩形相交:
(
A.left < B.left < A.right
OR A.left < B.right < A.right
) AND (
A.top < B.top < A.bottom
OR A.top < B.bottom < A.bottom
)
翻译成JavaScript,你就有了你的碰撞检测功能。要在程序中获得边缘,请使用以下命令:
function findEdges(img){
var result = [];
result["left"] = parseInt(img.style.left, 10);
result["top"] = parseInt(img.style.top, 10);
result["right"] = result["left"] + parseInt(img.style.width, 10);
result["bottom"] = result["top"] + parseInt(img.style.height, 10);
return result;
}
你可以看到我们正在使用我们之前为width
和height
以及你已经用于渲染的top
和left
设置的内联样式。
剧透……
把所有的片段放在一起可能看起来像:
function PlayerCaught(){
if (detectImgCollision(_PokeBall, _Mew)){
window.alert("Mew Has Been Captured!")
}
}
function detectImgCollision(imgA, imgB){
var A = findEdges(imgA);
var B = findEdges(imgB);
return detectRectCollision(A, B);
}
function detectRectCollision(A, B){
return (
isBetween(A.left, B.left, A.right)
|| isBetween(A.left, B.right, A.right)
) && (
isBetween(A.top, B.top, A.bottom)
|| isBetween(A.top, B.bottom, A.bottom)
);
}
function isBetween(low, middle, high){
return (low <= middle && middle <= high);
}
- Rails引擎:使主机应用程序javascript可用于Mounted Engine
- Windows 8应用程序Javascript和SQlite(数据库已锁定)
- 以下 Chrome 扩展程序 JavaScript 代码片段究竟是如何工作的
- 是否有一种从应用程序Javascript代码中自动生成序列图的方法
- <嵌入>或者<对象>标签视频播放错误处理程序-JavaScript
- 未捕获的语法错误:) 在 MVC 应用程序 JavaScript asp.net 参数列表后丢失
- 内联委托事件处理程序 Javascript
- 如何将excel文件导入Web应用程序(javascript/d3/html)
- 目录扫描程序JavaScript HTML
- 检查是否没有Internet连接-弹出-Windows 10应用程序(Javascript)
- 如何在WinRT应用程序(Javascript、C#)中区分Windows Phone 8.1和Windows 8.1
- jQuery Mobile Windows应用商店应用程序:JavaScript运行时错误:无法获取属性'ind
- 移动设备中的引导程序JavaScript问题
- Web应用程序Javascript,用于处理来自iOS设备摄像头的信息流(不是应用程序!)
- 在构建应用程序Javascript MVC的过程中,score/buildjs抛出了一个没有解释的错误
- Iframe应用程序JavaScript SDKpublish对话框错误(代码102)
- 如何在windows8商店应用程序(javascript)中播放youtube视频
- AJAX应用程序JavaScript加载问题
- 为什么获胜't我的引导程序javascript在本地运行
- 用于在纯客户端测试应用程序(javascript/jquery)中维护状态和管理i/o的体系结构