[英]How to compute rotation/scale pivot coordinates for SVG transformations (I'm using Raphael.js)?
[英]I'm using raphael.js for a visual interface on my Battleship game. I'm having some problems
我將raphael.js用作我的戰艦游戲的可視界面。 我有一個名為createCanvas()的函數,該函數創建一個網格(10x10)。 這樣,用戶可以看到瞄准的目標。 問題是,直到游戲代碼(輸入坐標等)完成后才顯示網格。 有人知道如何解決嗎?
這是完整的代碼 。 下面是createCanvas()和game()的代碼。
function createCanvas() {
$(function() {
var canvas = Raphael(0, 0, 2000, 2000);
for(var i = 0; i != (BOARD_WIDTH); i++) {
canvas.text((60+70*i), 15, i+1);
}
for(var i = 0; i != (BOARD_HEIGHT); i++) {
canvas.text(15, (60+70*i), i+1);
}
for(var i = 0; i != (BOARD_WIDTH+1); i++) {
canvas.path( "M" + (25+(70*i)) + ",25 L" + (25 + (70*i)) + ",725" );
}
for(var i = 0; i != (BOARD_HEIGHT+1); i++) {
canvas.path( "M25," + (25+(70*i)) + " L725," + (25+(70*i)) );
}
});
}
function game(){
inputArray = [4,3,2];
var boats = randomBoats(inputArray);
var currentBoat = 0;
var sunkenBoat = 0;
var numberOfTurns = 0;
while(sunkenBoat !== inputArray.length ) {
var hit= false;
var target = "(" + prompt("Enter targetcoordinate (x,y)") + ")";
var targetString = target.replace(/\s+/g, '');
for(var i = 0; i !== inputArray.length; i++) {
for(var j = 0; j !== boats[i].usedPositions().length; j++) {
console.log(targetString)
if(targetString === boats[i].usedPositions()[j].toString()) {
hit = true;
boats[i].hits[j] = 1;
console.log(boats[i].hits);
currentBoat = boats[i];
fillSquare(targetString, "red");
break;
}
}
}
console.log(currentBoat.hits);
console.log(allEquals(currentBoat.hits, 1));
if(hit)
alert ("Hit!");
else {
fillSquare(targetString, "blue");
alert ("Miss!");
}
if(allEquals(currentBoat.hits, 1)) {
alert("Boat with length " + currentBoat.hits.length + " has sunken!");
sunkenBoat++;
}
numberOfTurns++
}
alert("You've won! You did it in " + numberOfTurns + " turns.")
}
在我的代碼中,我打電話
createCanvas();
game();
所以我想首先畫畫布
問題是While循環。 您沒有給其他任何機會進入並做任何事情。 這將盡可能快地四處循環,直到完成為止。
您應該在將輸入框放在頁面上並檢測鍵事件(例如,使用Enter鍵)時進行檢查。
document.onkeypress = function(evt) {
evt = evt || window.event;
var charCode = evt.keyCode || evt.which;
var charStr = String.fromCharCode(charCode);
alert(charStr);
};
這樣,您以后需要的動畫和其他內容就可以不受阻礙地運行,您不會像瘋狂一樣消耗CPU周期,並且僅在用戶實際輸入值時檢查命中率
然后,您甚至可以在畫布上寫一些代碼顯示“命中”或“小姐”(可能是動畫的),這樣您就可以刪除所有不斷彈出的警報和消息框。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.