1

ここにjsfiddleサンプルがあります-http ://jsfiddle.net/6bKHc/120/そしてコード-

    var move, inter;
    inter = setInterval(move = function() {
        var dir = $(".snake").data('dir');
        var snake = $('.snake');
        var food = $('.food');
        if(dir == 'top') {
            snake.css({"top": snake.position().top + 5 + "px"});
            if(snake.width() > 5) {
                snake.css({"width": snake.width() - 5 + "px", "height": snake.height() + 5 + "px"});   
            }
        }
        if(dir == 'bottom') {
            snake.css({"top": snake.position().top - 5 + "px"});
            if(snake.width() > 5) {
                snake.css({"width": snake.width() - 5 + "px", "height": snake.height() + 5 + "px"});   
            }            
        }
        if(dir == 'left') {
            snake.css({"left": snake.position().left + 5 + "px"});
            if(snake.height() > 5) {
                snake.css({"width": snake.width() + 5 + "px", "height": snake.height() - 5 + "px"});   
            }            
        }
        if(dir == 'right') {
            snake.css({"left": snake.position().left - 5 + "px"});
            if(snake.height() > 5) {
                snake.css({"width": snake.width() + 5 + "px", "height": snake.height() - 5 + "px"});   
            }              
        }
        var snakePosition = snake.position();
        var foodPosition = food.position();
        var randomNum = Math.ceil(Math.random()*40);
        var randomNumber = randomNum*5;
        console.log(snakePosition.top + " - snake top + left - " + snakePosition.left);
        console.log(foodPosition.top + " - snake top + left - " + foodPosition.left);        
        if(snakePosition.top == foodPosition.top && snakePosition.left == foodPosition.left) {
            console.log(randomNumber);
            snake.css({"width": snake.width() + 55 + "px"});   
            food.css({"left": randomNumber+1+"px", "top": randomNumber+1+"px"});            
        }
    }, 200);
$(document).keydown(function(event){
    if(event.which == 40) {
        $(".snake").data('dir','top');
    } else if(event.which == 39) {
        $(".snake").data('dir','left');           
    } else if(event.which == 37) {
        $(".snake").data('dir','right');        
    } else if(event.which == 38) {
        $(".snake").data('dir','bottom');    
    };     
});​

ヘビが大きくなると、自動的にブロックも大きくなります。つまり、下に移動しても、片側に5pxは留まりません。どう説明したらいいのかわからないけど、ゲームを始めて食べ物を食べてから動かしてみてください。

4

3 に答える 3

4

ですから、ここでノキアスタイルのヘビゲームを作ろうとしていると思います。長方形にしかなり得ないので、単一のDivでそれを行うことはできません。Divの配列を使用し（ここで使用している方法を使用する場合）、ループ内でそれらの位置を1つずつ更新する必要があります。

あなたがそれを理解することができなかったならば、私は仕事の後にコードサンプルを追加します。

編集：：

さて、私はあなたのコードにいくつかの変更を加えたので、あなたは今あなたのヘビに尻尾を持っています、完全なコードは次のとおりです（以下の説明）：

    var move, inter;
    var snakeBody= [];

    // Main Loop
    inter = setInterval(move = function() {
        var dir = $(".snake").data('dir');
        var snake = $('.snake');
        var food = $('.food');

        // Update body segment positions
        for (bodySeg=snakeBody.length-1;bodySeg>=0;bodySeg--){
            var lastsegment;
            if (bodySeg==0) {lastsegment=snake;} else {lastsegment=snakeBody[bodySeg-1];}

            snakeBody[bodySeg].css({"top": lastsegment.position().top});
            snakeBody[bodySeg].css({"left": lastsegment.position().left});                
        }

        // update head of the snake, depending on last pressed key
        if(dir == 'top') {
            snake.css({"top": snake.position().top + 5 + "px"});
        } 
        if(dir == 'bottom') {
            snake.css({"top": snake.position().top - 5 + "px"});          
        }
        if(dir == 'left') {
            snake.css({"left": snake.position().left + 5 + "px"});           
        }
        if(dir == 'right') {
            snake.css({"left": snake.position().left - 5 + "px"});             
        }



        // Handle Head of snake touching food
        var snakePosition = snake.position();
        var foodPosition = food.position();
        var randomNum = Math.ceil(Math.random()*40);
        var randomNumber = randomNum*5;       
        if(snakePosition.top == foodPosition.top && snakePosition.left == foodPosition.left) {
            var index = snakeBody.length;
            $("#content").append("<div id='snakebody"+index+"' class='snakebodycss'></div>");
            snakeBody[index]=$("#snakebody"+index);
            food.css({"left": randomNumber+1+"px", "top": randomNumber+1+"px"});            
        }
    }, 200);
