A voir également:
- Bug jeux javascript alert document.location.reload
- Bug yahoo mail - Accueil - Mail
- Jeux java itel football - Télécharger - Jeux vidéo
- Zuma jeux - Télécharger - Jeux vidéo
- Telecharger javascript - Télécharger - Langages
- Télécharger jeux ps3 gratuit usb ✓ - Forum PS3
2 réponses
SioGabx
Messages postés
265
Date d'inscription
mardi 21 août 2018
Statut
Membre
Dernière intervention
17 novembre 2022
100
31 août 2019 à 20:05
31 août 2019 à 20:05
Alors déjà colle ton code dans des balise code du forum (<code html>) et sa fermeture avec le /.
Et surtout met le code COMPLET de ta page (html; css;js)...
Et surtout met le code COMPLET de ta page (html; css;js)...
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>case bricks</title> <style> *{ padding: 0; margin: 0; } canvas{ background-color: #EEEEEE; display: block; margin: 0 auto; } input{ display: inline-block; padding: 20px; } </style> </head> <body> <canvas id="canvas" width="910px" height="640px"></canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var y = canvas.width/2; var x = canvas.height-30; var dx = 4; var dy = -4; var ballradius = 10; var paddleheight = 10; var paddlewidth = 75; var paddleX = (canvas.width-paddlewidth)/2; var rightpressed = false; var leftpressed = false; var brickRowCount = 6; var brickColumnCount = 10; var brickWidth = 75; var brickHeight = 20; var brickPadding = 10; var brickOffsetTop = 30; var brickOffsetLeft = 30; var score = 0; var bricks =[]; for(var c=0 ; c<brickColumnCount; c++){ bricks[c] = []; for(var r=0; r<brickRowCount; r++){ bricks[c][r] = { x : 0, y : 0, status : 1}; } } document.addEventListener("keydown",keyDownHandler,false); document.addEventListener("keyup",keyUpHandler, false); document.addEventListener("mousemove",mouseMoveHandler,false); function mouseMoveHandler(e){ var relativeX = e.clientX - canvas.offsetLeft; if(relativeX > 0 && relativeX < canvas.width){ paddleX = relativeX-paddlewidth/2; } } function keyDownHandler(e){ if(e.keyCode == 39){ rightpressed = true; } else if (e.keyCode == 37){ leftpressed = true; } } function keyUpHandler(e) { if(e.keyCode == 39) { rightpressed = false; } else if(e.keyCode == 37) { leftpressed = false; } } function collisionDetection() { for(var c=0; c<brickColumnCount; c++) { for(var r=0; r<brickRowCount; r++) { var b = bricks[c][r]; if(b.status == 1){ if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight){ dy = -dy; b.status = 0 score++; if(score == brickColumnCount*brickRowCount){ alert("vous avez gagné"); document.location.reload(); } } } } } } function drawscore(){ ctx.font = "16px Arial"; ctx.fillStyle = "#0095DD"; ctx.fillText("score : " + score, 8, 20) } function drawball(){ ctx.beginPath(); ctx.arc(x, y, ballradius, 0, Math.PI*2); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); } function drawpaddle(){ ctx.beginPath(); ctx.rect(paddleX, canvas.height-paddleheight, paddlewidth, paddleheight); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); } function drawbricks(){ for(var c=0; c<brickColumnCount; c++){ for(var r=0; r<brickRowCount; r++){ if(bricks[c][r].status == 1){ var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft; var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop; bricks[c][r].x = brickX; bricks[c][r].y = brickY; ctx.beginPath(); ctx.rect(brickX, brickY, brickWidth, brickHeight); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); } } } } function draw(){ ctx.clearRect(0,0 ,canvas.width ,canvas.height) drawbricks(); drawball(); drawpaddle(); drawscore(); collisionDetection(); if( x + dx > canvas.width-ballradius || x + dx < ballradius){ dx = -dx; } if( y + dy < ballradius){ dy = -dy; } else if ( y + dy > canvas.height-ballradius){ if(x > paddleX && x < paddleX + paddlewidth){ dy = -dy; } else{ alert("game over"); document.location.reload(); } } if(rightpressed && paddleX < canvas.width-paddlewidth) { paddleX += 7; } else if(leftpressed && paddleX > 0) { paddleX -= 7; } x += dx; y += dy; requestAnimationFrame(draw); } draw(); </script> </body> </html>