2015-12-15 9 views
5

私は現在、学校で組織されたゲームジャム用のゲームを、html、css、javascript、およびjQueryを使用して作成しています。実行中のカウントダウンを変更する方法はありますか?

このゲームではカウントダウンを使用していますが、私のキャラクターが敵に当たってから2秒遅れてしまいます。カウントダウンが0になると、プレイヤーはゲームを失う。

これを行うには、実際に完了している「jChavannes」のgithub(Link here)を使用していますが、「jchavannes」がたくさん置かれていてもカウントダウンを変更する方法は見つかりません彼の仕事を使うツール。

ここでは、カウントダウンを変更する必要があるボタンと、私が全部の作業を行うために使用しているもののJavaScript(1つのライブラリが欠落していますがそれはあまりにも大きいのでここに置くことはできません、あなたはGithubでそれを見つけるでしょう)。

残りの時間を変更する簡単な方法はありますか、それとも単に停止してリセットすることなく変更できるように設計されていませんか?

var Example2 = new (function() { 
 
    var $countdown, 
 
     $form, // Form used to change the countdown time 
 
     incrementTime = 70, 
 
     currentTime = 30000, 
 
     updateTimer = function() { 
 
      $countdown.html(formatTime(currentTime)); 
 
      if (currentTime == 0) { 
 
       Example2.Timer.stop(); 
 
       timerComplete(); 
 
       Example2.resetCountdown(); 
 
       return; 
 
      } 
 
      currentTime -= incrementTime/10; 
 
      if (currentTime < 0) currentTime = 0; 
 
     }, 
 
     timerComplete = function() { 
 
      alert('Example 2: Countdown timer complete!'); 
 
     }, 
 
     init = function() { 
 
      $countdown = $('#countdown'); 
 
      Example2.Timer = $.timer(updateTimer, incrementTime, true); 
 
      $form = $('#example2form'); 
 
      $form.bind('submit', function() { 
 
       Example2.resetCountdown(); 
 
       return false; 
 
      }); 
 
     }; 
 
    this.resetCountdown = function() { 
 
     var newTime = parseInt($form.find('input[type=text]').val()) * 100; 
 
     if (newTime > 0) {currentTime = newTime;} 
 
     this.Timer.stop().once(); 
 
    }; 
 
    $(init); 
 
}); 
 
//I tried to trigger some commands, in vain 
 
$("#timerOnce5000").click(function(){ 
 
console.log("euh ouais ?"); 
 
$("#countdown").timer.once(5000); 
 
}); 
 
$("#timerSetTime1000").click(function(){ 
 
    console.log("allô ?"); 
 
    $("#countdown").timer.set({time:1000}); 
 
}); 
 
$("#timerSetTime5000").click(function(){ 
 
    console.log("bonjour ?"); 
 
    $("#countdown").timer.set({time:5000}); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
 
    <head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    <meta name="author" content="Jason Chavannes" /> 
 
    <title>jQuery Timer Demo</title> 
 

 
    <link rel="stylesheet" href="res/style.css" /> 
 
    <script type="text/javascript" src="res/jquery.min.js"></script> 
 
    <script type="text/javascript" src="jquery.timer.js"></script> 
 
    <script type="text/javascript" src="res/demo.js"></script> 
 
    </head> 
 
    <body> 
 
    <h3>Example 2 - Countdown Timer</h3> 
 
    <span id="countdown">05:00:00</span> 
 
    <form id="example2form"> 
 
     <input type='button' value='Play/Pause' onclick='Example2.Timer.toggle();' /> 
 
     <input type='button' value='Stop/Reset' onclick='Example2.resetCountdown();' /> 
 
     <input type='text' name='startTime' value='300' style='width:30px;' /> 
 
    </form> 
 

 
    <div class='example-four'> 
 
     <input type='button' value='timer.reset()' onclick='timer.reset();' /><br/> 
 
     <input type='button' value='timer.once()' onclick='timer.once();' /><br/> 
 
     <input type='button' value='timer.once(5000)' id="timerOnce5000" onclick='timer.once(5000);' /><br/> 
 
     <input type='button' value='timer.set({time:1000})' id ="timerSetTime1000" onclick='timer.set({time:1000});' /><br/> 
 
     <input type='button' value='timer.set({time:5000})' id="timerSetTime5000" onclick='timer.set({time:5000});' /> 
 
    </div> 
 
    <br/>

+0

移動 'currentTime'、または私はINSIDE this.hitbyenemy使用について考えていませんでした' currentTime' –

答えて

3

あなたは、この場合の試みで、 '敵にヒット' をシミュレートしている:

var Example2 = new (function() { 
... 

... 
    this.hitByEnemy() = function { 
    currentTime = currentTime - 2000; //assuming milliseconds is units 
    }); 
}); 

HTML約クールなものの

<div class='example-four'> 
    ... 
    <input type='button' value='hit by enemy' onclick='Example2.hitByEnemy();' /><br/> 
</div> 
+0

を変更するいくつかの方法を提供する:それは言った、それは次のように見てねExample2関数を使用してみました。どうもありがとうございます !! – Jaeger

2

ワンJavascript(時には少し危険なことがあるとしても)は一般的です共有変数/リソースを変更してコードの他の部分の動作に影響を与えるのはかなり簡単です。あなたの機能をあまりにも絡み合わせると、デバッグが困難になることがあるため、このような人はいらっしゃいません。個人的には、あなたのような限られたシナリオでは本当に役立つと思います。

私のアプローチは、プレーヤーがヒットしたときにcurrentTimeを変更する機能を持つことだけです。以下のような何か:あなたもヒットを記録し、あなたが定期的にタイマーを更新するとき、あなたがそれを使用することができ、新たな変数を追加することができます、と述べた

var $countdown, 
    $form, 
    // ... the other stuff you had in your provided code 
    hitHandler = function() { // you'll need to call this when your player gets hit 
     currentTime -= 2 * incrementTime; 
     if (currentTime < 0) currentTime = 0; 
    } 

。これは「よりクリーンな」解決策になりますが、少し冗長であり、タイマーを減らす前に増分機能を待たずにおきたい場合には必要ではないかもしれません。代わりに、 `var`のthis``へ

var $countdown, 
     $form, 
     // ... 
     hits = 0 
     hitHandler = function() { 
     hits++; 
     } 
     updateTimer = function() { 
     $countdown.html(formatTime(currentTime)); 
     if (currentTime == 0) { 
      Example2.Timer.stop(); 
      timerComplete(); 
      Example2.resetCountdown(); 
      return; 
     } 
     currentTime -= incrementTime/10; 
     currentTime -= hits * (2 * incrementTime); 
     hits = 0; 
     if (currentTime < 0) currentTime = 0; 
     } 
関連する問題