概要
plunkerでvueやってみた。
phinaでブロック崩しやってみた。
サンプルコード
new Vue({
el: '#app',
data: {
},
beforeMount: function() {
this.init()
},
methods: {
init() {
phina.globalize();
var SCREEN_WIDTH = 640;
var SCREEN_HEIGHT = 960;
var MAX_PER_LINE = 8;
var BLOCK_NUM = MAX_PER_LINE * 5;
var BLOCK_SIZE = 64;
var BOARD_PADDING = 50;
var PADDLE_WIDTH = 150;
var PADDLE_HEIGHT = 32;
var BALL_RADIUS = 16;
var BALL_SPEED = 16;
var BOARD_SIZE = SCREEN_WIDTH - BOARD_PADDING * 2;
var BOARD_OFFSET_X = BOARD_PADDING + BLOCK_SIZE / 2;
var BOARD_OFFSET_Y = 150;
phina.define("MainScene", {
superClass: 'CanvasScene',
init: function(options) {
this.superInit(options);
this.scoreLabel = Label('0').addChildTo(this);
this.scoreLabel.x = this.gridX.center();
this.scoreLabel.y = this.gridY.span(1);
this.scoreLabel.fill = 'white';
this.group = CanvasElement().addChildTo(this);
var gridX = Grid(BOARD_SIZE, MAX_PER_LINE);
var gridY = Grid(BOARD_SIZE, MAX_PER_LINE);
var self = this;
(BLOCK_NUM).times(function(i) {
var xIndex = i % MAX_PER_LINE;
var yIndex = Math.floor(i / MAX_PER_LINE);
var angle = (360) / BLOCK_NUM * i;
var block = Block(angle).addChildTo(this.group).setPosition(100, 100);
block.x = gridX.span(xIndex) + BOARD_OFFSET_X;
block.y = gridY.span(yIndex) + BOARD_OFFSET_Y;
}, this);
this.ball = Ball().addChildTo(this);
this.paddle = Paddle().addChildTo(this);
this.paddle.setPosition(this.gridX.center(), this.gridY.span(15));
this.paddle.hold(this.ball);
this.ballSpeed = 0;
this.one('pointend', function() {
this.paddle.release();
this.ballSpeed = BALL_SPEED;
});
this.score = 0;
this.time = 0;
this.combo = 0;
},
update: function(app) {
this.time += app.deltaTime;
this.paddle.x = app.pointer.x;
if (this.paddle.left < 0)
{
this.paddle.left = 0;
}
if (this.paddle.right > this.gridX.width)
{
this.paddle.right = this.gridX.width;
}
(this.ballSpeed).times(function() {
this.ball.move();
this.checkHit();
}, this);
if (this.group.children.length <= 0)
{
this.gameclear();
}
},
checkHit: function() {
var ball = this.ball;
if (ball.left < 0)
{
ball.left = 0;
ball.reflectX();
}
if (ball.right > this.gridX.width)
{
ball.right = this.gridX.width
ball.reflectX();
}
if (ball.top < 0)
{
ball.top = 0;
ball.reflectY();
}
if (ball.bottom > this.gridY.width)
{
ball.bottom = this.gridY.width
ball.reflectY();
this.gameover();
}
if (ball.hitTestElement(this.paddle))
{
ball.bottom = this.paddle.top;
var dx = ball.x - this.paddle.x;
ball.direction.x = dx;
ball.direction.y = -80;
ball.direction.normalize();
this.ballSpeed += 1;
this.combo = 0;
}
this.group.children.some(function(block) {
if (ball.hitTestElement(block))
{
var dq = Vector2.sub(ball, block);
if (Math.abs(dq.x) < Math.abs(dq.y))
{
ball.reflectY();
if (dq.y >= 0)
{
ball.top = block.bottom;
}
else
{
ball.bottom = block.top;
}
}
else
{
ball.reflectX();
if (dq.x >= 0)
{
ball.left = block.right;
}
else
{
ball.right = block.left;
}
}
block.remove();
this.combo += 1;
this.score += this.combo * 100;
var c = ComboLabel(this.combo).addChildTo(this);
c.x = this.gridX.span(12) + Math.randint(-50, 50);
c.y = this.gridY.span(12) + Math.randint(-50, 50);
return true;
}
}, this);
},
gameclear: function() {
var bonus = 2000;
this.score += bonus;
var seconds = (this.time / 1000).floor();
var bonusTime = Math.max(60 * 10 - seconds, 0);
this.score += (bonusTime * 10);
this.gameover();
},
gameover: function() {
this.exit({
score: this.score,
});
},
_accessor: {
score: {
get: function() {
return this._score;
},
set: function(v) {
this._score = v;
this.scoreLabel.text = v;
},
},
}
});
phina.define('Block', {
superClass: 'RectangleShape',
init: function(angle) {
this.superInit({
width: BLOCK_SIZE,
height: BLOCK_SIZE,
fill: 'hsl({0}, 80%, 60%)'.format(angle || 0),
stroke: null,
cornerRadius: 8,
});
},
});
phina.define('Ball', {
superClass: 'CircleShape',
init: function() {
this.superInit({
radius: BALL_RADIUS,
fill: '#eee',
stroke: null,
cornerRadius: 8,
});
this.speed = 0;
this.direction = Vector2(1, -1).normalize();
},
move: function() {
this.x += this.direction.x;
this.y += this.direction.y;
},
reflectX: function() {
this.direction.x *= -1;
},
reflectY: function() {
this.direction.y *= -1;
},
});
phina.define('Paddle', {
superClass: 'RectangleShape',
init: function() {
this.superInit({
width: PADDLE_WIDTH,
height: PADDLE_HEIGHT,
fill: '#eee',
stroke: null,
cornerRadius: 8,
});
},
hold: function(ball) {
this.ball = ball;
},
release: function() {
this.ball = null;
},
update: function() {
if (this.ball)
{
this.ball.x = this.x;
this.ball.y = this.top - this.ball.radius;
}
}
});
phina.define('ComboLabel', {
superClass: 'Label',
init: function(num) {
this.superInit(num + ' combo!');
this.stroke = 'white';
this.strokeWidth = 8;
if (num < 5)
{
this.fill = 'hsl(40, 60%, 60%)';
this.fontSize = 16;
}
else if (num < 10)
{
this.fill = 'hsl(120, 60%, 60%)';
this.fontSize = 32;
}
else
{
this.fill = 'hsl(220, 60%, 60%)';
this.fontSize = 48;
}
this.tweener.by({
alpha: -1,
y: -50,
}).call(function() {
this.remove();
}, this);
},
});
phina.main(function() {
var app = GameApp({
title: 'Breakout',
startLabel: 'splash',
width: SCREEN_WIDTH,
height: SCREEN_HEIGHT,
backgroundColor: '#999',
});
app.run();
});
},
}
});
成果物
以上。