ぷよぷよがプログラミング教育に使われている、というのは前々から耳にしていた。
腕試しと思い早速ソースコードを入手し、実行してみた。
ぷよぷよ
akasairoha.sakura.ne.jp
上記のアドレスでぷよぷよが遊べるはず。
※スマートフォンで操作してみたけど、遊びづらい。ちょっと考える。
操作方法。
↑ ぷよ回転
← 左に移動
→ 右に移動
↓ 下に移動
ざっと、ソースコードを見て思った事を。
そのままコード写しても動かんぞ、これ。
という訳で、以下直したところ。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- CSP(XSS攻撃の軽減と報告) -->
<!-- <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: http://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-evol'"> -->
<title>ぷよぷよ</title>
<!-- ダウンロードできるソースには、loader.jsは見当たらず。 -->
<!-- コメントアウトした。問題無し -->
<!-- <script src="components/loader.js"></script> -->
<script src="src/config.js"></script>
<script src="src/stage.js"></script>
<script src="src/score.js"></script>
<script src="src/puyoimage.js"></script>
<script src="src/player.js"></script>
<script src="src/game.js"></script>
<!-- ダウンロードできるソースには、loader.css、style.cssは見当たらず。 -->
<!-- コメントアウトした。問題無し -->
<!-- <link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css"> -->
</head>
<body style="margin:0;">
<!-- <div id="stage" style="position:absolute; left: 0; top: 0; overflow: hidden;"></div> -->
<!-- ダウンロードできるソースには、puyo_4bg.pngは見当たらず。 -->
<!-- コメントアウトした。問題無し -->
<!-- <div id="stage" style="position:relative; margin: 0 auto; overflow: hidden;background: url(img/puyo_4bg.png)"></div> -->
<!-- 代わりに以下を打ち込み。と言ってもbackgroundを消しただけ -->
<div id="stage" style="position:relative; margin: 0 auto; overflow: hidden;"></div>
<!-- <div id="score" style="position:absolute; left: 0; top: 0; overflow: hidden; text-align: right;"></div> -->
<div id="score" style="margin: 0 auto; overflow: hidden; text-align: right;"></div>
<!-- 画像はなかった為、他サイトより拝借 -->
<div style="display:none">
<img src="img/puyo_1.png" id="puyo_1">
<img src="img/puyo_2.png" id="puyo_2">
<img src="img/puyo_3.png" id="puyo_3">
<img src="img/puyo_4.png" id="puyo_4">
<img src="img/puyo_5.png" id="puyo_5">
<img src="img/batankyu.png" id="batankyu">
<img src="img/zenkeshi.png" id="zenkeshi">
<img src="img/0.png" id="font0">
<img src="img/1.png" id="font1">
<img src="img/2.png" id="font2">
<img src="img/3.png" id="font3">
<img src="img/4.png" id="font4">
<img src="img/5.png" id="font5">
<img src="img/6.png" id="font6">
<img src="img/7.png" id="font7">
<img src="img/8.png" id="font8">
<img src="img/9.png" id="font9">
</div>
</body>
</html>//player.jsより
static initialize () {
// キーボードの入力を確認する
this.keyStatus = {
right: false,
left: false,
up: false,
down: false
};
// ブラウザのキーボードの入力を取得するイベントリスナを登録する
document.addEventListener('keydown', (e) => {
// キーボードが押された場合
// keyCodeは廃止
// switch(e.keyCode) {
// 代わりにkeyを使用
// ソースコードでは戻り値で分岐しているが、ここでは入力キーで分岐
switch(e.key) {
// 左向きキー
case "ArrowLeft":
this.keyStatus.left = true;
e.preventDefault(); return false;
// 上向きキー
case "ArrowUp":
this.keyStatus.up = true;
e.preventDefault(); return false;
// 右向きキー
case "ArrowRight":
this.keyStatus.right = true;
e.preventDefault(); return false;
// 下向きキー
case "ArrowDown":
this.keyStatus.down = true;
e.preventDefault(); return false;
}
});
document.addEventListener('keyup', (e) => {
// キーボードが離された場合
// keyCodeは廃止
//switch(e.keyCode) {
switch(e.key) {
// 左向きキー
case "ArrowLeft":
this.keyStatus.left = false;
e.preventDefault(); return false;
// 上向きキー
case "ArrowUp":
this.keyStatus.up = false;
e.preventDefault(); return false;
// 右向きキー
case "ArrowRight":
this.keyStatus.right = false;
e.preventDefault(); return false;
// 下向きキー
case "ArrowDown":
this.keyStatus.down = false;
e.preventDefault(); return false;
}
});大体、こんな感じだったかな。
ソースコードは「ぷよぷよ ソースコード」で検索すれば入手可能。
さて、これをどう改造しようかな？
