- 締切済み
Javascriptテトリスに機能を追加したいです
ネットでソースを落としたテトリスに次の機能を追加したいのですが、可能でしょうか？ 1、ゲーム開始のボタンを追加して、それが押された後にゲームを開始する。 2、背景画像を選択 現在のソース HTML <!DOCTYPE html> <html> <head> <title>Tetris</title> <meta charset = "UTF-8"> <h1>テトリス</h1> <link rel='stylesheet' href='style.css' /> </head> <body background = "hakugin.jpg" /body> <body> <audio id="clearsound" src="sound/pop.ogg" preload="auto"></audio> <canvas width='300' height='600'></canvas> <script src='js/tetris.js'></script> <script src='js/controller.js'></script> <script src='js/render.js'></script> </body> </html> js var COLS = 10, ROWS = 20; // 盤面のマスの数 var board = []; // 盤面の状態を保持する変数 var lose; // 一番うえまで積み重なっちゃったフラグ var interval; // ゲームタイマー保持用変数 var current; // 現在操作しているブロック var currentX, currentY; // 現在操作しているブロックのいち // ブロックのパターン var shapes = [ [ 1, 1, 1, 1 ], [ 1, 1, 1, 0, 1 ], [ 1, 1, 1, 0, 0, 0, 1 ], [ 1, 1, 0, 0, 1, 1 ], [ 1, 1, 0, 0, 0, 1, 1 ], [ 0, 1, 1, 0, 1, 1 ], [ 0, 1, 0, 0, 1, 1, 1 ] ]; // ブロックの色 var colors = [ 'brown', 'orange', 'blue', 'yellow', 'red', 'green', 'pink' ]; // shapesからランダムにブロックのパターンを出力し、盤面の一番上へセットする function newShape() { var id = Math.floor( Math.random() * shapes.length ); // ランダムにインデックスを出す var shape = shapes[ id ]; // パターンを操作ブロックへセットする current = []; for ( var y = 0; y < 4; ++y ) { current[ y ] = []; for ( var x = 0; x < 4; ++x ) { var i = 4 * y + x; if ( typeof shape[ i ] != 'undefined' && shape[ i ] ) { current[ y ][ x ] = id + 1; } else { current[ y ][ x ] = 0; } } } // ブロックを盤面の上のほうにセットする currentX = 5; currentY = 0; } // 盤面を空にする function init() { for ( var y = 0; y < ROWS; ++y ) { board[ y ] = []; for ( var x = 0; x < COLS; ++x ) { board[ y ][ x ] = 0; } } } // newGameで指定した秒数毎に呼び出される関数。 // 操作ブロックを下の方へ動かし、 // 操作ブロックが着地したら消去処理、ゲームオーバー判定を行う function tick() { // １つ下へ移動する if ( valid( 0, 1 ) ) { ++currentY; } // もし着地していたら(１つしたにブロックがあったら) else { freeze(); // 操作ブロックを盤面へ固定する clearLines(); // ライン消去処理 if (lose) { // もしゲームオーバなら最初から始める newGame(); return false; } // 新しい操作ブロックをセットする newShape(); } } // 操作ブロックを盤面にセットする関数 function freeze() { for ( var y = 0; y < 4; ++y ) { for ( var x = 0; x < 4; ++x ) { if ( current[ y ][ x ] ) { board[ y + currentY ][ x + currentX ] = current[ y ][ x ]; } } } } // 操作ブロックを回す処理 function rotate( current ) { var newCurrent = []; for ( var y = 0; y < 4; ++y ) { newCurrent[ y ] = []; for ( var x = 0; x < 4; ++x ) { newCurrent[ y ][ x ] = current[ 3 - x ][ y ]; } } return newCurrent; } // 一行が揃っているか調べ、揃っていたらそれらを消す function clearLines() { for ( var y = ROWS - 1; y >= 0; --y ) { var rowFilled = true; // 一行が揃っているか調べる for ( var x = 0; x < COLS; ++x ) { if ( board[ y ][ x ] == 0 ) { rowFilled = false; break; } } // もし一行揃っていたら, サウンドを鳴らしてそれらを消す。 if ( rowFilled ) { document.getElementById( 'clearsound' ).play(); // 消滅サウンドを鳴らす // その上にあったブロックを一つずつ落としていく for ( var yy = y; yy > 0; --yy ) { for ( var x = 0; x < COLS; ++x ) { board[ yy ][ x ] = board[ yy - 1 ][ x ]; } } ++y; // 一行落としたのでチェック処理を一つ下へ送る } } } // キーボードが押された時に呼び出される関数 function keyPress( key ) { switch ( key ) { case 'left': if ( valid( -1 ) ) { --currentX; // 左に一つずらす } break; case 'right': if ( valid( 1 ) ) { ++currentX; // 右に一つずらす } break; case 'down': if ( valid( 0, 1 ) ) { ++currentY; // 下に一つずらす } break; case 'rotate': // 操作ブロックを回す var rotated = rotate( current ); if ( valid( 0, 0, rotated ) ) { current = rotated; // 回せる場合は回したあとの状態に操作ブロックをセットする } break; } } // 指定された方向に、操作ブロックを動かせるかどうかチェックする // ゲームオーバー判定もここで行う function valid( offsetX, offsetY, newCurrent ) { offsetX = offset
- JavaScript
- 回答数2
- ありがとう数14
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- Taiyonoshizuku
- ベストアンサー率37% (183/489)
- Taiyonoshizuku
- ベストアンサー率37% (183/489)
補足
できれば、処理の文を書いてほしいですが解説サイトなどでも大丈夫です。 自分も、探しているのですが中々思うような機能がなくて・・・ なお、背景の変更はできました。