Commit f2892642 authored by Meyer Olivier's avatar Meyer Olivier

Begun tests on raw JS (so as to make turtle2js.ml)

parent c35174a0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bouncing balls</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>bouncing balls</h1>
<canvas></canvas>
<script src="mainTurtle.js"></script>
</body>
</html>
\ No newline at end of file
// setup canvas
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;
// function to generate random number
function random(min,max) {
const num = Math.floor(Math.random()*(max-min)) + min;
return num;
}
let STARTING_POSITION_X = random(0, 1 * width); // random(%f,%f) avec les 2 premiers floats du INIT
let STARTING_POSITION_Y = random(0, 1 * height); // random(%f,%f) avec les 2 derniers floats du INIT
let alpha = 0.0; // TODO rendre ceci paramétrable avec un %f
let MIN_SIZE = 10; // TODO rendre ceci paramétrable avec un %f
let MAX_SIZE = 20; // TODO rendre ceci paramétrable avec un %f
let MIN_SPEED = -7; // TODO rendre ceci paramétrable avec un %f
let MAX_SPEED = 7; // TODO rendre ceci paramétrable avec un %f
// Ball constuctor
function Ball(x, y, velX, velY, color, size) {
this.x = x;
this.y = y;
this.velX = velX;
this.velY = velY;
this.color = color;
this.size = size;
}
// Ball methods
Ball.prototype.draw = function () {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.arc(this.x, this.y, this.size, 0, 2*Math.PI);
ctx.fill();
}
Ball.prototype.update = function () {
if((this.x + this.size) >= width){
this.velX = -(this.velX);
}
if((this.y + this.size) >= height){
this.velY = -(this.velY);
}
if((this.x - this.size) <= 0){
this.velX = -(this.velX);
}
if((this.y - this.size) <= 0){
this.velY = -(this.velY);
}
this.x += this.velX;
this.y += this.velY;
}
// Ball creation
let ball = new Ball(
// ball position always drawn at least one ball width away from the edge of the canvas
// to avoid drawing errors
// random(0 + size, width - size),
// random(0 + size, height - size),
STARTING_POSITION_X,
STARTING_POSITION_Y,
random(MIN_SPEED,MAX_SPEED),
random(MIN_SPEED,MAX_SPEED),
'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) + ')',
random(MIN_SIZE,MAX_SIZE)
);
// Animation
function loop() {
ctx.fillStyle = 'rgba(0,0,0,'+alpha+')';
ctx.fillRect(0,0,width, height);
ball.draw();
ball.update();
requestAnimationFrame(loop);
}
loop();
html, body {
margin: 0;
}
html {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
height: 100%;
}
body {
overflow: hidden;
height: inherit;
}
h1 {
font-size: 2rem;
letter-spacing: -1px;
position: absolute;
margin: 0;
top: -4px;
right: 5px;
color: transparent;
text-shadow: 0 0 4px white;
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment