马里奥躲避方块游戏 - 随机生成方块，碰到地面就死！ - 常规

<!DOCTYPE html><html><head><style>canvas{border:1px solid black;display:block;margin:0 auto;}</style></head><body><canvas id="gameCanvas" width="800" height="600"></canvas><script>const canvas=document.getElementById("gameCanvas");const context=canvas.getContext("2d");const mario={x:50,y:canvas.height-50,width:40,height:40,speed:5,jumpPower:10,isJumping:false,yVelocity:0,isDead:false};const floor={x:0,y:canvas.height-20,width:canvas.width,height:20};const blockWidth=40;const blockHeight=40;const blocks=[[200,canvas.height-100],[400,canvas.height-150],[600,canvas.height-100],[200,canvas.height-100],[400,canvas.height-150],[800,canvas.height-500],[200,canvas.height-400],[100,canvas.height-250],[700,canvas.height-100]];const keys={};document.addEventListener("keydown",(event)=>{keys[event.key]=true;});document.addEventListener("keyup",(event)=>{keys[event.key]=false;});function update(){if(mario.isDead){return;}if(keys["ArrowLeft"]&&mario.x>0){mario.x-=mario.speed;}if(keys["ArrowRight"]&&mario.x+mario.width<canvas.width){mario.x+=mario.speed;}if(keys["ArrowUp"]&&!mario.isJumping){mario.isJumping=true;mario.yVelocity=-mario.jumpPower;}if(mario.y<floor.y-mario.height||mario.isJumping){mario.yVelocity+=0.5;mario.y+=mario.yVelocity;}if(mario.y>=floor.y-mario.height){mario.isJumping=false;mario.y=floor.y-mario.height;mario.yVelocity=0;}blocks.forEach((block)=>{if(mario.y+mario.height>=block[1]&&mario.y<block[1]+blockHeight&&mario.x+mario.width>block[0]&&mario.x<block[0]+blockWidth){mario.isJumping=false;mario.yVelocity=0;const topCollision=mario.y+mario.height-block[1];const bottomCollision=block[1]+blockHeight-mario.y;const leftCollision=mario.x+mario.width-block[0];const rightCollision=block[0]+blockWidth-mario.x;if(topCollision<=bottomCollision&&topCollision<=leftCollision&&topCollision<=rightCollision){mario.y=block[1]-mario.height;}else if(bottomCollision<=topCollision&&bottomCollision<=leftCollision&&bottomCollision<=rightCollision){mario.y=block[1]+blockHeight;mario.yVelocity=0;mario.isJumping=true;}else if(leftCollision<=topCollision&&leftCollision<=bottomCollision&&leftCollision<=rightCollision){mario.x=block[0]-mario.width;}else if(rightCollision<=topCollision&&rightCollision<=bottomCollision&&rightCollision<=leftCollision){mario.x=block[0]+blockWidth;}}});if(mario.y>=floor.y-mario.height){mario.isDead=true;}if(Math.random()<0.01){const randomX=Math.floor(Math.random()*(canvas.width-blockWidth));blocks.push([randomX,0]);}}function draw(){context.clearRect(0,0,canvas.width,canvas.height);context.fillStyle="gray";context.fillRect(floor.x,floor.y,floor.width,floor.height);context.fillStyle="brown";blocks.forEach((block)=>{context.fillRect(block[0],block[1],blockWidth,blockHeight);});context.fillStyle="blue";context.fillRect(mario.x,mario.y,mario.width,mario.height);requestAnimationFrame(draw);}function gameLoop(){update();draw();requestAnimationFrame(gameLoop);}gameLoop();</script></body></html>