Entradas

How to Make The Pong Game

Imagen
Code of Pong.pde : PVector player, enemy, ball; float ballSpeedX, ballSpeedY, enemySpeed; int playerScore = 0; int enemyScore = 0; float ballSize; void setup() {     size(480, 320, OPENGL);             ball = new PVector(width/2, height/2);     player = new PVector(width, height/2);     enemy = new PVector(0, height/2);         ballSpeedX = width/100;     ballSpeedY = width/100;             enemySpeed = width/150;         ballSize = width/20;         rectMode(CENTER);       } void draw() {     background(26);         centerLine();     drawBall();     drawPlayer();     drawEnemy();  ...
Publicar un comentario
Leer más

How to animate a text in HTML

Imagen
Code of index.html : <!DOCTYPE html> <html lang="es"> <head>     <title>Index</title>     <meta charset="utf-8">     <link rel="stylesheet" href="style.css"> </head> <body>     <div class="container">         <span class="text1">welcome In</span>         <span class="text2">Code Creator</span>     </div> </body> </html> Code of style.css : *{     padding: 0;     margin: 0;     font-family: sans-serif; } body{     background-color: white; } .container{     text-align: center;     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%,-50%);    ...
Publicar un comentario
Leer más

The Snake Game

Imagen
Code of snake.pde : class Snake {   ArrayList<PVector> body;   float xdir, ydir, len;   Snake() {     this.body = new ArrayList<PVector>();     this.body.add(new PVector(floor(w / 2), floor(h / 2)));     this.xdir = 0;     this.ydir = 0;     this.len = 0;   }   void setDir(float x, float y) {     this.xdir = x;     this.ydir = y;   }   void update() {     PVector head = this.body.get(this.body.size() -1).copy();     this.body.remove(0);     head.x += this.xdir;     head.y +=this.ydir;     this.body.add(head);   }   void grow() {     PVector head = this.body.get(this.body.size() -1).copy();     this.len++;     this.body.add(head);   }   boolean endGame() {     float x = this.body....
Publicar un comentario
Leer más

How to Count Characters in Textarea using JavaScript

Imagen
Code of index.html : <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Text Counter</title> <!--Link compiled and minified CSS--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <style> .container { width: 500px; margin-top: 100px; font-size: 18px; } </style> </head> <body> <div class="container"> <form> <div class="form-group"> <label>Count Up</label> <textarea class="form-control" rows="5" onkeyup="count_up(this);" maxlength="70"></textarea> <span class="text-muted pull-right" id="count1">0</span> ...
Publicar un comentario
Leer más

How to make a Snowflake in Processing

Imagen
Code of particle.pde : class Particle {   PVector pos;   float r;   Particle(float radius, float angle) {     pos = PVector.fromAngle(angle);     pos.mult(radius);     r = 3;   }   void update() {     pos.x -= 1;     pos.y += random(-3, 3);     float angle = pos.heading();     angle = constrain(angle, 0, PI/6);     float magnitude = pos.mag();     pos = PVector.fromAngle(angle);     pos.setMag(magnitude);   }   void show() {     fill(255);     stroke(255);     ellipse(pos.x, pos.y, r * 2, r *2);   }   boolean intersects(ArrayList<Particle> snowflake) {     boolean result = false;     for (Particle s : snowflake) {       float d = dist(s.pos.x, s.pos.y, pos.x, pos.y);    ...
Publicar un comentario
Leer más

Chat with Firebase

Imagen
Code of index.html : <!DOCTYPE HTML> <html>    <head> <!-- Scripts jQuery, bootstrap --> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>               <!-- Estilos  bootstrap, chat--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="css.css" >       <!-- área de código Firebase y lectura de Mensajes-->        <script src="https://www.gstatic.com/firebasejs/5.6.0/firebase.js"></script>   <script>      // Init...
Publicar un comentario
Leer más

How to Create RGB to HEX Converter with JavaScript

Imagen
Code of index.html : <!DOCTYPE html> <html lang="es"> <head>     <meta charset="utf-8">     <title>RGB to HEX Converter</title>     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">     <style>         #container{             font-family: 'Inconsolata', monospace;             text-align: center;             width: 800px;             margin: 160px auto;         }         table{             width: 100%;         }         h1{      ...
Publicar un comentario
Leer más