<html lang="fr">
<head>
<meta charset="utf-8">
<title>Mon jeu fantastiqeu</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jeu.js"></script>
</head>
<body>
<canvas id="myCanvas" width=500 height=400></canvas>
</body>
var canvas, ctx, w, h;
var couleur = "red";
window.onload = init;
function init() {
console.log("page chargée");
canvas = document.querySelector("#myCanvas");
ctx = canvas.getContext("2d");
w = canvas.width;
h = canvas.height;
requestAnimationFrame(mainloop);
id = setInterval(changeCouleur, 1000); // on appelle la fonction à peu
// près toutes les secondes
}
var oldTime;
var delta;
var totalTime = 5000; // 5 secondes
function mainloop(time) {
if(oldTime === undefined)
oldTime = time;
// temps écoulé entre deux images
delta = time - oldTime;
//console.log("delta = " + delta);
//console.log(time);
ctx.clearRect(0, 0, w, h);
ctx.fillStyle = couleur;
ctx.fillRect(10, 10, 100, 100);
oldTime = time;
totalTime -= delta;
if(totalTime < 0) {
ctx.fillText("Niveau Suivant", 0, 0);
totalTime = 5000;
}
var temps = (totalTime/1000).toFixed(1);
ctx.fillText("Temps : " + temps, 10, 10)
requestAnimationFrame(mainloop);
}
function changeCouleur() {
if(couleur === "red") {
couleur = "green";
} else {
couleur = "red";
}
}
Output
300px
You can jump to the latest bin by adding /latest
to your URL
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |