A voir également:
- Bug jeux javascript alert document.location.reload
- Bug yahoo mail - Guide
- Zuma jeux - Télécharger - Jeux vidéo
- Telecharger javascript - Télécharger - Langages
- Facebook rencontre bug 2023 - Forum Facebook
- Jeux java itel football - Télécharger - Jeux vidéo
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>
