HTML5/Javascriptで糸通し風アプリを作る(改良)

前回に作成したアプリでは何点か不満な箇所があったのでよりゲームっぽくなるように改良してみた。

改善点
・スマホ/タブレット対応
・曲線をより滑らかに描画
・障害物を出現
・経過時間を左上に表示

完成品

[操作方法]
PC → クリック中：上昇、非クリック中：下降
PC以外 → タップ：上昇/下降切り替え

設計図

実装のイメージはこんな感じ。

f:id:segmentation-fault:20170826170551p:plain

糸(曲線)の速度方式

糸(曲線)の上昇、下降の制御は下記のように実装。
デバイスがPCの場合はonmouseup, onmousedown、PC以外はonclickで制御することにした。

上昇または下降速度Vnewは下記式で計算している。

(式) Vnew = Vold + 重力加速度 * 単位時間

  var velocity;     // 糸の上昇or下降の速さ

  if (isDevicePC()) {
    canvas.addEventListener('mouseup', dropLine, false);
    canvas.addEventListener('mousedown', raiseLine, false);
  } else {
    canvas.addEventListener('click', changeRaiseDropLine, false);
  }

  // 糸の上昇
  function raiseLine(e) {
    if (!e.pageX) {
      e = event.touches[0];
    }
    
    if (e.button == 0) {
      clearInterval(dropTimerID);
      raiseTimerID = setInterval(function() { velocity -= LINE.PUSHUP * 1/LINE.FPS; }, LINE.CPS);
    }
  };
  
  
  // 糸の下降
  function dropLine(e) {
    if (!e.pageX) {
      e = this.data("e");
    }
    
    if (e.button == 0) {
      clearInterval(raiseTimerID);
      dropTimerID = setInterval(function() { velocity += LINE.GRAVITY * 1/LINE.FPS; }, LINE.CPS);
    }
  };

  // 糸の上昇,下降切り替え(スマホのみ)
  function changeRaiseDropLine() {
    clearInterval(dropTimerID);
    clearInterval(raiseTimerID);
    
    if (changeCount % 2 == 0) {
      raiseTimerID = setInterval(function() { velocity -= LINE.PUSHUP * 1/LINE.FPS; }, LINE.CPS);
    } else {
      dropTimerID = setInterval(function() { velocity += LINE.GRAVITY * 1/LINE.FPS; }, LINE.CPS);
    }
    
    changeCount++;
  };

var velocity; // 糸の上昇or下降の速さ

if (isDevicePC()) {

canvas.addEventListener('mouseup', dropLine, false);

canvas.addEventListener('mousedown', raiseLine, false);

} else {

canvas.addEventListener('click', changeRaiseDropLine, false);

}

// 糸の上昇

function raiseLine(e) {

if (!e.pageX) {

e = event.touches[0];

}

if (e.button == 0) {

clearInterval(dropTimerID);

raiseTimerID = setInterval(function() { velocity -= LINE.PUSHUP * 1/LINE.FPS; }, LINE.CPS);

}

};

// 糸の下降

function dropLine(e) {

if (!e.pageX) {

e = this.data("e");

}

if (e.button == 0) {

clearInterval(raiseTimerID);

dropTimerID = setInterval(function() { velocity += LINE.GRAVITY * 1/LINE.FPS; }, LINE.CPS);

}

};

// 糸の上昇,下降切り替え(スマホのみ)

function changeRaiseDropLine() {

clearInterval(dropTimerID);

clearInterval(raiseTimerID);

if (changeCount % 2 == 0) {

raiseTimerID = setInterval(function() { velocity -= LINE.PUSHUP * 1/LINE.FPS; }, LINE.CPS);

} else {

dropTimerID = setInterval(function() { velocity += LINE.GRAVITY * 1/LINE.FPS; }, LINE.CPS);

}

changeCount++;

};

糸(曲線)の描画

前回は大きさが2pxの正方形を細かく描くことで曲線を表現していたが、上昇or下降時に点の隙間が目立つため細かく直線を描く方式に変更した。

変更前

    // 軌跡の描画
    ctx.strokeStyle = "rgb(255,255,255)";
    ctx.lineWidth = LINE.WIDTH;
    ctx.beginPath();
    
    for (var i = 0; i < canvas.width/2 - 1; i++) {
    
      if ((line[i] != LINE.INVALID) && (line[i+1] != LINE.INVALID)) {
        
        ctx.moveTo(canvas.width/2 - i, line[i]);
        ctx.lineTo(canvas.width/2 - (i+1), line[i+1]);
      }
    }
    ctx.closePath();
    ctx.stroke();

