説明
パドルでボール跳ね返した時にスコアを加算し表示にするには、あらかじめスコアを入れる変数もしくはプロパティを用意し0の数値を入れておきます。以下のサンプルではgame.score=0としてgameオブジェクトのscoreプロパティを使用しています。ボールとパドルが接触したらスコアを10増やします。
スコアの表示はあらかじめラベル機能を使って設定しておきます。ラベルは画面上に文字を表示することができるもので、後から内容を変更することができます。作成したラベルの内容を変更するにはラベルオブジェクトのtextプロパティに文字を入れます。サンプルではscoreLabelがラベルオブジェクトで、スコアが加算されたらtextプロパティにSCOREの文字と点数を入れています。
■HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample game</title>
<style>
body { margin: 0; }
</style>
<script src="js/enchant.min.js"></script>
<script src="js/main.js"></script>
</head>
<body></body>
</html>
■JavaScript (main.js)
enchant(); // ライブラリの初期化
window.onload = function(){
// 240×320ピクセルサイズの画面(Canvas)を作成
var game = new Game(240, 320);
// フレームレートの設定。30fpsに設定
game.fps = 30;
// 画像データをあらかじめ読み込ませる
game.preload("images/pad.png","images/ball.png");
// ゲームの背景色を青色に設定
game.rootScene.backgroundColor = "blue";
// スコアを入れる変数を用意する
game.score = 0;
// スコアを表示するラベルを作成
var scoreLabel = new Label("SCORE : 0");
scoreLabel.font = "16px Tahoma";
scoreLabel.color = "white";
scoreLabel.x = 10; // X座標
scoreLabel.y = 5; // Y座標
game.rootScene.addChild(scoreLabel);
// データの読み込みが完了したら処理
game.onload = function(){
// ボールの設定
var ball = new Sprite(16, 16);
ball.image = game.assets["images/ball.png"];
ball.x = 0; // X座標
ball.y = 0; // Y座標
ball.dx = 3; // X方向の移動量
ball.dy = 5; // Y方向の移動量
game.rootScene.addChild(ball);
// パドルの設定
var pad = new Sprite(32, 16);
pad.image = game.assets["images/pad.png"];
pad.x = game.width/2; // X座標
pad.y = game.height - 40; // Y座標
game.rootScene.addChild(pad);
// フレームイベントが発生したら処理
game.rootScene.addEventListener(Event.ENTER_FRAME, function(){
ball.x = ball.x + ball.dx; // X方向の移動量を加算
ball.y = ball.y + ball.dy; // Y方向の移動量を加算
// 画面外かどうか調べる
if ((ball.x < 0) || (ball.x > (game.width-ball.width))){ ball.dx = -ball.dx; }
if (ball.y < 0){ ball.dy = -ball.dy; }
// ボールが下まで行ったらゲームオーバー
if(ball.y > game.height){
game.stop();
alert("スコアは"+game.score+"点でした");
}
// パドルを移動させる
if (game.input.left){
pad.x = pad.x - 4; // パドルを左に移動
if (pad.x < 0){ pad.x = 0; } // 左端かどうか調べる
}
if (game.input.right){
pad.x = pad.x + 4; // パドルを右に移動
if (pad.x > (game.width-pad.width)){ pad.x = game.width-pad.width; } // 右端かどうか調べる
}
// パドルとボールの接触判定
if (pad.intersect(ball)){
ball.dy = -ball.dy; // 接触した場合はボールのY方向の移動量を逆にする
game.score = game.score + 10; // スコアを加算(10点)
scoreLabel.text = "SCORE : "+game.score;
}
});
}
game.start(); // ゲーム処理開始
}
目次に戻る