嗨,我是 HTML5 svg 概念的新手,所以想通过创建游戏来学习它。刚刚在 svg 中创建了 n 个圆圈并限制了它的运动,现在我正在尝试从特定位置(cx,cy)拍摄一个圆圈,但看起来该位置与里面的现有坐标完全不同步svg ...帮助我理解为什么会出现这个问题
使用的浏览器:Chrome(如果问题是浏览器的问题)
粘贴在整个代码的某些部分下面......
#svgBoard
{
border:1px solid black;
width:600px;
height:500px;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" id="svgBoard" preserveAspectRatio="none" viewbox="0,0,600,550"/>
<rect id = "tank" x="10" y="465" width="20" height="35" style="fill:red;stroke-width:2;stroke:black;">
</svg>
<script type="text/javascript">
var intCircles = 1;
var intRadius = 20;
var arrColors = new Array("green","maroon","yellow","pink","lime","orange","red","darkblue");
var intBoardXLeft = 12;
var intBoardYTop = 13;
var intBoardXRight = 288;
var intBoardYBottom = 210;
var intBombFired = 0;
var xmlns = "http://www.w3.org/2000/svg";
function fnMoveCircles(circleID)
{
var objCircle = document.getElementById(circleID);
if(objCircle == undefined) {return;}
var x = parseInt(objCircle.getAttribute("cx"),10);
var y = parseInt(objCircle.getAttribute("cy"),10);
if ( x < intBoardXLeft )
{
var resetIncX = Math.floor((Math.random()*4)+1);
resetIncX = Math.abs(resetIncX);
objCircle.setAttribute("incX", resetIncX);
}
else if ( x > intBoardXRight)
{
var resetIncX = Math.floor((Math.random()*4)+1);
resetIncX = resetIncX * -1;
objCircle.setAttribute("incX", resetIncX);
}
if ( y < intBoardYTop)
{
var resetIncY = Math.floor((Math.random()*4)+1);
resetIncY = Math.abs(resetIncY);
objCircle.setAttribute("incY", resetIncY);
}
else if ( y > intBoardYBottom)
{
var resetIncY = Math.floor((Math.random()*4)+1);
resetIncY = resetIncY * -1;
objCircle.setAttribute("incY", resetIncY);
}
x = x + parseInt(objCircle.getAttribute("incX"),10);
y = y + parseInt(objCircle.getAttribute("incY"),10);
objCircle.setAttribute("cx", x);
objCircle.setAttribute("cy", y);
var transformAttr = ' translate(' + x + ',' + y + ')';
objCircle.setAttribute('transform', transformAttr);
setTimeout("fnMoveCircles('" + circleID + "')",20);
}
function getRandomX()
{
return Math.floor((Math.random()*intBoardXRight-intBoardXLeft)+1)+intBoardXLeft;
}
function getRandomY()
{
return Math.floor((Math.random()*intBoardYBottom-intBoardYTop)+1)+intBoardYTop;
}
function fireBomb()
{
var objBomb = document.getElementById("circleBomb");
var x = parseInt(objBomb.getAttribute("cx"),10);
var y = parseInt(objBomb.getAttribute("cy"),10);
y = y-1;
if ( y < intBoardYTop)
{
document.getElementById("svgBoard").removeChild(objBomb);
intBombFired = 0;
}
else
{
objBomb.setAttribute("cy", y);
setTimeout("fireBomb()",1);
}
for(intChk=0;intChk <= intCircles-1; intChk++)
{
var objCheck = document.getElementById("svgcircle"+intChk);
if ( objCheck != undefined )
{
var xchk = parseInt(objCheck.getAttribute("cx"),10);
var ychk = parseInt(objCheck.getAttribute("cy"),10);
if ((x >= xchk && x <= xchk+intRadius*2) && (y >= ychk && y <= ychk+intRadius*2))
{objCheck.setAttribute("fill","black");
document.getElementById("svgBoard").removeChild(objCheck);
document.getElementById("svgBoard").removeChild(objBomb);
intBombFired = 0;
return;
}
}
}
}
(function ($) {
$(document).ready
(
function () {
//Create the circles
for(intCreate=0;intCreate <= intCircles-1; intCreate++)
{
var objCircle = document.createElementNS(xmlns, "circle");
objCircle.setAttribute("id", "svgcircle" + intCreate);
objCircle.setAttribute("cx", getRandomX());
objCircle.setAttribute("cy", getRandomY());
objCircle.setAttribute("r", intRadius );
var rand = Math.floor((Math.random()*arrColors.length-1)+1);
objCircle.setAttribute("fill", arrColors[rand].toString());
objCircle.setAttribute("stroke-width","1px");
objCircle.setAttribute("incX", Math.floor((Math.random()*4)+1));
objCircle.setAttribute("incY", Math.floor((Math.random()*4)+1));
$("#svgBoard").append(objCircle);
setTimeout("fnMoveCircles('svgcircle" + intCreate + "')",20);
}
$("body").keydown
(
function (event) {
if (event.keyCode == 37 ){ //left arrow key
var objRect = document.getElementById("tank");
var x = parseInt(objRect.getAttribute("x"),10);
if ( (x-3) > 3 )
{
objRect.x.baseVal.value = x-3;
}
}
else if (event.keyCode == 39){//right arrow key
var objRect = document.getElementById("tank");
var x = parseInt(objRect.getAttribute("x"),10);
if ( (x+3) + parseInt(objRect.getAttribute("width"),10) < 600 )
{
objRect.x.baseVal.value = x+3;
}
}
else if (event.keyCode == 38 && intBombFired == 0) {//Up arrow key "THIS IS WHERE IM FACING THE PROBLEM"
var objNewBomb = document.createElementNS(xmlns, "circle");
var svg = document.querySelector("svgBoard");
//var objRect = document.getElementById("tank");
objNewBomb.setAttribute("id", "circleBomb");
objNewBomb.setAttribute("r", intRadius );
objNewBomb.setAttribute("fill", "black");
objNewBomb.setAttribute("stroke", "red");
objNewBomb.setAttribute("stroke-width","2px");
$("#svgBoard").append(objNewBomb);
objNewBomb.setAttribute("cx", getRandomX());
objNewBomb.setAttribute("cy", 210);
intBombFired = 1;
fireBomb();
alert (objNewBomb.getAttribute("cy"));
}
}
);
}
)
}) (jQuery);
</script>