締切済み

Javascriptテトリスに機能を追加したいです

2015/01/30 04:44

ネットでソースを落としたテトリスに次の機能を追加したいのですが、可能でしょうか？ 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

noname#210419

JavaScript
回答数2
ありがとう数14

Taiyonoshizukuの回答

Taiyonoshizuku
ベストアンサー率37% (183/489)

2015/01/30 11:31 回答No.1

可能か不可能かでいえば可能だけど、それを作ってくれってこと？

質問者

補足 2015/01/31 01:11

できれば、処理の文を書いてほしいですが解説サイトなどでも大丈夫です。自分も、探しているのですが中々思うような機能がなくて・・・なお、背景の変更はできました。

この回答がついた質問に戻る

回答全件

そんな、ピンポイントのやりかたが書いてあるサイトはまずないよ。製作依…

- Taiyonoshizuku
2015/02/01 20:51

関連するQ&A

テトリス／配列をブロックに変換したいのですが、
・下記リンク先の「8 配列をブロックに変換」コードの意味が分からないので教えてください。 http://svn.coderepos.org/share/docs/amachang/20080813-procamp2008/index.html#section.8 ・下記はブロックの元となる配列？・なぜ[0,1]が2つ？　　　　　　var block = [ 　　　　　　　　[1,1], 　　　　　　　　[0,1], 　　　　　　　　[0,1] 　　　　　　]; ・赤ブロックを生成していると思うのですが、式の意味が分かりません・何をやっているのでしょうか？・外側のfor文でblockへ格納されている配列の要素数未満までループ(0～2) ・何のために？？？　　　　　　for (var y = 0; y < block.length; y ++) { 　　　　　　　　for (var x = 0; x < block[y].length; x ++) { 　　　　　　　　　　if (block[y][x]) { 　　　　　　　　　　　　ctx.fillRect(x * 20, y * 20, 20, 20); 　　　　　　　　　　} 　　　　　　　　} 　　　　　　}
- ベストアンサー
- JavaScript
JavaScriptで初めてOOPを試したところうまくいきません。どこ
JavaScriptで初めてOOPを試したところうまくいきません。どこがおかしいのでしょうか？ img要素をアニメーション的に移動させたいと思っており、次のようにコンストラクタとprototypeを使ってクラスを作成し、インスタンスを生成して最下部の関数をイベントハンドラで呼び出してみるのですが実行されません。 //コンストラクタ function Box(emID,targetX,targetY,speed,timer){ this.element=getElementById("emID"); this.targetX=targetX; //移動先の座標 this.targetY=targetY; this.speed=speed; this.timer=timer*1000; } //現在の座標取得 Box.prototype.currentXY=function(){ this.currentX=eval(this.element.style.left.replace("px","")); this.currentY=eval(this.element.style.top.replace("px","")); } //移動先までのXY値を徐々に加算 Box.prototype.loopContents=function(){ if(this.currentX<=targetX-0.3 || this.currentY<=targetY-0.3){ this.currentX += (targetX-currentX)/speed; this.element.style.left = this.currentX+"px"; this.currentY += (targetY-currentY)/speed; this.element.style.top = this.currentY+"px"; } else{ clearTimeout(); } } //加算を繰り返す Box.prototype.runLoop=function(){ setTimeout(this.loopContents(),10); } //実行関数 function move(emID,targetX,targetY,speed,timer){ alert(emID+"and"+targetX+"and"+targetY+"and"+speed+"and"+timer); //(1) var mover = new Box(emID,targetX,targetY,speed,timer); window.alert("check"); //(2) mover.currentXY(); //現在のXYを取得 setInterval(mover.runLoop(),mover.timer); } alertで検査してみるのですが(1)ではemIDの箇所は[object HTMLImageElement]と表示されます。これは問題ないのでしょうか？また(2)のalertは機能しないようです。どこがどう設計ミスなのか全くわからず困っています。
- ベストアンサー
- JavaScript
javascriptの打ちミスしてる所を知りたい。
参考書の通り打ちました。参考書では、蛇を上下左右キーで操作し、餌を食べさせるゲームと書いておりましたが、灰色のイメージが出るだけで、蛇っぽいのは出ません。たぶんどっかでタイプミスしてると思うのですが、どこだかわかりません。教えてください。 <!DOCTYPE html> <html> <head> <title>SnakeBite</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script type="text/javascript"> var W,H,S=20; var snake=[],foods=[]; var keyCode=0; var point=0; var timer=NaN; var ctx; function Point(x,y){ this.x=x; this.y=y; } function init(){ var canvas = document.getElementById('field'); W=canvas.width/S; H=canvas.height/S; ctx =canvas.getContext('2d'); ctx.font ="20px sans-serif"; snake.push(new Point(W/2,H/2)); for(var i=0; i<10;i++){ addFood(); } timer=setInterval("tick()",200); window.onkeydown =keydown; } function addFood(){ while(true){ var x =Math.floor(Math.random()*W); var y =Math.floor(Math.random()*H); if(isHit(foods,x,y)|| isHit(snake.x,y)){ continue; } foods.push(new point(x,y)); break; } function isHit(data,x,y){ for(var i=0;i<data.lenght;i++){ if(data[i].x==x && data[i].y==y){ return true; } } return false; } function moveFood(x,y){ foods =foods.filter(function(p){ return(p.x !=x || p.y !=y); }); addFood(); } function tick(){ var x=snake[0].x; var y=snake[0].y; switch(keyCode){ case 37:x--;break; case 38:y--;break; case 39:x++;break; case 40:y++;break; defaule:paint(); return; } if(isHit(snake,x,y) || x<0 ||x>=W || y<0||y>=H) { clearInterval(timer); paint(); return; } snake.unshift(new Point(x,y)); if(isHit(foods,x,y)){ point+=10; moveFood(x,y); }else{ snake.pop(); } paint(); } function paint(){ ctx.clearRect(0,0,W*S,H*S); ctx.fillStyle="rgb(256,0,0)"; ctx.fillText(point,S,S*2); ctx.fillStyle="rgb(0,0,255)"; foods.forEach(function(p){ ctx.fillText("+",p.x*S,(p.y+1)*S); }); snake.forEach(function(p){ ctx.fillText("*",p.x*S,(p.y+1)*S); }); } function keydown(event){ keyCode=event.keyCode; } </script> </head> <body onload="init()"> <canvas id="field" width="400" height="400" style="background:#cccccc"> </canvas> </body> </html>
- ベストアンサー
- JavaScript
javascriptのタイプミス
javascript初心者です。以下のコードでどこにミスがあるのか解りません。どこにあるのでしょうか？　このソースをエディタに貼ると見やすくなると思います。 <!DOCTYPE html> <html> <head> <title>SnakeBite</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script type="text/javascript"> var W, H, S = 20; var snake = [　], foods = [　]; var keyCode = 0; var point = 0; var timer = NaN; var ctx; // pointオブジェクト function Point(x,y) { this.x = x; this.y = y; } //初期関数 function init() { var canvas = document.getElementById('field'); W = canvas.width / S; H = canvas.height / S; ctx = canvas.getContext('2d'); ctx.font = "20px sans-serif"; //蚊の初期化 snake.push(new Point(W / 2, H / 2)); //餌の初期化 for (var i = 0 ; i < 10 ; i++) { addFood(); } timer = setInterval("tick()", 200); window.onkeydown = keydown; } //餌の追加 function addFood() { while (true) { var x = Math.floor(Math.random() * W); var y = Math.floor(Math.random() * H); if (isHit(foods, x, y) || isHit(snake, x, y)) { continue; } foods.push(new Point(x, y)); break; } } //衝突判定 function isHit(data, x, y) { for (var i = 0 ; i < data.length ; i++) { if (data[i].x==x && data[i].y==Y) { return true; } } return false; } function moveFood(x, y) { foods =foods. filter(function (p){return (p.x !=x || p.y !=y);}); addFood(); } function tick() { var x = snake[0].x; var y = snake[0].y; switch (keyCode) { case 37: x--; break; //左 case 38: y--; break; //上 case 39: x++; break; //右 case 40: y++; break; //下 default: paint(); return; } //自分or壁に衝突 if(isHit(snake,x,y) || x<0 || x>=W || y<0 || y>=H ) clearInterval(timer); paint(); return; } //頭を先頭に追加 snake.unshift(new Point(x,y)); if(isHit(foods, x, y)) { point +=10; //餌を食べた moveFood(x,y); }else{ snake.pop(); //食べていない→しっぽを解除 } paint(); } function paint() { ctx.clearRect(0,0,W * S, H * S); ctx.fillStyle = "rgb(256,0,0)"; ctx.fillText(point, S, S * 2); ctx.fillStyle = "rgb(0,0,255)"; foods.forEach(function (p) { ctx.fillText("+", p.x * S, (p.y + 1) * S);}); snake.forEach(function (p) { ctx.fillText("*", p.x * S, (p.y + 1) * S); }); } function keydown(event) { keyCode = event.keyCode; } </script> </head> <body onload="init()"> <canvas id="field" width="400" height="400" style="background:#cccccc"> </canvas> </body> </html>
- ベストアンサー
- JavaScript
教えてください。javascriptで困っています
javascript初心者です。たくさんある変数をfor文を使って計算させたいと思っています。計算はfor分の中でしたいのですが、うまくいきません。以下のようなことをしたいのですが。evalなどを使うのでしょうか。調べるキーワードがわからなかったので、投稿させていただきました。教えてください。よろしくお願いします。 var x1=1; var x2=2; var x3=3; var x4=4; var x5=5; var y1=1; var y2=2; var y3=3; var y4=4; var y5=5; var z1; var z2; var z3; var z4; var z5; for(var i=0 i<5 i++){ "z"+i = "x"+i + "y"+i; } alert(z1); alert(z2); alert(z3); alert(z4); alert(z5);
- ベストアンサー
- JavaScript
JavaScriptで全くの初心者なのですが、
JavaScriptで全くの初心者なのですが、フィッシャーイェーツのシャッフルをaのリスト内でしてから、そこから一つ値をとり、別の関数内で、その関数内での新たな変数に代入するようにしたいです。（function(){var b = this.result;}のような）プログラミングはやらないのに急に使うことになり困っているのでだれか助けてください。 a = [1,1,1,5,5,5,9,9,9]; for (var a=[],i=0;i<9;++i) a[i]=i; this.result = a[shuffle(a.length)] ; function shuffle(array) { var tmp, current, top = array.length; if(top) while(--top) { current = Math.floor(Math.random() * (top + 1)); tmp = array[current]; array[current] = array[top]; array[top] = tmp; } return array; }
- ベストアンサー
- JavaScript
javascriptについて
現在ＨＰを作成していてjavaのプルダウンメニューを設置していますが最初からメニューが開いた状態になります。ちなみにsdmenu.jsを使用しています。最初開いた時にメニューが閉じるようにできますでしょうか？ function SDMenu(id) { if (!document.getElementById || !document.getElementsByTagName) return false; this.menu = document.getElementById(id); this.submenus = this.menu.getElementsByTagName("div"); this.remember = true; this.speed = 4; this.markCurrent = true; this.oneSmOnly = false; } SDMenu.prototype.init = function() { var mainInstance = this; for (var i = 0; i < this.submenus.length; i++) this.submenus[i].getElementsByTagName("span")[0].onclick = function() { mainInstance.toggleMenu(this.parentNode); }; if (this.markCurrent) { var links = this.menu.getElementsByTagName("a"); for (var i = 0; i < links.length; i++) if (links[i].href == document.location.href) { links[i].className = "current"; break; } } if (this.remember) { var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)"); var match = regex.exec(document.cookie); if (match) { var states = match[1].split(""); for (var i = 0; i < states.length; i++) this.submenus[i].className = (states[i] == 0 ? "collapsed" : ""); } } }; SDMenu.prototype.toggleMenu = function(submenu) { if (submenu.className == "collapsed") this.expandMenu(submenu); else this.collapseMenu(submenu); }; SDMenu.prototype.expandMenu = function(submenu) { var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight; var links = submenu.getElementsByTagName("a"); for (var i = 0; i < links.length; i++) fullHeight += links[i].offsetHeight; var moveBy = Math.round(this.speed * links.length); var mainInstance = this; var intId = setInterval(function() { var curHeight = submenu.offsetHeight; var newHeight = curHeight + moveBy; if (newHeight < fullHeight) submenu.style.height = newHeight + "px"; else { clearInterval(intId); submenu.style.height = ""; submenu.className = ""; mainInstance.memorize(); } }, 30); this.collapseOthers(submenu); }; SDMenu.prototype.collapseMenu = function(submenu) { var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight; var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length); var mainInstance = this; var intId = setInterval(function() { var curHeight = submenu.offsetHeight; var newHeight = curHeight - moveBy; if (newHeight > minHeight) submenu.style.height = newHeight + "px"; else { clearInterval(intId); submenu.style.height = ""; submenu.className = "collapsed"; mainInstance.memorize(); } }, 30); }; SDMenu.prototype.collapseOthers = function(submenu) { if (this.oneSmOnly) { for (var i = 0; i < this.submenus.length; i++) if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed") this.collapseMenu(this.submenus[i]); } }; SDMenu.prototype.expandAll = function() { var oldOneSmOnly = this.oneSmOnly; this.oneSmOnly = false; for (var i = 0; i < this.submenus.length; i++) if (this.submenus[i].className == "collapsed") this.expandMenu(this.submenus[i]); this.oneSmOnly = oldOneSmOnly; }; SDMenu.prototype.collapseAll = function() { for (var i = 0; i < this.submenus.length; i++) if (this.submenus[i].className != "collapsed") this.collapseMenu(this.submenus[i]); }; SDMenu.prototype.memorize = function() { if (this.remember) { var states = new Array(); for (var i = 0; i < this.submenus.length; i++) states.push(this.submenus[i].className == "collapsed" ? 0 : 1); var d = new Date(); d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000)); } };
- ベストアンサー
- JavaScript
JavaScriptのjQueryのサンプルに機能を追加したいです！
当方jQuery初心者です。 jQueryのサンプル「Dropline Menu 7」を使っています。現在地となるcurrentがデフォ表示で赤字にて表示されていると思います。その他メニューをマウスオーバーすると他メニューのサブメニューが下に表示されていきます。しかし、マウスアウトすると直ぐデフォ表示に戻ってしまいます。そこにマウスオーバー時に現われていたサブメニューがマウスアウトしてもすぐ消えない、2～3秒程の時間表示されるようなものを設け、その設定した時間内にマウスオーバーするとそのまま表示を継続、というような機能をこのスクリプトに追加したいです。 http://jsajax.com/jQueryDroplineMenuArticle1167.aspx いろいろと調べてみたのですがいい方法が見つかりません。使われている JScript.js の中身はこのようになっていました。 /* ====================================================== This copyright notice must be untouched at all times. Copyright (c) 2008 Stu Nicholls - stunicholls.com - all rights reserved. ========================================================= */ $(function() { $("#dropline li.current").children("ul").css("left", "0px").show(); $("#dropline li.current").children(":first-child").css("color", "#c00") $("#dropline li").hover(function() { if (this.className.indexOf("current") == -1) { getCurrent = $(this).parent().children("li.current:eq(0)"); if (this.className.indexOf("top") != -1) { $(this).children("a:eq(0)").css("color", "#069"); } else { $(this).children("a:eq(0)").css("color", "#000"); } if (getCurrent = 1) { $(this).parent().children("li.current:eq(0)").children("ul").hide(); ; } $(this).children("ul:eq(0)").css("left", "0px").show(); } }, function() { if (this.className.indexOf("current") == -1) { getCurrent = $(this).parent().children("li.current:eq(0)"); if (this.className.indexOf("top") != -1) { $(this).children("a:eq(0)").css("color", "#000"); } else { $(this).children("a:eq(0)").css("color", "#666"); } if (getCurrent = 1) { $(this).parent().children("li.current:eq(0)").children("ul").show(); ; } $(this).children("ul:eq(0)").css("left", "-99999px").hide(); } }); }); イベントのhover(over, out)で、out部のfunction() {～}　の処理内にて変更・追加すればよいのでしょうか？どなたかご教授いただけますでしょうか、お願いします！
- 締切済み
- JavaScript
目盛表示ができない（ｖｂ2010）
下記のグラフのように、Y軸に目盛表示をしたいのですが、うまくできません。 PictureBoxにLineは表示できるのですが、目盛が表示できません。どなたかお教え願います。下記のコードでは、目盛表示ができないのでしょうか。　　 '目盛表示 Dim J As Integer, CurrentY As Integer, CurrentX As Integer Dim strB As String J = 0 For I = 0 To 200 Step 40 CurrentX = 120 CurrentY = 100 + I strB = CStr(0.2 - (2 / 5) * J * 0.1) J = J + 1 Next J = 0 For I = 0 To 200 Step 40 CurrentX = 120 CurrentY = 300 + I strB = CStr(0 - (2 / 5) * J * 0.1) J = J + 1 Next
- 締切済み
- Visual Basic
javascriptで困ってます
下記のスクリプトでcanvas上で四角を動かすアニメーションをさせたのですが、andoroidに標準のブラウザで見ると、最初の位置に四角が残ってしまいます。この残ってしまう四角を消したたいのですが、どのようにしたらよいのでしょうか、教えてください。よろしくお願いします。 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>canvasアニメーション</title> <script type="text/javascript"> // <![CDATA[ window.onload = function(){ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#ffffff"; var point = {x:0,y:0}; var par = {x:3,y:3}; var timer; var delay = 100; function draw(x,y){ ctx.clearRect(0,0,600,600); ctx.fillRect(x,y,50,50); } var loop = function(){ point.x = point.x + par.x; point.y = point.y + par.y; draw(point.x,point.y); clearTimeout(timer); timer = setTimeout(loop,delay); } loop(); } // ]]> </script> <style type="text/css" media="screen"> /* <![CDATA[ */ body{ background-color:#000000; } /* ]]> */ </style> </head> <body> <canvas id="canvas" width="600" height="600"></canvas> </body> </html>
- 締切済み
- JavaScript

Javascriptテトリスに機能を追加したいです

Taiyonoshizukuの回答

補足 2015/01/31 01:11

関連するQ&A

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

Javascriptテトリスに機能を追加したいです

Taiyonoshizukuの回答

補足 2015/01/31 01:11

関連するQ&A

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

カテゴリ
一覧

専門家に質問してみよう
専門家登録