3D游戏场景

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

const canvas = document.querySelector('canvas')

const SCREEN_WIDTH = 320
const SCREEN_HEIGHT = 200

const SCREEN_HALF_WIDTH = SCREEN_WIDTH * 0.5
const SCREEN_HALF_HEIGHT = SCREEN_HEIGHT * 0.5

const MAP_WIDTH = 16
const MAP_HEIGHT = 8

canvas.width = SCREEN_WIDTH
canvas.height = SCREEN_HEIGHT

const RAYS = SCREEN_WIDTH
const RAYS_HALF = RAYS * 0.5
const RAY_START = Math.floor(-RAYS_HALF)
const RAY_END = Math.floor(RAYS_HALF)
const RAY_VELOCITY = 0.001
const WALK_VELOCITY = 0.01
const TURN_VELOCITY = 0.05
const VELOCITY_FRICTION = 0.9

const PLAYER_START_X = 2
const PLAYER_START_Y = 2

const cx = canvas.getContext('2d')
cx.imageSmoothingEnabled = false

const textureSheet = new Image()
textureSheet.src = 'https://azazeln28.neocities.org/codepen/image/1375.png'

const map = [
  1, 1, 1, 1, 1, 1, 1, 3, 3, 1, 1, 1, 5, 5, 5, 5,
  1, 0, 0, 0, 1, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 5,
  1, 0, 0, 0, 0, 0, 5, 0, 1, 0, 0, 0, 5, 0, 0, 5,
  1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 5,
  1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 5, 5, 5, 5,
  1, 0, 0, 0, 1, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 1,
  1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1,
  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
]

const things = [
  {
    position: [2, 5]
  }
]

const player = {
  position: [PLAYER_START_X, PLAYER_START_Y],
  nextPosition: [PLAYER_START_X, PLAYER_START_Y],
  velocity: [0, 0],
  direction: [0, 0],
  rotation: 0
}

const keys = new Map()

let frameID

function clamp(value, min = 0.0, max = 1.0) {
  if (value < min) return min
  if (value > max) return max
  return value
}

function isPressed(key) {
  return keys.get(key)
}

function render() {
  cx.clearRect(0, 0, cx.canvas.width, cx.canvas.height)
  
  cx.fillStyle = '#333'
  cx.fillRect(0,0,SCREEN_WIDTH,SCREEN_HALF_HEIGHT)
  cx.fillStyle = '#777'
  cx.fillRect(0,SCREEN_HALF_HEIGHT,SCREEN_WIDTH,SCREEN_HALF_HEIGHT)
  
  // Ray casting
  for (let r = RAY_START; r < RAY_END; r++) {
    const rr = (r / RAYS_HALF) * Math.PI * 0.18
    const [pox, poy] = player.position
    const rdx = Math.cos(player.rotation + rr)
    const rdy = Math.sin(player.rotation + rr)
    const [pdx, pdy] = player.direction
    
    const rox = pox
    const roy = poy
    
    let rpx = rox
    let rpy = roy
    
    let rx = 0
      , ry = 0
      , rd = 0
      , rtx = Math.floor(rpx)
      , rty = Math.floor(rpy)
      , rs = 0
      , rt = 0
      , offset = 0
    
    do {
      
      rpx += rdx * RAY_VELOCITY
      rtx = Math.floor(rpx)
      offset = (rty * MAP_WIDTH) + rtx
      
      // si el rayo cae en una posición del mapa que no es 0
      // entonces salimos de este bucle tan simpático
      if (map[offset] !== 0) {
        rx = rpx - rox
        ry = rpy - roy
        rd = Math.sqrt(rx * rx + ry * ry)        
        rs = 0
        rt = map[offset]
        break
      }
      
      rpy += rdy * RAY_VELOCITY
      rty = Math.floor(rpy)
      offset = (rty * MAP_WIDTH) + rtx
      
      // si el rayo cae en una posición del mapa que no es 0
      // entonces salimos de este bucle tan simpático
      if (map[offset] !== 0) {
        rx = rpx - rox
        ry = rpy - roy
        rd = Math.sqrt(rx * rx + ry * ry)
        rs = 1
        rt = map[offset]
        break
      }
      
      // Esto lo usaba al principio para debuggear qué puntos recorrían
      // los rayos en el mapa
      //cx.fillStyle = 'rgba(0,255,0,0.5)'
      //cx.fillRect(rpx * 8, rpy * 8, 1, 1)
      
    } while (rpx > 0 && rpy > 0 && rpx < MAP_WIDTH && rpy < MAP_HEIGHT)
    
    // Como aquí tengo la distancia del rayo, ya puedo pintar cada
    // una de las paredes con respecto al centro.
    const wd = (rx * Math.cos(player.rotation)) + (ry * Math.sin(player.rotation))
    const wx = (r + RAYS_HALF) * (SCREEN_WIDTH / RAYS)
    const f = (0.5 / wd)
    const wy = Math.floor(cx.canvas.height * 0.5 - f * cx.canvas.height)
    const wh = Math.floor(f * 2 * cx.canvas.height)
    
    // Esto renderiza las paredes de colores.
    /*
    if (rt === 1) {
      cx.fillStyle = rs ? '#00a' : '#007'
    } else if (rt === 2) {
      cx.fillStyle = rs ? '#0a0' : '#070'
    } else if (rt === 3) {
      cx.fillStyle = rs ? '#a00' : '#700'
    } else {
      cx.fillStyle = rs ? '#909' : '#707'
    }
    cx.fillRect(wx, wy, 1, wh)
    */
    
    // Esto renderiza las paredes texturizadas.
    const wtx = clamp(rpx - rtx)
    const wty = clamp(rpy - rty)
    
    if (rs === 0) {
      const sx = Math.ceil((((rt * 2) % 4) + wty) * 64) - 32
      cx.drawImage(textureSheet, sx, Math.floor((rt * 2) / 4) * 64, 64, 64, wx, wy, 1, wh)
    } else {
      const sx = Math.ceil(((((rt * 2) + 1) % 4) + wtx) * 64) - 32
      cx.drawImage(textureSheet, sx, Math.floor(((rt * 2) + 1) / 4) * 64, 64, 64, wx, wy, 1, wh)
    }
    
  }

// TODO: Aquí deberíamos renderizar los objetos,
  // enemigos, etc.
  
  // Esto renderiza el mapa de la parte superior izquierda de la pantalla
  cx.strokeStyle = '#fff'
  for (let y = 0; y < MAP_HEIGHT; y++) {
    for (let x = 0; x < MAP_WIDTH; x++) {
      const offset = (y * MAP_WIDTH) + x
      cx.fillStyle = map[offset] ? '#777' : '#000'
      cx.fillRect(x * 8,y * 8,8,8)
    }
  }

// Esto renderiza la flecha roja que representa al jugador.
  cx.fillStyle = '#f00'
  cx.fillRect(8 * player.position[0], 8 * player.position[1], 1, 1)
  cx.strokeStyle = '#f00'
  
  cx.beginPath()
  cx.moveTo(8 * player.position[0], 8 * player.position[1])
  cx.lineTo(8 * player.position[0] + player.direction[0] * 8, 8 * player.position[1] + player.direction[1] * 8)
  cx.stroke()

}

