91跑酷

by CosmicBear11

99 lines2.0 KB🛠️ p5.js (creative coding)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{margin:0;display:flex;justify-content:center;background:#111}
canvas{border:2px solid white}
</style>
</head>
<body>
<script>
let carX, carY;
const carW = 60;
const carH = 100;
let obstacles = [];
let speed = 6;
let score = 0;

function setup(){
  createCanvas(300,600);
  carX = width/2 - carW/2;
  carY = height - 130;
}

function draw(){
  background(25);
  drawRoadLine();

  //左右移动控制
  if(keyIsDown(LEFT_ARROW) && carX>8) carX -=7;
  if(keyIsDown(RIGHT_ARROW) && carX < width - carW -8) carX +=7;

  //每隔40帧生成障碍
  if(frameCount % 40 === 0){
    let w = random(42,72);
    obstacles.push({
      x:random(8, width - w -8),
      y:-110,
      width:w,
      height:90
    })
  }

  //遍历所有障碍物
  for(let i=obstacles.length-1; i>=0; i--){
    let obs = obstacles[i];
    obs.y += speed;
    fill(random(100,255),random(100,255),random(100,255));
    rect(obs.x, obs.y, obs.width, obs.height, 10);

    //碰撞检测，撞车游戏结束
    if(checkHit(carX,carY,carW,carH, obs.x,obs.y,obs.width,obs.height)){
      fill(255,20,20);
      textAlign(CENTER);
      textSize(40);
      text("游戏结束", width/2, height/2);
      noLoop();
    }

    //障碍移出屏幕加分并删除
    if(obs.y > height){
      obstacles.splice(i,1);
      score +=10;
    }
  }

  //绘制玩家红色小车
  fill(215,15,15);
  rect(carX, carY, carW, carH, 12);
  fill(255);
  rect(carX+9, carY+10, carW-18, 30);
  rect(carX+9, carY+56, carW-18, 24);

  //显示分数
  fill(255);
  textAlign(LEFT);
  textSize(26);
  text("分数："+score, 12, 36);
}

//马路中间滚动白线
function drawRoadLine(){
  stroke(255,160);
  strokeWeight(4);
  for(let y = (frameCount*12)%120 -120; y < height; y +=120){
    line(width/2, y, width/2, y+55);
  }
  noStroke();
}

//矩形碰撞函数
function checkHit(x1,y1,w1,h1, x2,y2,w2,h2){
  return x1 < x2+w2 && x1+w1 > x2 && y1 < y2+h2 && y1+h1 > y2;
}
</script>
</body>
</html>

Game Source: 91跑酷

Creator: CosmicBear11

Libraries: p5

Complexity: moderate (99 lines, 2.0 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: 91-cosmicbear11" to link back to the original. Then publish at arcadelab.ai/publish.