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
補足
回答ありがとうございました。 ・コメントいただいたおかげで、何やってるかようやく分かりました ・ただ、コードがあるから処理を追えるだけで、一から作成することは難しいです ・ループに一つ一つ値を当てはめていかないと、完成形が全くイメージできません ・慣れの問題でしょうか？ ・考え方というか、何かコツとかあるでしょうか？