この機能に[スタート]ボタンを追加するにはどうすればよいですか？

-1

バックグラウンドでオーディオを置き換えて、javascriptゲームを開始するための開始ボタンを追加する方法を理解しようとしています。私はこのゲームに出くわしました。音楽がバックグラウンドで演奏されているページや既に開始されたゲームのページをロードするとすぐに動作します。オーディオリンクを削除したとき、プレイヤー3の生存期間が終了した後にゲームが一時停止したとき、オーディオを残しておけば、3人の生存者があなたのポイントとポップアップメッセージを見ることができます。あなたは、コードを見て、私が言うことをしようとしているかを理解することができますので、ここではこの機能に[スタート]ボタンを追加するにはどうすればよいですか？

は、ゲームへのリンクです：https://jsfiddle.net/74nbrdak/embedded/result/

<div> 
<canvas id="canvas" width="1000" height="500"></canvas> 
</div> 

<audio id="background-music" preload="auto" autoplay loop> 
<source 
src="https://dl.dropbox.com/s/5r3iu7kjsl0mx81/Wildfire%20Cut%20Loopable.wav"  type="audio/wav">

function ShowGamesFinished() { 
var message = gamesfinished[Math.floor(Math.random() *  gamesfinished.length)]; 

document.getElementById("background-music").pause();

出典

2017-12-14 Natalie McKnight

これは不完全なコードのようです。何が起こっているのかを理解できるように、より多くのコードを提供してください。 –

@ AdityaDan.iコードが –

純粋なjavascriptを使用している場合外部ライブラリがなければ、キャンバスを初期化できます。ボタンをクリックすると、キャンバスのアニメーションを開始してゲームを開始できます。あなたが私の答えを得られない場合は教えてください。

出典

2017-12-14 15:38:20

のリンクが追加されました。どうすればこのように表示されますか？ –

'関数アニメーション（）{' 'c.clearRect（0,0、window.innerWidth、window.innerHeight）;' ' requestAnimationFrameの（アニメーション）;' ' ため（VAR i = 0; iはcircleArrayを<長さ、iは++）{ ' ' VAR円= circleArray [I]; ' ' circle.update（）; ' '} ' '} ' は' //あなたcanvas' を初期化 'のinit（）' 'document.getElementById（ 'start'）。onclick = function（）{' ' //この関数はキャンバスでアニメーションを開始します ' 'animate（）;' '};' –

あなたは正しい形式でこれをレイアウトできますか？それは私に非常に混乱しているように見える –

一見して、オーディオタグを削除してもJavaScriptには何の効果もありません。オーディオタグにautoplay属性があるため、ページを開いたときに音声が再生されます。

JavaScriptのコードはすべてスクリプトタグ内にあるようです。そのため、ページが開くと自動実行されます。あなたが試みることができるのは、コード全体を関数にラップしてボタンにバインドすることです。

何かのように：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <style> 
    h1 { 
     font-family: Architects Daughter; 
     text-align: center; 
     font-size: 48pt; 
     margin-top: 50px; 
     margin-bottom: 0px; 
    } 

    h2 { 
     font-family: Architects Daughter; 
     text-align: center; 
     font-size: 28pt; 
     margin-top: 0px; 
     margin-bottom: 50px; 
    } 

    span { 
     display: block; 
     font-family: Arial; 
     text-align: center; 
     margin-bottom: 2px; 
    } 

    div { 
     display: flex; 
     justify-content: space-around; 
    } 

    canvas { 
     border: 2px solid #CC3333; 
    } 
    </style> 
</head> 
<body> 
    <div> 
     <canvas id="canvas" width="640" height="360"></canvas> 
    </div> 
    <button id="start_game">Start</button> 
    <script> 
var run_game = function() { 
var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var WIDTH = canvas.width; 
var HEIGHT = canvas.height; 
var updateTime = 20; // Milliseconds 
var keys = [false, false, false]; 

var score = 0; 
var kills = 0; 

// Player Size = 50x18 
var playerHealth = 3; 
var playerX = WIDTH/2; 
var playerY = HEIGHT - 20; 
var playerSpeed = 6; 

var lazerSpeed = 16; 
var lazerReloadDistance = playerY - 120; 
var lazerLoaded = true; 
var lazers = []; 

var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; 
var maxEnemies = 12; 
var enemySpeed = 4; 
var enemies = []; 

function Clear() { 
    ctx.fillStyle = "#404040"; 
    ctx.fillRect(0, 0, WIDTH, HEIGHT); 
} 

function DrawHealth(health) { 
    ctx.fillStyle = "#E52B50"; 
    ctx.shadowColor = "#E52B50"; 
    ctx.shadowBlur = 15; 
    ctx.font = "18px Arial"; 
    ctx.textAlign = "start"; 

    var hearts = ""; 

    if (health == 3) { 
    hearts = "<3 <3 <3"; 
    } 
    else if (health == 2) { 
    hearts = "<3 <3 X"; 
    } 
    else if (health == 1) { 
    hearts = "<3 X X"; 
    } 
    else { 
    hearts = "X X X"; 
    } 

    ctx.fillText(hearts, 10, 25); 
} 

function DrawScore() { 
    ctx.fillStyle = "#FFFF00"; 
    ctx.shadowColor = "#FFFF00"; 
    ctx.shadowBlur = 15; 
    ctx.font = "18px Arial"; 
    ctx.textAlign = "end"; 
    ctx.fillText(score, WIDTH - 10, 25); 
} 

function DrawPlayer(x, y) { 
    ctx.fillStyle = "#1E90FF"; 
    ctx.shadowColor = "#1E90FF"; 
    ctx.shadowBlur = 15; 
    ctx.font = "24px Arial"; 
    ctx.textAlign = "center"; 
    ctx.fillText("</^\\>", x, y); 
} 

function Lazer() { 
    this.x = playerX; 
    this.y = playerY - 38; 

    this.draw = function() { 
    ctx.fillStyle = "#FFFF00"; 
    ctx.shadowColor = "#FFFF00"; 
    ctx.shadowBlur = 15; 
    this.y -= lazerSpeed; 
    ctx.fillRect(this.x, this.y, 2, 18); 
    } 
} 

function DrawLazers() { 
    // Check if the last lazer fired is far enough away to fire another 
    if (lazers.length != 0) { 
    if (lazers[lazers.length - 1].y <= lazerReloadDistance) { 
     lazerLoaded = true; 
    } 
    } 
    else { 
    lazerLoaded = true; 
    } 

    for (var i = 0; i < lazers.length; i++) { 
    var currentLazer = lazers[i]; 

    // Still on screen 
    if (currentLazer.y > -20) { 
     currentLazer.draw(); 
    } 
    else { 
     lazers.splice(i, 1); 
    } 
    } 
} 

function Enemy(x) { 
    this.x = x; 
    this.y = 0; 
    this.health = Math.ceil(Math.random() * 4); 
    this.speed = enemySpeed/this.health; 

    var letterIndex = Math.floor(Math.random() * letters.length); 
    this.letter = letters.substr(letterIndex, 1); 

    this.size = 24 + (this.health * 4); // Font size based on health 
    ctx.font = this.size+"px Arial"; 

    this.width = ctx.measureText(this.letter).width; 
    this.height = this.size * 0.75; // Approximate height; 

    this.draw = function() { 
    ctx.fillStyle = "#FF0040"; 
    ctx.shadowColor = "#FF0040"; 
    ctx.shadowBlur = 15; 
    ctx.font = this.size+"px Arial"; 
    ctx.textAlign = "center"; 

    this.y += this.speed; 

    ctx.fillText(this.letter, this.x, this.y); 
    } 
} 

function DrawEnemies() { 
    // Spawn new enemies 
    if (Math.random() <= 0.05 && enemies.length < maxEnemies) { 
    var randX = 40 + Math.floor(Math.random() * (WIDTH - 80)); 
    enemies.push(new Enemy(randX)); 
    } 

    for (var i = 0; i < enemies.length; i++) { 
    var currentEnemy = enemies[i]; 

    if (currentEnemy.health <= 0) { 
     enemies.splice(i, 1); 
     score += 25; 
     kills++; 
     continue; 
    } 

    // Put enemies that passed the player back at the top 
    if (currentEnemy.y > HEIGHT + currentEnemy.height) { 
     currentEnemy.y = 0; 
     continue; 
    } 

    currentEnemy.draw(); 
    } 
} 

var gameOverMessages = [ 
    "You're in a better place", 
    "You're Cooked!", 
    "You gave it your all", 
    "At least you tried", 
    "You're Ruined!", 
    "You're Finished!" 
]; 
function DrawGameOver() { 
    var message = gameOverMessages[Math.floor(Math.random() * gameOverMessages.length)]; 
// after deleting the audio element, this doesnt work anymore. 
// document.getElementById("background-music").pause(); 

    ctx.fillStyle = "#505050"; 
    ctx.shadowColor = "#505050"; 
    ctx.shadowBlur = 15; 
    ctx.fillRect(50, (HEIGHT/2) - 100, WIDTH - 100, 200) 

    ctx.fillStyle = "#FFFFFF"; 
    ctx.shadowColor = "#FFFFFF"; 
    ctx.shadowBlur = 15; 
    ctx.textAlign = "center"; 
    ctx.font = "36pt Arial"; 
    ctx.fillText(message, WIDTH/2, HEIGHT/2 - 40); 

    ctx.textAlign = "end"; 
    ctx.font = "18pt Arial"; 
    ctx.fillText("Final Score - ", WIDTH/2, HEIGHT/2 + 30); 

    ctx.textAlign = "start"; 
    ctx.fillStyle = "#FFFF00"; 
    ctx.shadowColor = "#FFFF00"; 
    ctx.fillText(score, WIDTH/2, HEIGHT/2 + 30); 

    ctx.fillStyle = "#FFFFFF"; 
    ctx.shadowColor = "#FFFFFF"; 
    ctx.textAlign = "end"; 
    ctx.font = "18pt Arial"; 
    ctx.fillText("Total Kills - ", WIDTH/2, HEIGHT/2 + 60); 

    ctx.textAlign = "start"; 
    ctx.fillStyle = "#FF0040"; 
    ctx.shadowColor = "#FF0040"; 
    ctx.fillText(kills, WIDTH/2, HEIGHT/2 + 60); 
} 

//////////////////// 
// Core Functions // 
//////////////////// 
var collidedEnemyIndex = -1; 
function CheckCollision() { 
    for (var i = 0; i < enemies.length; i++) { 
    var currentEnemy = enemies[i]; 

    // Check if enemy hits player. The 2 is to account for the text width of the player 
    if (
      currentEnemy.x <= playerX - 2 + 25 + (currentEnemy.width/2) && 
     currentEnemy.x >= playerX - 2 - 25 - (currentEnemy.width/2) && 
     currentEnemy.y >= playerY - 18 && 
     currentEnemy.y <= playerY + currentEnemy.height && 
     collidedEnemyIndex != enemies.indexOf(currentEnemy) 
     ) 
    { 
     collidedEnemyIndex = enemies.indexOf(currentEnemy); 
     playerHealth--; 
    } 

    // Reset the index of the enemy colliding with the player 
    if (collidedEnemyIndex == enemies.indexOf(currentEnemy) && currentEnemy.y < HEIGHT/2) { 
     collidedEnemyIndex = -1; 
    } 

    for (var j = 0; j < lazers.length; j++) { 
     var currentLazer = lazers[j]; 

     if (
     currentLazer.x <= currentEnemy.x + (currentEnemy.width/2) && 
     currentLazer.x >= currentEnemy.x - (currentEnemy.width/2) && 
     currentLazer.y <= currentEnemy.y 
     ) 
     { 
     currentEnemy.health--; 
     score += 10; 
     lazers.splice(lazers.indexOf(currentLazer), 1); 
     } 
    } 
    } 
} 

function HandleInput() { 
    if (keys[0] == true && keys[1] == false && playerX <= WIDTH - 30) { 
    playerX += playerSpeed; 
    } 

    if (keys[1] == true && keys[0] == false && playerX >= 30) { 
    playerX -= playerSpeed; 
    } 

    if (keys[2]) { 
    if (lazerLoaded) { 
     lazers.push(new Lazer()); 
     lazerLoaded = false; 
    } 
    } 
} 

function KeysDown(e) { 
    e.preventDefault(); 

    // Right 
    if (e.keyCode == 39) { 
    keys[0] = true; 
    } 
    // Left 
    else if (e.keyCode == 37) { 
    keys[1] = true; 
    } 

    // Up/Fire 
    if (e.keyCode == 38) { 
    keys[2] = true; 
    } 
} 

function KeysUp(e) { 
    // Right 
    if (e.keyCode == 39) { 
    keys[0] = false; 
    } 
    // Left 
    else if (e.keyCode == 37) { 
    keys[1] = false; 
    } 

    // Up/Fire 
    if (e.keyCode == 38) { 
    keys[2] = false; 
    } 
} 

document.addEventListener("keydown", KeysDown, true); 
document.addEventListener("keyup", KeysUp, true); 

function Update() { 
    Clear(); 

    HandleInput(); 

    CheckCollision(); 

    DrawEnemies(); 

    DrawLazers(); 
    DrawPlayer(playerX, playerY); 

    DrawHealth(playerHealth); 
    DrawScore(); 

    if (playerHealth <= 0) { 
    clearInterval(gameLoop); 
    DrawGameOver(); 
    } 
} 

var gameLoop = setInterval(Update, updateTime); 
}; 

document.querySelector('#start_game').addEventListener('click', run_game); 
    </script> 
</body> 
</html>

出典

2017-12-14 15:48:28 Shilly

あなたはこれをフィドルのコードに適用して、オーディオ全体を削除して動作するかどうか確認してください。あなたが私にスクリーンショットを表示することができたら、本当にありがたいです –

完全なコードで更新されました。私はAdityaの発見を固定した後で動作します。 – Shilly

あなたはライブセーバーです！どうもありがとうございます！私はスタートをクリックする前に、それが白であるのでゲームを見ることができません。ユーザーがスタートボタンをクリックするまでゲームを表示する方法はありますか？ –

私はオーディオのリンクを削除すると、ゲームは、私は3人の命が起動しているときにすることができます、中にオーディオを残す場合は3人の命は、アップされている選手の後に一時停止しましたあなたのポイントとポップアップメッセージを見て、誰かが私にこれを理解するのを助けてくれますか？

したがって、オーディオ要素がページにあるときの2番目のシナリオでは、ゲームは作成者が意図したとおりに機能します。
オーディオ要素がページにない最初のシナリオでは、ゲームを処理する関数が呼び出されるまで、ゲームは正常に機能します。その機能の問題の原因は、この行です。document.getElementById("background-music").pause();。オーディオ要素が存在しないので、エラーを投げ、画面上のゲームは描画されません。これが助けてくれることを願っています

出典

2017-12-14 15:56:19

これが鍵です！ありがとう。 – Shilly

ありがとうございます！それは私が識別できなかった私の主な問題でした。私は助けが必要な唯一のものはスタート/ポーズボタンを持っているので、ページが読み込まれるとすぐにゲームが始まらないので、助けてください。 –

'var gameLoop = setInterval（Update、updateTime）;'これはゲームを開始するコードです。 'setInterval'値を' gameLoop'に代入する単純な関数を書いてください。しかし、これがすべてのコードで機能するには、グローバルスコープ内でgameLoop変数を宣言して、前述のように値を割り当てます。それからボタンの 'click'イベントでその関数を実行してください。 –

この機能に[スタート]ボタンを追加するにはどうすればよいですか？

答えて

関連する問題