お家で自由研究を
なかなか、外出をして自由研究を…難しいご時世になってしまいました。
そこで、パソコン１台でプログラミング学習を、無論これから学習を始めてみたい大人の方も
お子様と一緒にプログラミングをしてみようと考える大人の方にもブロック崩し（breakout_game)
を通して楽しく始めていただけると幸いです。
プログラミング学習が始まる
来年度より、実際に高校の教科としてプログラミングが開始されます。
下記にサンプルコードをのせておきます。ゲームとしては、物足りない状態にあえてなっていますので
『ここを、こうしたいなぁ』、
『もっと、こうしたら面白くない？』
と考えていただけたら面白い
と思われます。
開発の環境設定についての記事も書いていますので、参考にしてみてください。
サンプルソース breakout.html
<!doctype html>
<html>
<body>
<script>
// Canvas設定部分
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 400;
canvas.setAttribute('style', 'display:block;margin:auto;background-color: #ddd');
document.body.appendChild(canvas);
const ball = {
x: null,
y: null,
width: 5,
height: 5,
speed: 4,
dx: null,
dy: null,
update: function() {
ctx.fillRect(this.x, this.y, this.width, this.height);
ctx.fill();
if(this.x < 0 || this.x > canvas.width) this.dx *= -1;
if(this.y < 0 || this.y > canvas.height) this.dy *= -1;
// ゲームを終了条件
// if(this.y > canvas.height)
this.x += this.dx;
this.y += this.dy;
}
}
const board = {
x: null,
y: null,
width: 100,
height: 15,
speed: 0,
update: function() {
ctx.fillRect(this.x, this.y, this.width, this.height);
ctx.fill();
this.x += this.speed;
}
}
const block = {
width: null,
height: 20,
data: [],
update: function() {
this.data.forEach(brick => {
ctx.strokeRect(brick.x, brick.y, brick.width, brick.height);
ctx.stroke();
})
}
}
const level = [
[0,0,0,0,0,0],
[0,0,0,0,0,0],
[1,1,1,1,1,1],
[1,1,1,1,1,1],
[1,1,1,1,1,1],
[1,1,1,1,1,1],
]
const init = () => {
board.x = canvas.width / 2 - board.width / 2;
board.y = canvas.height - board.height;
ball.x = canvas.width / 2;
ball.y = canvas.height / 2 + 50;
ball.dx = ball.speed;
ball.dy = ball.speed;
block.width = canvas.width / level[0].length;
for(let i=0; i<level.length; i++) {
for(let j=0; j<level[i].length; j++) {
if(level[i][j]) {
block.data.push({
x: block.width * j,
y: block.height * i,
width: block.width,
height: block.height
})
}
}
}
}
const collide = (obj1, obj2) => {
return obj1.x < obj2.x + obj2.width &&
obj2.x < obj1.x + obj1.width &&
obj1.y < obj2.y + obj2.height &&
obj2.y < obj1.y + obj1.height;
}
// 動き
const loop = () => {
ctx.clearRect(0,0,canvas.width,canvas.height);
board.update();
ball.update();
block.update();
if(collide(ball, board)) {
ball.dy *= -1;
ball.y = board.y - ball.height;
}
block.data.forEach((brick, index) => {
if(collide(ball, brick)) {
ball.dy *= -1;
block.data.splice(index, 1);
}
})
window.requestAnimationFrame(loop);
}
init();
loop();
document.addEventListener('keydown', e => {
if(e.key === 'ArrowLeft') board.speed = -6;
if(e.key === 'ArrowRight') board.speed = 6;
});
document.addEventListener('keyup', () => board.speed = 0);
</script>
</body>
</html>上記 サンプルソースをコピーし、メモ帳へ貼り付けダブルクリックすることで
あそぶことができます。もし、うまくいかないときは JavaScript_Step1
も参考にされてみてください。
コメント