指でタッチしたまま動かしてください。
画面サイズは始める前に調整してください。
スマフォで動きます。
「ひろひろの生活日記」で検索してみてください。
プログの記事のリンクからどうぞ。
１）オーバフローは起きていませんでした。
２）描画アドレスがキャンパスを超えて描画してもエラーにはなりません。
３）セットタイムアウトは、セットされれば、パラレルで動きます。
条件で回避する必要があります。
３０００ミリ妙の間に他のセットが動くようです。
４）他のモジュールの実行より直近のセットタイムアウトで実行したモジュールが優先されます。
５）キーを押したかを検出するには、イベントを登録する必要尾があります。
以上
こんあところですかね。
後、ゲームクリアの処理がいりますが、皆さんで改善してみてください。
一番のネックはタイマーの処理のようです。
var canvas;
var ctx;
WIDTH = 640;
HEIGHT = 480;
// white, red, yellow, green, blue
var colortable = ["red","yellow","green"];
var username = ["ipad","iphone","android"]; //端末の名前
var br = 10; // ボールの半径
var paddlew = 96; // パドルの幅
var paddleh = 16; // パドルの高さ
var blockw = 48; // ブロックの幅
var blockh = 24; // ブロックの高さ
var blocks = [];
var blocksu = 50;
var endflag = 0; // 処理の終わりを判定する
var gameover = 0;
var gameover1 = 0;
var ballx = 0;
var bally = 0;
var bx1 = 0;
var by1 = 0;
var mx = 0;
var my = 0;
var paddle;
var x3 = 0;
// ブロックスに配列要素にプロパティを付与する。
function block() {
this.id = 1;
this.x = 0;
this.y = 0;
this.color = 0;
this.centerx = 0;
this.centery = 0;
}
// パドルの構造体
function paddlez() {
this.centerx = 0;
this.centery = 0;
this.x = 0;
this.y = 0;
this.mayMethood = function() {
this.x = this.centerx - paddlew / 2;
this.y = this.centery - paddleh / 2;
}
}
// 初期処理
function init(){
canvas = document.getElementById('world');
canvas.width = WIDTH;
canvas.height = HEIGHT;
ctx = canvas.getContext('2d');
ctx.font = "48px 'MS Pゴシック'";
user = window.navigator.userAgent.toLowerCase();
// パドルを定義する。
paddle = new paddlez();
// マウスの処理
for(i=0; i<username.length; i++){
if(user.indexOf(username[i]) > 0)break;
}
if(i < username.length){
document.addEventListener("touchmove", touchmove);
}else{
document.addEventListener("mousemove", mousemove);
}
document.addEventListener("keydown", keydown);
// ブロックスを定義する。
blocks = new Array(blocksu);
for(i=0; i<blocksu; i++){
blocks[i] = new block();
}
minit();
}
//スマホ/タブレットのタッチイベントで起動する関数
function touchmove(e){
if (e.targetTouches.length == 1){
touch = e.targetTouches[0];
touchpice(touch.pageX ,touch.pageY);
}
}
//ｐｃのマウスクリックイベントで起動する関数
function mousemove(e){
touchpice(e.x ,e.y);
}
//引数で指定した位置にある駒の移動処理（※変更前です）
function touchpice(tx,ty){
mx = tx;
my = ty;
}
//キーが押された時の処理
function keydown(e){
k = e.keyCode;
x3 = paddle.centerx;
if(k==37) x3 -= 16; if(k==39) x3 += 16;
element = document.getElementById("idresult2");
element.innerHTML = " k=" + k;
}
//座標が範囲内に存在するか判定する
function isinside(x,y,ax,ay,w,h){
if((x<ax)||(x>=(ax+w))||(y<ay)||(y>=(ay+h)))return(false);
return(true);
}
function sgn(a) {
if(a > 0) return(1); else return(-1);
}
function main() {
minit();
//クロックの処理
mmain();
// gameover += 1;
// if(gameover1 > 0) setTimeout("main()",1000);
}
// メインのイニシャル処理
function minit(){
ballx = WIDTH / 2; // ボールのｘ座標
bally = HEIGHT - 170; // ボールのｙ座標
bx1 = 2; // ボールの速度（ｘ成分）
by1 = -2.5; // ボールの速度（ｙ成分）
x = WIDTH / 2; // パドルの位置（ｘ座標）
y = HEIGHT - 64; // パドルの位置（ｙ座標）
// パドルは左端がpaddleのｘ、ｙ
paddle.centerx = x;
paddle.centery = y;
for(i=0; i<blocksu; i++){
blocks[i].id = 1;
blocks[i].x = (i % 10) * (blockw + 4) + 64;
blocks[i].y = Math.floor(i / 10) * (blockh + 4) + 64;
blocks[i].color = Math.floor(blocks[i].y / 28) % 3;
blocks[i].centerx = blocks[i].x + blockw / 2;
blocks[i].centery = blocks[i].y + blockh / 2;
}
if(gameover1 > 0){
gameover1 = 0;
if(gameover < 11){
mmain();
} else {
gameover = 0;
}
}
//（描画処理）
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, WIDTH, HEIGHT);
blockdraw();
paddledraw();
balldraw();
}
// メインのメイン処理
function mmain(){
//キーコード取得しパドルの位置を移動させる。← →
element = document.getElementById("idresult");
element.innerHTML = "bx1=" + bx1 + " by1=" + by1 + " ballx=" + ballx + " bally=" + bally;
x = paddle.centerx;
if(isinside(mx,my,0,0,WIDTH,HEIGHT)==true){ //マウスの位置がキャンパス内なら座標をセットする。
x = mx;
y = my;
} else {
x = x3;
}
//パドルがゲーム画面内ならパドルの位置を変更する
if( (x >= (paddlew / 2)) && (x <= (WIDTH - (paddlew / 2)))){
paddle.centerx = x;
}
//ボールの速度と位置の変更
x = ballx + bx1;
y = bally + by1;
//ボールが左右の壁に当たるとｘの速度を反転する
if( (x < br) || (x > (WIDTH - br ))) bx1 = -bx1; // ballx = Math.floor(ballx) ;
//ボールが天井にあたるとｙの速度を反転する
if( y < br ) by1 = -by1;
//ボールが底にあたるとゲームオーバー
if( y > HEIGHT ) { gameover1 += 1; gameover += 1; }
//パドルとボールとの距離の差を計算する
dx = paddle.centerx - x;
dy = paddle.centery - y;
//ゼロ割を回避するための処理
if(dy == 0) dy = 1;
//パドルとボールが当たっているかの判断
if((Math.abs(dx) < (paddlew / 2 + br)) && (Math.abs(dy) < (paddleh / 2 + br)))
{
//角度により反射を判定
if(Math.abs(dx / dy) > (paddlew / paddleh)){
bx1 = -bx1;
ballx = paddle.centerx - (sgn(dx) * (paddlew / 2 + br));
} else {
bx1 = -dx / 10;
by1 = -by1;
bally = paddle.centery - (sgn(dy) * (paddleh / 2 + br));
}
}
//ブロックとボールが当たった時の処理
for(i=0; i < blocksu; i++){
if(blocks[i].id == 1){
dx = blocks[i].centerx - x;
dy = blocks[i].centery - y;
//ゼロ割を回避するための処理
if(dy == 0) dy = 1;
//ブロックとボールが当たっているかの判断
if((Math.abs(dx) < (blockw / 2 + br)) && (Math.abs(dy) < (blockh / 2 + br))) {
//角度により反射を判定
if(Math.abs(dx / dy) > (blockw / blockh)){
bx1 = -bx1;
ballx = blocks[i].centerx - (sgn(dx) * (blockw / 2 + br));
} else {
by1 = -by1;
bally = blocks[i].centery - (sgn(dy) * (blockh / 2 + br));
}
blocks[i].id = 0;
break;
}
}
}
ballx += bx1;
bally += by1;
//（描画処理）
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, WIDTH, HEIGHT);
blockdraw();
paddledraw();
balldraw();
if(gameover1 > 0){
gameoverdraw();
timer2 = setTimeout("minit()",3000);
}
//クロックの処理
if(gameover1 == 0){
timer1 = setTimeout("mmain()",20);
}
}
//描画ファンクションのコーディング
// ブロックの描画
function blockdraw() {
for (i=0; i < blocksu; i++){
if(blocks[i].id == 1) {
wkcolor = blocks[i].color;
wkx = blocks[i].x;
wky = blocks[i].y;
ctx.fillStyle = colortable[wkcolor];
ctx.fillRect(wkx, wky, blockw, blockh);
}
}
}
// パドルの描画
function paddledraw() {
ctx.fillStyle = "white";
// x1 = paddle.centerx - paddlew / 2;
// y1 = paddle.centery - paddleh / 2;
paddle.mayMethood();
ctx.fillRect(paddle.x, paddle.y, paddlew, paddleh);
}
// ボールの描画
function balldraw() {
wkx = Math.floor(ballx);
wky = Math.floor(bally);
ctx.beginPath();
ctx.fillStyle = "white";
ctx.arc(wkx,wky,br,0*Math.PI,2*Math.PI);
ctx.fill();
}
// ゲームオーバーの表示
function gameoverdraw(){
ctx.font = "48px 'MS Pゴシック'";
ctx.fillStyle = "white";
ctx.fillText("GAME OVER",180,300);
}
