あもんノート TOP
ブロック崩し
[←][→] TO MOVE, [↑] TO START.
screen =
{
init : function(){
.width = 500
.height = 500
.bgColor = "midnightblue"
.e = document.getElementById( "graphics" ).getContext( "2d" )
.e.font = "bold 16px sans-serif"
},
clear : function(){
.e.fillStyle = .bgColor
.e.fillRect( 0, 0, .width, .height )
},
text : function( s, x, y ){
.e.fillStyle = "white"
.e.fillText( s, x, y )
},
}
key =
{
init: function(){
.in = {}
document.onkeydown = function( e ){
key.in[ e.key ] = true
}
document.onkeyup = function( e ){
key.in[ e.key ] = false
}
},
}
wall =
{
init : function(){
var w = screen.width, h = screen.height
.no = [
{ x: -w, y: 0, width: w, height: h },
{ x: w, y: 0, width: w, height: h },
{ x: 0, y: -h, width: w, height: h }
]
},
}
blocks =
{
init : function(){
.no = []
var k = 0
for( var y = 0; y < 4; y++ ){
for( var x = 0; x < 10; x++ ){
.no[k] = {
width: 43,
height: 18,
x: 25 + 45 * x,
y: 50 + 20 * y,
alive: true
}
k++
}
}
.num = k
},
draw : function(){
for( var k of .no ){
if( k.alive ){
screen.e.fillStyle = "orange"
screen.e.fillRect( k.x, k.y, k.width, k.height )
}
}
},
}
player =
{
init : function(){
.width = 60
.height = 15
.x = 220
.y = 430
.speed = 5
},
draw : function(){
screen.e.fillStyle = "deepskyblue"
screen.e.fillRect( .x, .y, .width, .height )
},
move : function(){
if( key.in.ArrowLeft && .x > 0 ) .x -= .speed
if( key.in.ArrowRight && .x + .width < screen.width ) .x += .speed
},
xc : function(){
return .x + .width / 2
},
}
ball =
{
init : function(){
.size = 6
.x = .y = .vx = .vy = 0
},
draw : function(){
var s = screen
s.e.fillStyle = "white"
s.e.beginPath()
s.e.arc( .x, .y, .size, 0, 2 * Math.PI )
s.e.fill()
},
move : function(){
.x += .vx
.y += .vy
},
hit : function( obj ){
var x1 = obj.x, x2 = obj.x + obj.width
var y1 = obj.y, y2 = obj.y + obj.height
if(
x1 - .size < .x && .x < x2 + .size &&
y1 - .size < .y && .y < y2 + .size
) return true
return false
},
reflect : function( obj ){
.x -= .vx; .y -= .vy
var x1 = obj.x, x2 = obj.x + obj.width
var y1 = obj.y, y2 = obj.y + obj.height
if( !( y1 - .size < .y && .y < y2 + .size ) ){
.vy *= -1
return "y"
}
if( !( x1 - .size < .x && .x < x2 + .size ) ){
.vx *= -1
return "x"
}
.x += .vx
.y += .vy
return "none"
},
}
game =
{
run : function(){
screen.init(); key.init(); wall.init()
blocks.init(); player.init(); ball.init()
.mode = "over"
setInterval( "game.frame()", 15 )
},
serve : function(){
ball.x = player.xc()
ball.y = player.y - ball.size
var v = 6.7
var th = 0.2 + Math.random() * 0.15
ball.vx = v * Math.sin( th )
ball.vy = -v * Math.cos( th )
},
ballAngleChange : function(){
var th = 0
th += ( ball.x - player.xc() ) / 120
if( key.in.ArrowLeft ) th += -0.2
if( key.in.ArrowRight ) th += 0.2
var vxd = Math.cos( th ) * ball.vx - Math.sin( th ) * ball.vy
var vyd = Math.sin( th ) * ball.vx + Math.cos( th ) * ball.vy
if( -6 < vxd && vxd < 6 ){
ball.vx = vxd
ball.vy = vyd
}
},
frame : function(){
screen.clear(); blocks.draw(); player.draw()
player.move()
if( .mode == "play" ){
ball.draw(); ball.move()
var obj
for( obj of wall.no ){
if( ball.hit( obj ) ) ball.reflect( obj )
}
for( obj of blocks.no ){
if( obj.alive && ball.hit( obj ) ){
ball.reflect( obj )
obj.alive = false
blocks.num -= 1
}
}
if( ball.hit( player ) ){
if( ball.reflect( player ) == "y" ) .ballAngleChange()
}
if( ball.y > screen.height + ball.size * 2 ) .mode = "over"
if( blocks.num == 0 ) .mode = "clear"
} else{
var h = screen.height
if( .mode == "over" ) screen.text( "GAME OVER", 20, h - 20 )
if( .mode == "clear" ) screen.text( "GREAT!", 20, h - 20 )
if( key.in.ArrowUp ){
.serve()
.mode = "play"
blocks.init()
}
}
},
}
game.run()