function update() {
  let tx = Math.floor(player.position[0])
    , ty = Math.floor(player.position[1])
    , offset = (ty * MAP_WIDTH) + tx
  
  player.direction[0] = Math.cos(player.rotation)
  player.direction[1] = Math.sin(player.rotation)
  
  // Walk
  if (isPressed("ArrowUp") || isPressed("KeyW")) {
    player.velocity[0] += player.direction[0] * WALK_VELOCITY
    player.velocity[1] += player.direction[1] * WALK_VELOCITY
  } else if (isPressed("ArrowDown") || isPressed("KeyS")) {
    player.velocity[0] -= player.direction[0] * WALK_VELOCITY
    player.velocity[1] -= player.direction[1] * WALK_VELOCITY
  }
  
  // Turn
  if (isPressed("ArrowLeft")) {
    player.rotation -= TURN_VELOCITY
  } else if (isPressed("ArrowRight")) {
    player.rotation += TURN_VELOCITY
  }
  
  // Strafe
  if (isPressed("KeyA")) {
    player.velocity[0] -= -player.direction[1] * WALK_VELOCITY
    player.velocity[1] -= player.direction[0] * WALK_VELOCITY
  } else if (isPressed("KeyD")) {
    player.velocity[0] += -player.direction[1] * WALK_VELOCITY
    player.velocity[1] += player.direction[0] * WALK_VELOCITY
  }
  
  player.velocity[0] *= VELOCITY_FRICTION
  player.velocity[1] *= VELOCITY_FRICTION
  
  player.nextPosition[0] = player.position[0] + player.velocity[0]
  player.nextPosition[1] = player.position[1] + player.velocity[1]
  
  tx = Math.floor(player.nextPosition[0])
  offset = (ty * MAP_WIDTH) + tx
  if (map[offset] !== 0) {
    player.nextPosition[0] = player.position[0]
  }
  
  ty = Math.floor(player.nextPosition[1])
  offset = (ty * MAP_WIDTH) + tx
  if (map[offset] !== 0) {
    player.nextPosition[1] = player.position[1]
  }
  
  player.position[0] = player.nextPosition[0]
  player.position[1] = player.nextPosition[1]
}

function frame() {  
  update()
  render()
  frameID = window.requestAnimationFrame(frame)
}

function handleKey(e) {
  keys.set(e.code, e.type === 'keydown')
}

function start() {
  window.addEventListener('keyup', handleKey)
  window.addEventListener('keydown', handleKey)
  frameID = window.requestAnimationFrame(frame)  
}

start()

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg