p5.js play

//block game

var bar, block, blockGroup, ball, wallLeft, wallRight, wallTop;
var gameScreen = 0;
var wallBottom;
var num = 0;
var st;
var sound;
var img;
function preload(){
sound = loadSound('img/a.mp3');
img = loadImage('img/ball2.png');
}

function setup() {
var myCanvas = createCanvas(300, 300);
myCanvas.parent('myContainer');
gameInit();
}

function draw() {
if (gameScreen == 0) {
initScreen();
} else if (gameScreen == 1) {
gamePlayScreen();
} else if (gameScreen == 2) {
gameOverScreen();
} else if (gameScreen == 3) {
gameClearScreen();
}
drawSprites();
}

function initScreen() {
background(190);
textAlign(CENTER);
text("Click to start", width/2, height/1.4);
}
function gamePlayScreen() {
background(200);
gam();
}
function gameOverScreen() {

background(200, 220, 190);
textAlign(CENTER);
// fill(236, 240, 241);
fill(0);
textSize(33);
text("Game Over", width/2-4, height/2-40);
textSize(15);
text("Click to restart", width/2, height-30);
}
function gameClearScreen() {
background(200, 200, 190);
textAlign(CENTER);
// fill(236, 240, 241);
fill(0);
textSize(33);
text("Game clear", width/2-4, height/2-40);
textSize(15);
text("Click to start", width/2, height-30);
// gameOver();
}

function gameInit() {
var blockWidth = 40, //ブロックの幅
blockHeight = 16, //ブロックの高さ
blockMargin = 4, //ブロックの間隔
offset = 40; //ブロックのオフセット値
wallLeft = createSprite(-5, height/2, 10, height);
wallLeft.immovable = true;
wallRight=createSprite(width+5, height/2, 10, height);
wallRight.immovable = true;
wallTop = createSprite(width/2, -5, width, 10);
wallTop.immovable = true;
wallBottom=createSprite(width/2, height, width, 10);
wallBottom.immovable = true;

bar = createSprite(width/2, height-20, 80, 17);
bar.shapeColor = "#ffcc00";
bar.immovable = true;
ball = createSprite(width/2, height/2);
ball.addImage(img);
ball.scale = 0.5;
// ball.setSpeed(3, random(80, 100));
blockGroup = new Group;
for(var r=0;r<4;r++) { //縦のブロック数
for(var c=0;c<6;c++) { //横のブロック数
block = createSprite(offset+c*(blockWidth+blockMargin), offset+r*(blockHeight+blockMargin), blockWidth, blockHeight);
block.immovable = true;
blockGroup.add(block);
}
}
}

function touchMoved() {
bar.position.x = touchX;
//ブラウザ機能を無効化
return false;
}

function gam(){
if(ball.bounce(bar)) {
var swing=(ball.position.x-bar.position.x)/15;
ball.setSpeed(8, ball.getDirection()+swing);
}
ball.bounce(blockGroup,function(ball, block) {
block.remove();
sound.play();
num += 1;
});
ball.bounce(wallLeft);
ball.bounce(wallRight);
ball.bounce(wallTop);
ball.overlap(wallBottom,function(ball,wallBottom){
gameOver();
});

st = "score "+num;
fill(0);
noStroke();
te=textAlign(CENTER);
te.textSize(12);
te.text(st, width/2, 17);
if(num==24){
gameClear();
gameScreen=3;
}
}

function gclear(){
gameScreen = 0;
gameInit();
}

function startGame() {
ball.setSpeed(4, random(80, 100));
gameScreen=1;
}

function gameClear() {
gameScreen=3;
// block.remove();
bar.visible = false;
ball.visible = false;
for (i = 0; i< blockGroup.length; i++){
test = blockGroup[i];
test.visible = false;
}
num = 0;
}

function gameOver() {
gameScreen=2;
// block.remove();
bar.visible = false;
ball.visible = false;
for (i = 0; i< blockGroup.length; i++){
test = blockGroup[i];
test.visible = false;
}
num = 0;
}

function restart() {
gameScreen = 0;
gameInit();
}

function mousePressed() {
if (gameScreen==0) {
startGame();
}
if (gameScreen==2) {
restart();
}
if (gameScreen==3) {
gclear();
}
}

preview

//arc is used in p5-play
//sp.mirrorX(1);

var sp;
var h = 50;
var w = 50;
var r1 = 0;
var d = 0;
function setup() {
createCanvas(300,300);
sp = createSprite(25, 150, 50, 50);
sp.draw = function(){
fill(255,255,0);
arc(0,0+d,w,h,QUARTER_PI-r1,PI+HALF_PI+QUARTER_PI+r1);
if(QUARTER_PI-r1<=0){
r1=0;
}
fill(0);
noStroke();
ellipse(9, -13, 7, 7);
r1=r1+0.03;
}
sp.velocity.x = 2;
}
function draw() {
background(180,180,180);
// 左の壁にぶつかったら
if(sp.position.x <= w/2){ 
sp.velocity.x = 2;
sp.mirrorX(1);
// sp.rotation = -180; 
}
// 右の壁にぶつかったら
if(sp.position.x >= width-w/2){
sp.velocity.x = -2;
sp.mirrorX(-1);
}
drawSprites();
}
preview

////////////////////////////
//sprotation = 90;

var sp;
var h = 50;
var w = 50;
var r1=0;
var d=0;
function setup() {
createCanvas(300,300);
sp = createSprite(25, 275, 50, 50);
sp.draw = function(){
fill(255,255,0);
arc(0,0+d,w,h,QUARTER_PI-r1, PI+HALF_PI+QUARTER_PI+r1);
if(QUARTER_PI-r1<=0){ 
r1=0;
} 
fill(0); noStroke(); 
ellipse(9, -15, 7, 7); 
r1=r1+0.03;
 } 
sp.velocity.x = 2; 
} 
function draw() {
 background(180,180,180);
if(sp.position.x >= width-w/2){
sp.velocity.x = 0;
sp.velocity.y = -2;
sp.rotation = 270;
}
if(sp.position.y <= h/2){
sp.velocity.y = 0;
sp.velocity.x = -2;
sp.rotation = 180;
}
if(sp.position.x <= w/2){ 
sp.velocity.x = 0; 
sp.velocity.y = 2; 
sp.rotation = 90; 
} 
if(sp.position.y>= height-h/2&&sp.position.x <= w/2){
sp.velocity.y = 0;
sp.velocity.x = 2;
sp.rotation = 0;
}
drawSprites();
}
preview

/////////////////////////
arc

//arc(x, y, width, height, start, stop, PIE or OPEN or CHORD)
//arc( X座標, Y座標, 幅, 高さ, 開始角, 終了角, option )
//arc(50, 50, 80, 80, 0, PI+QUARTER_PI, PIE);


//ラジアンをそのままの数値で指定
//arc(125, 175, 100, 100, 0.79, 5.50);
//ラジアンを定数で指定
//arc(375, 175, 100, 100, QUARTER_PI, TWO_PI-QUARTER_PI);
//ラジアンを関数で指定
//arc(625, 175, 100, 100, radians(45), radians(315));