No description provided
The showcase player uses a modified version of Processing.js in combination with jsweet to let students program their apps in Java code while still allowing for browser support.
Content created by students is scaled to fit the showcase frame while maintaining aspect ratio and cursor position. This is why some projects may appear blurry in fullscreen, or why some small details may not be visible on a small screen
<iframe width='500px' height='400px' src='https://nest.ktbyte.com/nest#469001' allowfullscreen></iframe>
// Welcome back to Fun3b! // Today's class is on Breakout // Announcements // Try the contests! https://www.ktbyte.com/contest/ // webcams on please // TODO: /* - add score, lives, game over screen, win screen - fix bugs: ball hits side of paddle - add spin to ball */ int ROWS = 4; int COLS = 8; int NUM_BRICKS = ROWS*COLS; Sprite[] bricks = new Sprite[NUM_BRICKS]; // bricks top and bottom position int BRICKS_TOP = 100; int BRICKS_BOTTOM = 270; // width and height of bricks float BWIDTH; float BHEIGHT; // paddle variables Sprite paddle = new Sprite(350, 400, 100, 20); boolean left, right; // ball variables float speed = 4; Sprite ball = new Sprite("https://i.ya-webdesign.com/images/green-circle-png-6.png", 400, 300, 30, 30); int score = 0; int lives = 3; void setup() { size(800,450); BWIDTH = width/COLS; BHEIGHT = (BRICKS_BOTTOM - BRICKS_TOP) / ROWS; setupBricks(); ball.setRoundHitbox(15); ball.turnToDir(random(-60, -120)); paddle.setColor(0, 255, 0); textSize(30); textAlign(CENTER, CENTER); background(0); } void draw() { // background(0); fill(0, 30); rect(0, 0, width, height); if(frameCount < 180) { int seconds = 3 - frameCount/60; fill(255); text("Game starts in: " + seconds, 300, 300); } else { drawBricks(); drawPaddle(); drawBall(); // add a score text("Score: " + score, 130, 500); text("Lives: " + lives, 500, 500); if(lives <= 0) { background(255, 0, 0); fill(0); text("You lose :(", 300, 300); } } } // 2: display the paddle and move it back and forth with the motion variables void drawPaddle() { paddle.display(); if(left && paddle.getX() > 50) { paddle.moveX(-5); } if(right && paddle.getX() < 750) { paddle.moveX(5); } // optional: how could we make the paddle follow the mouse instead? // paddle.setX( mouseX ); } // display the ball and move it around the canvas void drawBall() { ball.display(); ball.forward(speed); // edge detection if(ball.getX() > width || ball.getX() < 0) { ball.flipX(); } if(ball.getY() < 0) { ball.flipY(); } // 3: make the ball bounce off the paddle if(ball.touchingSprite(paddle) ) { ball.flipY(); } if(ball.getY() > height) { ball.moveToPoint(400, 300); ball.turnToDir(random(45, 135)); lives--; } } // 1: draw the bricks // make them disappear and bounce the ball when touching void drawBricks() { for(Sprite b : bricks) { b.display(); if(ball.touchingSprite( b )) { score++; ball.flipY(); b.moveToPoint(-200, -200); } } } // create new Sprites to fill the bricks array void setupBricks() { float x = BWIDTH/2; float y = 10; for(int i=0; i<NUM_BRICKS; i++) { bricks[i] = new Sprite(x, y, BWIDTH-4, BHEIGHT-4); bricks[i].setColor(x/3, y/2, 0); x += BWIDTH; if(x >= width) { x = BWIDTH/2; y += BHEIGHT; } } } // motion code void keyPressed() { if(keyCode == LEFT) { left = true; } if(keyCode == RIGHT) { right = true; } } void keyReleased() { if(keyCode == LEFT) { left = false; } if(keyCode == RIGHT) { right = false; } } /* Intros: name, grade, favorite subject/ passtime, why you're here Marc - your instructor, being outside playing music, likes teaching Darren - 5th grade, video games, liked Fun3a and coding games Yash - 5th grade, social studies, basketball, liked Fun3a Samuel - 6th grade, football, math, here because parents Jeremy - 6th grade, likes ELA, gaming, reading Ella - 7th grade, likes social studies and reading, interested in CS Leo - likes video games and reading, here because parents Alex - here to learn CS and because parents */