JavaScriptでブロック崩しゲーム作成｜HTML5＆Canvasで簡単実装
JavaScriptでブラウザ上で遊べるブロック崩しゲームを作成しました！
マウスやタッチ操作でバーを移動し、クリックまたはタップでゲームを開始できます。
コピペOKのソースコード付きなので、すぐに実装可能！
ぜひ、ブロック崩しの爽快感をブラウザで体験してみてください！
ソースコード
ソースコードは以下です。
<div id="blockmain"></div>
<script>
class TBlock{
init(){
this.racket={x:this.wh/2-30, y:this.wh-60, w:60, h:20};
//ボールは中心
this.ball={
x:this.racket.x + this.racket.w/2,
y:this.racket.y-6,
r:6,
rx:+(Math.random()*0.1-0.05), ry:-4,
speed:4,
stopping:true,
};
}
stageinit(){
for(let i=0;i<this.stages[this.stageno].length;i++){
this.stage[i]=[];
this.stage[i].x = this.stages[this.stageno][i].x;
this.stage[i].y = this.stages[this.stageno][i].y;
this.stage[i].w = this.stages[this.stageno][i].w;
this.stage[i].h = this.stages[this.stageno][i].h;
this.stage[i].hp= this.stages[this.stageno][i].hp;
}
this.stagehp=this.stageshp[this.stageno];
}
constructor(elm){
this.wh=600;
this.div=elm;
this.div.style.cssText="margin:0 auto;padding:0;max-width:100%;width:600px;height:600px;box-sizing:border-box;border:1px solid #000;";
this.can=document.createElement("canvas");
this.can.style.cssText="margin:0;padding:0;width:100%;height:100%;";
this.can.setAttribute("width" , this.wh+"px");
this.can.setAttribute("height", this.wh+"px");
this.ctx=this.can.getContext("2d",{willReadFrequently:true});
this.div.appendChild(this.can);
this.blockcolor=["none","blue", "green", "red", "orange", "yellow"];
this.init();
/*
横 5 50 10 ・・・ 50 10 50 5
縦 20 20 20 20 20 20 20 20
*/
this.stageno=0;
this.stageshp=[];
this.stage=[];
this.stages=[];
let ct;
ct=0;
this.stageshp[0]=0;
this.stages[0]=[];
for(let y=0;y<8;y++){
for(let x=0;x<8;x++){
this.stages[0][ct]=[];
this.stages[0][ct].x = 0+x*75;
this.stages[0][ct].y = 40+y*40;
this.stages[0][ct].w = 70;
this.stages[0][ct].h = 40;
this.stages[0][ct].hp = 1+Math.floor(Math.random()*3);
this.stageshp[0]+=this.stages[0][ct].hp;
ct++;
}
}
ct=0;
this.stageshp[1]=0;
this.stages[1]=[];
for(let y=0;y<9;y++){
for(let x=0;x<8;x++){
this.stages[1][ct]=[];
this.stages[1][ct].x = 0+x*75;
this.stages[1][ct].y = 40+y*40;
this.stages[1][ct].w = 70;
this.stages[1][ct].h = 40;
this.stages[1][ct].hp = 2+Math.floor(Math.random()*2);
this.stageshp[1]+=this.stages[1][ct].hp;
ct++;
}
}
ct=0;
this.stageshp[2]=0;
this.stages[2]=[];
for(let y=0;y<10;y++){
for(let x=0;x<8;x++){
this.stages[2][ct]=[];
this.stages[2][ct].x = 0+x*75;
this.stages[2][ct].y = 40+y*40;
this.stages[2][ct].w = 70;
this.stages[2][ct].h = 40;
this.stages[2][ct].hp = 2+Math.floor(Math.random()*2);
this.stageshp[2]+=this.stages[2][ct].hp;
ct++;
}
}
ct=0;
this.stageshp[3]=0;
this.stages[3]=[];
for(let y=0;y<10;y++){
for(let x=0;x<8;x++){
this.stages[3][ct]=[];
this.stages[3][ct].x = 0+x*75;
this.stages[3][ct].y = 40+y*40;
this.stages[3][ct].w = 70;
this.stages[3][ct].h = 40;
this.stages[3][ct].hp = 3+Math.floor(Math.random()*3);
this.stageshp[3]+=this.stages[3][ct].hp;
ct++;
}
}
ct=0;
this.stageshp[4]=0;
this.stages[4]=[];
for(let y=0;y<11;y++){
for(let x=0;x<8;x++){
this.stages[4][ct]=[];
this.stages[4][ct].x = 0+x*75;
this.stages[4][ct].y = 40+y*40;
this.stages[4][ct].w = 70;
this.stages[4][ct].h = 40;
this.stages[4][ct].hp = 4+Math.floor(Math.random()*2);
this.stageshp[4]+=this.stages[4][ct].hp;
ct++;
}
}
this.stageinit();
document.documentElement.addEventListener("mousemove",function(){
let newx=(event.clientX-this.can.getBoundingClientRect().left)*this.wh/this.styleWidth;
if(newx<0){newx=0;}
if(newx>(this.wh-this.racket.w)){newx=this.wh-this.racket.w;}
if(this.ball.stopping){
let subx=newx-this.racket.x;
this.ball.x+=subx;
}
this.racket.x=newx;
//console.log(newx);
}.bind(this));
document.documentElement.addEventListener("mousedown",function(){
this.ball.stopping=false;
}.bind(this));
document.documentElement.addEventListener("touchmove",function(){
let newx=(event.touches[0].pageX-this.can.getBoundingClientRect().left)*this.wh/this.styleWidth;
if(newx<0){newx=0;}
if(newx>(this.wh-this.racket.w)){newx=this.wh-this.racket.w;}
if(this.ball.stopping){
let subx=newx-this.racket.x;
this.ball.x+=subx;
}
this.racket.x=newx;
//console.log(newx);
}.bind(this));
//ウィンドウ リサイズ時
window.addEventListener('resize',function(){
this.resize();
}.bind(this));
this.resize();
setInterval(this.interval.bind(this),16);
}
interval(){
if(!this.ball.stopping){
let nx=this.ball.x+this.ball.rx;
let ny=this.ball.y+this.ball.ry;
if(nx<this.ball.r||nx>(this.wh-this.ball.r)){
this.ball.rx=-this.ball.rx;
}else if(ny<this.ball.r){
this.ball.ry=-this.ball.ry;
}else if(ny>this.wh){
this.init();
}else if(
(nx>=this.racket.x)&&(nx<=(this.racket.x+this.racket.w))&&
(ny>=this.racket.y)&&(ny<=(this.racket.y+this.racket.h))&&
(this.ball.ry>0)
){
let subx=(nx-this.racket.x-this.racket.w/2+this.ball.rx)/this.racket.w *2/3 +(Math.random()*0.06-0.03);
this.ball.rx=-Math.cos((subx+0.5)*Math.PI)*this.ball.speed;
this.ball.ry=-Math.sin((subx+0.5)*Math.PI)*this.ball.speed;
}else{
let collision=false;
for(let i=0;i<this.stage.length;i++){
if( (this.stage[i].hp>0)&&
(this.stage[i].x<=nx)&&
((this.stage[i].x+this.stage[i].w)>=nx)&&
(this.stage[i].y<=ny)&&
((this.stage[i].y+this.stage[i].h)>=ny)
){
collision=true;
this.stage[i].hp--;
this.ball.speed+=0.01;
if(Math.abs(this.ball.rx)<0.001){
this.ball.ry=-this.ball.ry;
}else if( (this.stage[i].x>=this.ball.x)&&((this.stage[i].x+this.stage[i].w)<=this.ball.x) ){
this.ball.ry=-this.ball.ry;
}else{
let y=0;
//y=(y2-y1)(x-x1)/(x2-x1)+y1
if(this.ball.rx>0){
y=(ny-this.ball.y)*(this.stage[i].x-this.ball.x)/(nx-this.ball.x)+this.ball.y;
}else{
y=(ny-this.ball.y)*((this.stage[i].x+this.stage[i].w)-this.ball.x)/(nx-this.ball.x)+this.ball.y;
}
if( (y<=this.stage[i].y) || (y>=(this.stage[i].y+this.stage[i].h)) ){
this.ball.ry=-this.ball.ry;
}else{
this.ball.rx=-this.ball.rx;
}
}
break;
}
}
if(collision){
this.stagehp--;
if(this.stagehp==0){
this.stageno++;
if(this.stageno==this.stages.length){this.stageno=0;}
this.init();
this.stageinit();
}
}else{
this.ball.x+=this.ball.rx;
this.ball.y+=this.ball.ry;
}
}
}
this.draw();
}
draw(){
//キャンバスのクリア
this.ctx.clearRect(0,0,this.wh,this.wh);
this.ctx.fillStyle="rgb(220,220,220)";
this.ctx.fillRect(0,0,this.wh,this.wh);
for(let i=0;i<this.stage.length;i++){
if(this.stage[i].hp>0){
this.ctx.fillStyle=this.blockcolor[this.stage[i].hp];
this.ctx.fillRect(
this.stage[i].x,
this.stage[i].y,
this.stage[i].w,
this.stage[i].h
);
this.ctx.lineWidth=2;
this.ctx.strokeStyle="black";
this.ctx.strokeRect(
this.stage[i].x,
this.stage[i].y,
this.stage[i].w,
this.stage[i].h
);
}
}
this.ctx.fillStyle="black";
this.ctx.fillRect(this.racket.x,this.racket.y,this.racket.w,this.racket.h);
this.ctx.fillStyle="black";
this.ctx.beginPath();
this.ctx.arc(this.ball.x, this.ball.y, this.ball.r, 0,Math.PI*2);
this.ctx.fill();
}
resize(){
let style=window.getComputedStyle(this.div);
this.div.style.height=style.width;
this.styleWidth=parseFloat(style.width);
}
}
window.addEventListener("load",function(){
block=new TBlock(document.querySelector("#blockmain"));
});
</script>