🎮ArcadeLab

像素冒险 Pixel Adventure

by SwiftTiger27
166 lines3.9 KB
▶ Play
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>像素冒险 Pixel Adventure</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:微软雅黑}
body{background:#111;display:flex;flex-direction:column;align-items:center;padding-top:20px}
#gameBox{
  border:4px solid #555;
  background:#346599; /*天空蓝像素底色*/
  image-rendering: pixelated; /*强制像素模糊风格，复古像素效果*/
}
.info{color:#fff;margin-bottom:8px;font-size:16px}
</style>
</head>
<body>
<div class="info">金币：<span id="coinNum">0</span> | 操作：← → 移动，空格跳跃</div>
<canvas id="gameBox" width="640" height="360"></canvas>

<script>
// 获取画布与上下文
const canvas = document.getElementById('gameBox');
const ctx = canvas.getContext('2d');
let coinText = document.getElementById('coinNum');

// 游戏全局参数
let coins = 0;
const gravity = 0.6;    // 重力大小
const jumpForce = -14;  // 跳跃力度

// 玩家像素角色配置
const player = {
  x: 60,
  y: 260,
  w: 24,
  h: 32,
  vx: 0,
  vy: 0,
  speed: 5,
  onGround: false // 是否踩在地面
};

// 按键监听
const key = {
  left: false,
  right: false,
  space: false
};
document.addEventListener('keydown',e=>{
  if(e.code==='ArrowLeft') key.left=true;
  if(e.code==='ArrowRight') key.right=true;
  if(e.code==='Space') key.space=true;
})
document.addEventListener('keyup',e=>{
  if(e.code==='ArrowLeft') key.left=false;
  if(e.code==='ArrowRight') key.right=false;
  if(e.code==='Space') key.space=false;
})

// 地面 & 平台数组 [x坐标,y坐标,宽,高]
const platforms = [
  {x:0,y:320,w:640,h:40},    // 最下方大地
  {x:130,y:260,w:90,h:16},
  {x:280,y:210,w:100,h:16},
  {x:430,y:160,w:110,h:16},
  {x:520,y:245,w:80,h:16}
];

// 金币像素物件
const coinList = [
  {x:165,y:235,got:false},
  {x:325,y:185,got:false},
  {x:480,y:135,got:false},
  {x:555,y:220,got:false}
];

// 碰撞检测函数
function isCollision(a,b){
  return a.x < b.x+b.w && a.x+a.w > b.x &&
         a.y < b.y+b.h && a.y+a.h > b.y;
}

// 游戏循环（刷新画面）
function gameLoop(){
  // 清空画布
  ctx.clearRect(0,0,canvas.width,canvas.height);

  // 玩家左右移动
  if(key.left) player.vx = -player.speed;
  else if(key.right) player.vx = player.speed;
  else player.vx = 0;

  // 跳跃判定
  if(key.space && player.onGround){
    player.vy = jumpForce;
    player.onGround = false;
  }

  // 施加重力
  player.vy += gravity;

  // 更新位置
  player.x += player.vx;
  player.y += player.vy;

  // 边界锁住，不出画布
  if(player.x<0) player.x=0;
  if(player.x+player.w>canvas.width) player.x=canvas.width-player.w;

  // 重置落地状态
  player.onGround = false;
  // 平台落地碰撞
  for(let plat of platforms){
    if(isCollision(player,plat) && player.vy>0){
      player.y = plat.y - player.h;
      player.vy = 0;
      player.onGround = true;
    }
  }

  // 金币拾取碰撞
  for(let coin of coinList){
    if(!coin.got){
      let coinBox = {x:coin.x,y:coin.y,w:16,h:16};
      if(isCollision(player,coinBox)){
        coin.got = true;
        coins++;
        coinText.textContent = coins;
      }
    }
  }

  // ========== 像素绘制部分 ==========
  // 绘制所有平台（深灰像素方块）
  ctx.fillStyle='#444444';
  for(let p of platforms){
    ctx.fillRect(p.x,p.y,p.w,p.h);
  }

  // 绘制金币（黄色像素小圆块）
  ctx.fillStyle='#FFDD22';
  for(let c of coinList){
    if(!c.got) ctx.fillRect(c.x,c.y,16,16);
  }

  // 绘制像素玩家（蓝身体、黑头，经典小人像素）
  // 头部
  ctx.fillStyle='#222222';
  ctx.fillRect(player.x+4, player.y, 16, 10);
  // 身体
  ctx.fillStyle='#2277CC';
  ctx.fillRect(player.x+2, player.y+10, 20, 14);
  // 腿脚
  ctx.fillStyle='#663322';
  ctx.fillRect(player.x+4, player.y+24, 6, 8);
  ctx.fillRect(player.x+14, player.y+24, 6, 8);

  requestAnimationFrame(gameLoop);
}

// 启动游戏
gameLoop();
</script>
</body>
</html>

Game Source: 像素冒险 Pixel Adventure

Creator: SwiftTiger27

Libraries: none

Complexity: moderate (166 lines, 3.9 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: pixel-adventure-swifttiger27" to link back to the original. Then publish at arcadelab.ai/publish.