// 軌跡の描画

ctx.strokeStyle = "rgb(255,255,255)";

ctx.lineWidth = LINE.WIDTH;

ctx.beginPath();

for (var i = 0; i < canvas.width/2 - 1; i++) {

if ((line[i] != LINE.INVALID) && (line[i+1] != LINE.INVALID)) {

ctx.moveTo(canvas.width/2 - i, line[i]);

ctx.lineTo(canvas.width/2 - (i+1), line[i+1]);

}

ctx.closePath();

ctx.stroke();

変更後

    // 軌跡の描画
    ctx.strokeStyle = "rgb(255,255,255)";
    ctx.lineWidth = LINE.WIDTH;
    ctx.beginPath();
    
    for (var i = 0; i < canvas.width/2 - 1; i++) {
    
      if ((line[i] != LINE.INVALID) && (line[i+1] != LINE.INVALID)) {
        
        ctx.moveTo(canvas.width/2 - i, line[i]);
        ctx.lineTo(canvas.width/2 - (i+1), line[i+1]);
      }
    }
    ctx.closePath();
    ctx.stroke();

// 軌跡の描画

ctx.strokeStyle = "rgb(255,255,255)";

ctx.lineWidth = LINE.WIDTH;

ctx.beginPath();

for (var i = 0; i < canvas.width/2 - 1; i++) {

if ((line[i] != LINE.INVALID) && (line[i+1] != LINE.INVALID)) {

ctx.moveTo(canvas.width/2 - i, line[i]);

ctx.lineTo(canvas.width/2 - (i+1), line[i+1]);

}

ctx.closePath();

ctx.stroke();

障害物の生成

障害物は横8px, 縦が最大160pxの長方形を2秒に一回、画面右端のランダムな高さに発生させている。画面の描画周期ごとのに右端から左に向かって移動する。

  // 障害物の生成
  function generateBlock() {
    var height = canvas.height * Math.random();
    
    for(var i = 1; i <= OBSTACLE.WIDTH; i++) {
      obstacle[i] = height;
    }

    blockTimerID = setTimeout(generateBlock, 1000/OBSTACLE.ENCOUNTS);
  };

  // 障害物の更新
  for (var i = 0; i < canvas.width - 1; i++) {
    obstacle[canvas.width - 1 - i] = obstacle[canvas.width - 1 - (i + 1)]
  }

  // 障害物の描画
  ctx.strokeStyle = "rgb(255,0,0)";
  ctx.beginPath();
  for (var i = 0; i < canvas.width; i++) {
    if (obstacle[i] != OBSTACLE.INVALID) {
      ctx.moveTo(canvas.width - i, obstacle[i]-OBSTACLE.HEIGHT);
      ctx.lineTo(canvas.width - i, obstacle[i]+OBSTACLE.HEIGHT);
    }
  }
  ctx.closePath();
  ctx.stroke();

// 障害物の生成

function generateBlock() {

var height = canvas.height * Math.random();

for(var i = 1; i <= OBSTACLE.WIDTH; i++) {

obstacle[i] = height;

}

blockTimerID = setTimeout(generateBlock, 1000/OBSTACLE.ENCOUNTS);

};

// 障害物の更新

for (var i = 0; i < canvas.width - 1; i++) {

obstacle[canvas.width - 1 - i] = obstacle[canvas.width - 1 - (i + 1)]

}

// 障害物の描画

ctx.strokeStyle = "rgb(255,0,0)";

ctx.beginPath();

for (var i = 0; i < canvas.width; i++) {

if (obstacle[i] != OBSTACLE.INVALID) {

ctx.moveTo(canvas.width - i, obstacle[i]-OBSTACLE.HEIGHT);

ctx.lineTo(canvas.width - i, obstacle[i]+OBSTACLE.HEIGHT);

}

ctx.closePath();

ctx.stroke();

経過時間の表示

描画周期ごとに経過時刻を左上に表示している。

      time += 1/LINE.FPS;
      
      // 経過時間を表示
      ctx.font = "18px";
      ctx.fillStyle = "rgb(255,255,0)";
      ctx.fillText('TIME:' + Math.floor(time) + '.' + Math.floor(10 * (time - Math.floor(time))), 
                   10, 
                   20);

time += 1/LINE.FPS;

// 経過時間を表示

ctx.font = "18px";

ctx.fillStyle = "rgb(255,255,0)";

ctx.fillText('TIME:' + Math.floor(time) + '.' + Math.floor(10 * (time - Math.floor(time))),

10,

20);

ゲームオーバー判定

ゲームオーバー判定(あたり判定)の条件は下記となっている。キャンバスの上端or下端、または障害物に接触した場合は即ゲームオーバーとなる。

    // ゲームオーバー判定
    if (line[0] >= canvas.height || line[0] < 0) {
      resetGame();
    } else if ((obstacle[canvas.width/2] != OBSTACLE.INVALID) && 
               ((obstacle[canvas.width/2] - OBSTACLE.HEIGHT) <= line[0]) && 
               (line[0] <= (obstacle[canvas.width/2] + OBSTACLE.HEIGHT))) {
      resetGame();
    }

// ゲームオーバー判定

if (line[0] >= canvas.height || line[0] < 0) {

resetGame();

} else if ((obstacle[canvas.width/2] != OBSTACLE.INVALID) &&

((obstacle[canvas.width/2] - OBSTACLE.HEIGHT) <= line[0]) &&

(line[0] <= (obstacle[canvas.width/2] + OBSTACLE.HEIGHT))) {

resetGame();

}

ソースコード全体

<html lang="ja">
<head>
<meta charset="utf-8">
<script>
(function() {
  var canvas;
  var ctx;
  var changeCount = 0;
  var drawTimerID;
  var raiseTimerID;
  var dropTimerID;
  var blockTimerID;
  var line = [];
  var obstacle = [];
  var velocity;     // 糸の上昇or下降の速さ
  var time;
  
  var LINE = {
    'FPS'        : 60,   // 画面更新の速さ
    'CPS'        : 1,    // 糸の操作感覚
    'GRAVITY'    : 120,  // 重力加速度
    'PUSHUP'     : 120,  // クリック中の抗力
    'INITIAL_V'  : -60,  // 初速度
    'WIDTH'      : 2,    // 曲線の幅(px)
    'INVALID'    : -1,   // 無効値
  };
  
  var OBSTACLE = {
    'WIDTH'      : 24,
    'HEIGHT'     : 80,
    'ENCOUNTS'   : 0.5,
    'INVALID'    : -1,
  };
  
  // 初期化処理(キャンバス作成,イベントハンドラ登録)
  function initialize () {
    // キャンバスを初期化
    if (canvas == null) {
      canvas = document.getElementById('field');
    }
    
    if (canvas.getContext) {
      if (ctx == null) {
        ctx = canvas.getContext('2d');
      }
      ctx.fillStyle = "rgb(0,0,0)";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      
      ctx.font = "18px 'ＭＳ ゴシック'";
      ctx.fillStyle = "rgb(255,255,255)";
      ctx.fillText("画面をクリックでスタート", 40, 150);
    } else {
      return;
    }

    // 糸の初速度を設定
    velocity = LINE.INITIAL_V;
    
    // 軌跡を初期化
    line[0] = canvas.height/2;
    for(var i = 1; i < canvas.width / 2; i++) {
      line[i] = LINE.INVALID;
    }
    
    
    // 障害物の初期化
    for(var i = 0; i < canvas.width; i++) {
      obstacle[i] = OBSTACLE.INVALID;
    }
    
    // 経過時間の初期化
    time = 0;
    
    clearInterval(drawTimerID);
    clearInterval(dropTimerID);
    clearInterval(raiseTimerID);
    clearTimeout(blockTimerID);
    
    // クリックでゲーム開始
    canvas.addEventListener('click', startGame, false);
  }
  
  
  // スマホ・タブレット or PC 判定
  function isDevicePC() {
    var ua = navigator.userAgent;
    if(ua.indexOf('iPhone') > 0 || 
       ua.indexOf('iPod') > 0 || 
       ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0 || 
       ua.indexOf('iPad') > 0 || 
       ua.indexOf('Android') > 0){
      
      return false;
    }
    
    return true;
  };
  
  
  // ゲーム開始
  function startGame() {
    ctx.fillStyle = "rgb(0,0,0)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    canvas.removeEventListener('click', startGame, false);
    
    if (isDevicePC()) {
      canvas.addEventListener('mouseup', dropLine, false);
      canvas.addEventListener('mousedown', raiseLine, false);
    } else {
      canvas.addEventListener('click', changeRaiseDropLine, false);
    }
    
    dropTimerID = setInterval(function() { velocity += LINE.GRAVITY * 1/LINE.FPS; }, LINE.CPS);
    drawTimerID = setInterval(drawDot, 1000/LINE.FPS);
    
    blockTimerID = setTimeout(generateBlock, 1000/OBSTACLE.ENCOUNTS);
  }
  
  
  // 糸の上昇
  function raiseLine(e) {
    if (!e.pageX) {
      e = event.touches[0];
    }
    
    if (e.button == 0) {
      clearInterval(dropTimerID);
      raiseTimerID = setInterval(function() { velocity -= LINE.PUSHUP * 1/LINE.FPS; }, LINE.CPS);
    }
  };
  
  
  // 糸の下降
  function dropLine(e) {
    if (!e.pageX) {
      e = this.data("e");
    }
    
    if (e.button == 0) {
      clearInterval(raiseTimerID);
      dropTimerID = setInterval(function() { velocity += LINE.GRAVITY * 1/LINE.FPS; }, LINE.CPS);
    }
  };
  
  
  // 糸の上昇,下降切り替え(スマホのみ)
  function changeRaiseDropLine() {
    clearInterval(dropTimerID);
    clearInterval(raiseTimerID);
    
    if (changeCount % 2 == 0) {
      raiseTimerID = setInterval(function() { velocity -= LINE.PUSHUP * 1/LINE.FPS; }, LINE.CPS);
    } else {
      dropTimerID = setInterval(function() { velocity += LINE.GRAVITY * 1/LINE.FPS; }, LINE.CPS);
    }
    
    changeCount++;
  };
  
  
  // 障害物の生成
  function generateBlock() {
    var height = canvas.height * Math.random();
    
    for(var i = 1; i <= OBSTACLE.WIDTH; i++) {
      obstacle[i] = height;
    }

    blockTimerID = setTimeout(generateBlock, 1000/OBSTACLE.ENCOUNTS);
  };
  
  
  // 画面の描画
  function drawDot() {
    
    // 軌跡の更新
    for (var i = 0; i < (canvas.width / 2 - 1); i++) {
      line[canvas.width / 2 - 1 - i] = line[canvas.width / 2 - 1 - (i + 1)]
    }
    
    line[0] = velocity * (1/LINE.FPS) + line[1];
    
    
    // 障害物の更新
    for (var i = 0; i < canvas.width - 1; i++) {
      obstacle[canvas.width - 1 - i] = obstacle[canvas.width - 1 - (i + 1)]
    }

    // 一旦黒塗り
    ctx.fillStyle = "rgb(0,0,0)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // 軌跡の描画
    ctx.strokeStyle = "rgb(255,255,255)";
    ctx.lineWidth = LINE.WIDTH;
    ctx.beginPath();
    
    for (var i = 0; i < canvas.width/2 - 1; i++) {
    
      if ((line[i] != LINE.INVALID) && (line[i+1] != LINE.INVALID)) {
        
        ctx.moveTo(canvas.width/2 - i, line[i]);
        ctx.lineTo(canvas.width/2 - (i+1), line[i+1]);
      }
    }
    ctx.closePath();
    ctx.stroke();
    
    
    // 障害物の描画
    ctx.strokeStyle = "rgb(255,0,0)";
    ctx.beginPath();
    for (var i = 0; i < canvas.width; i++) {
      if (obstacle[i] != OBSTACLE.INVALID) {
        ctx.moveTo(canvas.width - i, obstacle[i]-OBSTACLE.HEIGHT);
        ctx.lineTo(canvas.width - i, obstacle[i]+OBSTACLE.HEIGHT);
      }
    }
    ctx.closePath();
    ctx.stroke();
    
    // ゲームオーバー判定
    if (line[0] >= canvas.height || line[0] < 0) {
      resetGame();
    } else if ((obstacle[canvas.width/2] != OBSTACLE.INVALID) && 
               ((obstacle[canvas.width/2] - OBSTACLE.HEIGHT) <= line[0]) && 
               (line[0] <= (obstacle[canvas.width/2] + OBSTACLE.HEIGHT))) {
      resetGame();
    } else {
      time += 1/LINE.FPS;
      
      // 経過時間を表示
      ctx.font = "18px";
      ctx.fillStyle = "rgb(255,255,0)";
      ctx.fillText('TIME:' + Math.floor(time) + '.' + Math.floor(10 * (time - Math.floor(time))), 
                   10, 
                   20);
    }
  }
  
  
  // ゲームオーバ時のリセット処理
  function resetGame() {
    if (isDevicePC()) { 
      canvas.removeEventListener('mouseup', dropLine, false);
      canvas.removeEventListener('mousedown', raiseLine, false);
    } else {
      canvas.removeEventListener('click', changeRaiseDropLine, false);
    }
    
    initialize();
  }
  
  // onload
  window.addEventListener('load', initialize, false);
})();
</script>
</head>
<body>
<canvas id="field" width="300" height="300"></canvas>
<p>
[操作方法]<br>
PC → クリック中：上昇、非クリック中：下降<br>
PC以外 → タップ：上昇/下降切り替え
</p>
</body>
<html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

<head>

(function() {

var canvas;

var ctx;

var changeCount = 0;

var drawTimerID;

var raiseTimerID;

var dropTimerID;

var blockTimerID;

var line = [];

var obstacle = [];

var velocity; // 糸の上昇or下降の速さ

var time;

var LINE = {

'FPS' : 60, // 画面更新の速さ

'CPS' : 1, // 糸の操作感覚

'GRAVITY' : 120, // 重力加速度

'PUSHUP' : 120, // クリック中の抗力

'INITIAL_V' : -60, // 初速度

'WIDTH' : 2, // 曲線の幅(px)

'INVALID' : -1, // 無効値

};

var OBSTACLE = {

'WIDTH' : 24,

'HEIGHT' : 80,

'ENCOUNTS' : 0.5,

'INVALID' : -1,

};

// 初期化処理(キャンバス作成,イベントハンドラ登録)

function initialize () {

// キャンバスを初期化

if (canvas == null) {

canvas = document.getElementById('field');

}

if (canvas.getContext) {

if (ctx == null) {

ctx = canvas.getContext('2d');

}

ctx.fillStyle = "rgb(0,0,0)";

ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.font = "18px 'ＭＳゴシック'";

ctx.fillStyle = "rgb(255,255,255)";

ctx.fillText("画面をクリックでスタート", 40, 150);

} else {

return;

}

// 糸の初速度を設定

velocity = LINE.INITIAL_V;

// 軌跡を初期化

line[0] = canvas.height/2;

for(var i = 1; i < canvas.width / 2; i++) {

line[i] = LINE.INVALID;

}

// 障害物の初期化

for(var i = 0; i < canvas.width; i++) {

obstacle[i] = OBSTACLE.INVALID;

}

// 経過時間の初期化

time = 0;

clearInterval(drawTimerID);

clearInterval(dropTimerID);

clearInterval(raiseTimerID);

clearTimeout(blockTimerID);

// クリックでゲーム開始

canvas.addEventListener('click', startGame, false);

}

// スマホ・タブレット or PC 判定

function isDevicePC() {

var ua = navigator.userAgent;

if(ua.indexOf('iPhone') > 0 ||

ua.indexOf('iPod') > 0 ||

ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0 ||

ua.indexOf('iPad') > 0 ||

ua.indexOf('Android') > 0){

return false;

}

return true;

};

// ゲーム開始

function startGame() {

ctx.fillStyle = "rgb(0,0,0)";

ctx.fillRect(0, 0, canvas.width, canvas.height);

canvas.removeEventListener('click', startGame, false);

if (isDevicePC()) {

canvas.addEventListener('mouseup', dropLine, false);

canvas.addEventListener('mousedown', raiseLine, false);

} else {

canvas.addEventListener('click', changeRaiseDropLine, false);

}

dropTimerID = setInterval(function() { velocity += LINE.GRAVITY * 1/LINE.FPS; }, LINE.CPS);

drawTimerID = setInterval(drawDot, 1000/LINE.FPS);

blockTimerID = setTimeout(generateBlock, 1000/OBSTACLE.ENCOUNTS);

}

// 糸の上昇

function raiseLine(e) {

if (!e.pageX) {

e = event.touches[0];

}

if (e.button == 0) {

clearInterval(dropTimerID);

raiseTimerID = setInterval(function() { velocity -= LINE.PUSHUP * 1/LINE.FPS; }, LINE.CPS);

}

};

// 糸の下降

function dropLine(e) {

if (!e.pageX) {

e = this.data("e");

}

if (e.button == 0) {

clearInterval(raiseTimerID);

dropTimerID = setInterval(function() { velocity += LINE.GRAVITY * 1/LINE.FPS; }, LINE.CPS);

}

};

// 糸の上昇,下降切り替え(スマホのみ)

function changeRaiseDropLine() {

clearInterval(dropTimerID);

clearInterval(raiseTimerID);

if (changeCount % 2 == 0) {

raiseTimerID = setInterval(function() { velocity -= LINE.PUSHUP * 1/LINE.FPS; }, LINE.CPS);

} else {

dropTimerID = setInterval(function() { velocity += LINE.GRAVITY * 1/LINE.FPS; }, LINE.CPS);

}

changeCount++;

};

// 障害物の生成

function generateBlock() {

var height = canvas.height * Math.random();

for(var i = 1; i <= OBSTACLE.WIDTH; i++) {

obstacle[i] = height;

}

blockTimerID = setTimeout(generateBlock, 1000/OBSTACLE.ENCOUNTS);

};

// 画面の描画

function drawDot() {

// 軌跡の更新

for (var i = 0; i < (canvas.width / 2 - 1); i++) {

line[canvas.width / 2 - 1 - i] = line[canvas.width / 2 - 1 - (i + 1)]

}

line[0] = velocity * (1/LINE.FPS) + line[1];

// 障害物の更新

for (var i = 0; i < canvas.width - 1; i++) {

obstacle[canvas.width - 1 - i] = obstacle[canvas.width - 1 - (i + 1)]

}

// 一旦黒塗り

ctx.fillStyle = "rgb(0,0,0)";

ctx.fillRect(0, 0, canvas.width, canvas.height);

// 軌跡の描画

ctx.strokeStyle = "rgb(255,255,255)";

ctx.lineWidth = LINE.WIDTH;

ctx.beginPath();

for (var i = 0; i < canvas.width/2 - 1; i++) {

if ((line[i] != LINE.INVALID) && (line[i+1] != LINE.INVALID)) {

ctx.moveTo(canvas.width/2 - i, line[i]);

ctx.lineTo(canvas.width/2 - (i+1), line[i+1]);

}

ctx.closePath();

ctx.stroke();

// 障害物の描画

ctx.strokeStyle = "rgb(255,0,0)";

ctx.beginPath();

for (var i = 0; i < canvas.width; i++) {

if (obstacle[i] != OBSTACLE.INVALID) {

ctx.moveTo(canvas.width - i, obstacle[i]-OBSTACLE.HEIGHT);

ctx.lineTo(canvas.width - i, obstacle[i]+OBSTACLE.HEIGHT);

}

ctx.closePath();

ctx.stroke();

// ゲームオーバー判定

if (line[0] >= canvas.height || line[0] < 0) {

resetGame();

} else if ((obstacle[canvas.width/2] != OBSTACLE.INVALID) &&

((obstacle[canvas.width/2] - OBSTACLE.HEIGHT) <= line[0]) &&

(line[0] <= (obstacle[canvas.width/2] + OBSTACLE.HEIGHT))) {

resetGame();

} else {

time += 1/LINE.FPS;

// 経過時間を表示

ctx.font = "18px";

ctx.fillStyle = "rgb(255,255,0)";

ctx.fillText('TIME:' + Math.floor(time) + '.' + Math.floor(10 * (time - Math.floor(time))),

10,

20);

}

// ゲームオーバ時のリセット処理

function resetGame() {

if (isDevicePC()) {

canvas.removeEventListener('mouseup', dropLine, false);

canvas.removeEventListener('mousedown', raiseLine, false);

} else {

canvas.removeEventListener('click', changeRaiseDropLine, false);

}

initialize();

}

// onload

window.addEventListener('load', initialize, false);

})();

</script>

</head>

<body>

<p>

[操作方法]<br>

PC → クリック中：上昇、非クリック中：下降<br>

PC以外 → タップ：上昇/下降切り替え

</p>

</body>

<html>

まとめ

多少はまともなアプリになったと思うけどスマホの動作がまだ不安定で気に食わない。あまり知識が無い中で作っているため、おかしな実装や冗長な表現をしているかもしれない。再度勉強してから見直してみようと思う。

完成品

設計図

糸(曲線)の速度方式

糸(曲線)の描画

障害物の生成

経過時間の表示

ゲームオーバー判定

ソースコード全体

まとめ

WebSocketを使ってcoincheckの板情報(BTC/JPY)をリアルタイム...

canvasで少しずつ作るブロック崩し(2/5)

canvasで少しずつ作るブロック崩し(3/5)