JS游戏开发面试题｜全面解析JavaScript游戏开发岗位核心考点与实战技能

// 初始化画布
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const ball = { x: 100, y: 100, dx: 4, dy: 4, radius: 10 };
function drawBall() {
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
  ctx.fillStyle = "#FF5722";
  ctx.fill();
  ctx.closePath();
}
function update() {
  // 边界检测与反弹
  if (ball.x + ball.dx > canvas.width - ball.radius || ball.x + ball.dx < ball.radius) {
    ball.dx = -ball.dx;
  }
  if (ball.y + ball.dy > canvas.height - ball.radius || ball.y + ball.dy < ball.radius) {
    ball.dy = -ball.dy;
  }
  ball.x += ball.dx;
  ball.y += ball.dy;
}
function gameLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawBall();
  update();
  requestAnimationFrame(gameLoop);
}
gameLoop();

#version 300 es
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec3 aColor;
out vec3 ourColor;
uniform mat4 model;
uniform mat4 view;
uniform mat4 projection;
void main() {
  ourColor = aColor;
  gl_Position = projection * view * model * vec4(aPos, 1.0);
}

#version 300 es
precision mediump float;
in vec3 ourColor;
out vec4 FragColor;
void main() {
  FragColor = vec4(ourColor, 1.0);
}

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  physics: {
    default: 'arcade',
    arcade: { gravity: { y: 300 }, debug: false }
  },
  scene: {
    preload: preload,
    create: create,
    update: update
  }
};
const game = new Phaser.Game(config);
let ball;
function preload() {
  this.load.image('ball', 'assets/ball.png');
}
function create() {
  // 创建物理世界
  this.physics.world.setBounds(0, 0, 800, 600);
  // 创建精灵并启用物理
  ball = this.physics.add.sprite(400, 100, 'ball');
  ball.setBounce(1); // 弹性系数
  ball.setCollideWorldBounds(true);
}
function update() {
  // 可添加键盘控制
  if (this.cursors.left.isDown) {
    ball.setVelocityX(-200);
  } else if (this.cursors.right.isDown) {
    ball.setVelocityX(200);
  } else {
    ball.setVelocityX(0);
  }
  if (this.cursors.up.isDown && ball.body.touching.down) {
    ball.setVelocityY(-400);
  }
}

// 创建场景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xf0f0f0);
// 创建摄像机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建几何体（立方体）
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x4a3b2a });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 添加光源
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);
// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  // 旋转立方体
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();