// update last pressed key
$(document).keydown(function(event){
    if(event.which == 40) {
        $(".snake").data('dir','top');
    } else if(event.which == 39) {
        $(".snake").data('dir','left');           
    } else if(event.which == 37) {
        $(".snake").data('dir','right');        
    } else if(event.which == 38) {
        $(".snake").data('dir','bottom');    
    } else if(event.which == 13) {
        console.log(snakeBody)
    }        
});​

HTMLは変更されていません。

<div id="content">
 <div class="snake">
 </div>
 <div class="food">
 </div>
</div>​

ボディセグメント用に別のcssクラスを追加しました。

#content {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  float: left;    
}

#content .snake {
  background: green;
  width: 5px;
  height: 5px;
  display: inline;
  position: absolute;  
  z-index: 10;
}

#content .snakebodycss {
  background: red;
  width: 5px;
  height: 5px;
  display: inline;
  position: absolute;  
  z-index: 10;
}

#content .food {
  width: 5px;
  height: 5px;
  background: orange;  
  position: absolute;    
}

説明：

</ p>

わかりました。これで役立つかもしれません。コードを変更snakeBody[]して、新しいforループを見ると、ヘビの新しいセグメントを追跡するという配列が追加されました。

   // This for loop will run through the snakeBody array backwards, from the highest index to 0
   // This is to allow us to set each segment to the location of the next closest to the head 
   // each loop
   for (bodySeg=snakeBody.length-1;bodySeg>=0;bodySeg--){
        //We need a reference the the previous segment to set the one we are currently inspecting
        // It will either be another segment or the head of the snake
        var lastsegment;
        if (bodySeg==0) {lastsegment=snake;} else {lastsegment=snakeBody[bodySeg-1];}

        snakeBody[bodySeg].css({"top": lastsegment.position().top});
        snakeBody[bodySeg].css({"left": lastsegment.position().left});                
    }

これは、各ループのテール位置を次の位置に更新するものです。

   if(snakePosition.top == foodPosition.top && snakePosition.left == foodPosition.left) {
        // Here we get the top position (unoccupied) of our snake body array
        var index = snakeBody.length;
        // Here we are adding a new div to the content div, with a unique id (snakevody0)
        // (snakebody1) etc etc 
        $("#content").append("<div id='snakebody"+index+"' class='snakebodycss'></div>");
        // Here we are populating the array we use in the above for loop with refrences
        // to our snake segment divs.
        snakeBody[index]=$("#snakebody"+index);
        food.css({"left": randomNumber+1+"px", "top": randomNumber+1+"px"});            
    }

そして、それはbodysegntsをDOMにアタッチし、後で使用するためにそれらの参照を配列に格納することです。

これで問題が発生した場合は、お知らせください。

于 2012-06-22T12:43:28.287 に答える
1

解決策は単純なものではありません。方向を変えるときにヘビの高さと幅を変更するべきではありません。最初のヘビの尾の長さを増やすとサイズが小さくなる2番目のヘビの尾を作成する必要があります。したがって、左に移動して押し下げると、1単位の大きさの新しい蛇の尾を作成し、下に移動してから、古い尾を1単位減らし、新しい尾を下に1単位増やし、古い尾を幅方向に1単位減らします。等...

このプロセスは、いくつかの個々の尾の部分を追跡する必要がある場合があります。ヘビの1つの長さの範囲内で方向を数回変更することができます。

于 2012-06-22T12:40:22.500 に答える
1

あなたの質問は「なぜ私のヘビは他のヘビ関連のゲームの通常のヘビのように見えないのですか？」だと思います。ヘビを作るために、それは1つの位置（snakePosition）だけを持つことはできません。ヘビは通常、いくつかの部分で構成されています。ヘビが曲がる場所をどのように追跡しますか？

于 2012-06-22T12:40:26.967 に答える