Javascriptボックス自体が重複しています

ちょっと私は動き回るボックスでゲームを作っています。私はENTERを押したときに助けが必要です。ボックスにその形状を複製し、ENTERを押した位置にとどめておきたいです。ボックスの傾きが画面の幅と高さの外側に移動するようにしたい。あなたが行くここJavascriptボックス自体が重複しています

#box { 
 
    background-color: #FF002F; 
 
    height: 35px; 
 
    width: 35px; 
 
    position: absolute; 
 
} 
 

 
body { 
 
    background-color: #BDBFBF; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 

 
    <meta charset="UTF-8"> 
 
    <link rel="stylesheet" type="text/css" href="game.css"> 
 
</head> 
 

 
<body> 
 

 
    <div id="box"></div> 
 

 

 
    <script> 
 
    document.addEventListener("keydown", test); 
 
    var boxS = document.querySelector("#box"); 
 
    var radius = boxS.clientWidth/2; 
 
    console.log(radius); 
 

 
    var boxY = (window.innerHeight/2) - radius; 
 
    var boxX = (window.innerWidth/2) - radius; 
 
    boxS.style.top = boxY + "px"; 
 
    boxS.style.left = boxX + "px"; 
 

 

 

 

 
    function test(event) { 
 
     console.log(event.keyCode); 
 
     var keyCode = event.keyCode; 
 

 
     var boksSize = 35; 
 
     /*var xMin = 0; 
 
     var xMax = screenWidth - boxRadius; 
 
     var yMin = 0; 
 
     var yMax = screenHeigth - boxRadius; */ 
 

 
     if (keyCode === 87 || keyCode === 38 && boxY > boksSize) { 
 
     boxY -= 35; 
 
     boxS.style.top = boxY + "px"; 
 
     } else if (keyCode === 68 || keyCode === 39) { 
 
     boxX += 35; 
 
     boxS.style.left = boxX + "px"; 
 
     } else if (keyCode === 37 || keyCode === 65) { 
 
     boxX -= 35; 
 
     boxS.style.left = boxX + "px"; 
 
     } else if (keyCode === 40 || keyCode === 83) { 
 
     boxY += 35; 
 
     boxS.style.top = boxY + "px"; 
 
     } 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

出典

2017-03-14 Galdino

これはコード書き込みサービスではありません、あなたが試みたものを投稿してください。 –

あなたは質問をするのを忘れてしまったようです。 – Scott

明確な問題文を追加してください（[ask]を参照）。 FYI、problem statement！==「私が欲しいもの」。 – evolutionxbox

。パラメータを試してみてください。 JSFIDDLEでは、私はどこかに境界線の後ろに行くことができないように係数を追加しなければなりませんでした...だから、guidlineに似ていますが、自分ですべてのモニターで作業できるようにメソッドを拡張する必要があります。私は一つのことを忘れている

https://jsfiddle.net/12914t27/

<body> 

    <div id="box"></div> 


    <script> 

    var shadows =0; 
    document.addEventListener("keydown", test); 
    var boxS = document.querySelector("#box"); 
    var radius = boxS.clientWidth/2; 
    console.log(radius); 

    var boxY = (window.innerHeight/2) - radius; 
    var boxX = (window.innerWidth/2) - radius; 
    boxS.style.top = boxY + "px"; 
    boxS.style.left = boxX + "px"; 




    function test(event) { 
     console.log(event.keyCode); 
     var keyCode = event.keyCode; 

     var boksSize = 35; 
     /*var xMin = 0; 
     var xMax = screenWidth - boxRadius; 
     var yMin = 0; 
     var yMax = screenHeigth - boxRadius; */ 

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); 
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); 

     if (keyCode === 87 || keyCode === 38 && boxY > boksSize) { 
     if (!(boxY-document.getElementById('box').clientHeight <=0)){ 
      boxY -= 35; 
      boxS.style.top = boxY + "px";} 

     } else if (keyCode === 68 || keyCode === 39) { 
     if (!(boxX+document.getElementById('box').clientWidth*2 >=window.innerWidth)){ 
     boxX += 35; 
     boxS.style.left = boxX + "px";} 



     } else if (keyCode === 37 || keyCode === 65) { 
     if (!(boxX-document.getElementById('box').clientWidth <=0)){ 
      boxX -= 35; 
     boxS.style.left = boxX + "px";} 



     } else if (keyCode === 40 || keyCode === 83) { 
     if (!(boxY+document.getElementById('box').clientHeight*2 >=window.innerHeight)){ 

      boxY += 35; 
     boxS.style.top = boxY + "px"; 
     } 

     } 

     else if (keyCode === 13) { 
// Your existing code unmodified... 
var iDiv = document.createElement('div'); 
iDiv.id = 'shadow'+shadows; 
iDiv.className = 'shadowbox'; 
iDiv.style.top = boxS.style.top; 
iDiv.style.left = boxS.style.left; 
iDiv.style.left = boxS.style.left; 
document.getElementsByTagName('body')[0].appendChild(iDiv); 
shadows++; 

     } 
    } 
    </script> 
</body>

CSS

#box { 
    background-color: #FF002F; 
    height: 35px; 
    width: 35px; 
    position: absolute; 
} 
.shadowbox { 
    background-color: #555555; 
    height: 35px; 
    width: 35px; 
    position: absolute; 
} 

body { 
    background-color: #BDBFBF; 
}

// EDIT：ボックスは、その背後に作成されたボックスの上にあるとないので、ボックスのシャドー用z-index:1とz-index:2を追加し、あなたはいつも元の箱を見ることができます

出典

2017-03-14 10:52:30 Zorak

Javascriptボックス自体が重複しています

答えて

関連する問題