21xrx.com
2025-03-31 04:42:50 Monday
文章检索 我的文章 写文章
JavaScript程序设计自测：加强你的JavaScript技能
2023-06-11 10:54:24 深夜i     11     0
JavaScript

JavaScript程序设计自测：加强你的JavaScript技能

JavaScript程序设计是前端开发最重要的一环，本章提供了自测题目，帮助你进一步了解和加强JavaScript的编程能力。以下是一些常见的JavaScript编程挑战：

1. 编写一个计算器

代码案例：

function calculate(expression) {
 // 解析表达式
 let tokens = expression.match(/(\d+|\+|\-|\*|\/|\(|\))/g);
 // 进行计算
 let stack = [];
 for (let token of tokens) {
  if (token === '+' || token === '-' || token === '*' || token === '/') {
   let b = stack.pop();
   let a = stack.pop();
   if (token === '+') {
    stack.push(a + b);
   } else if (token === '-') {
    stack.push(a - b);
   } else if (token === '*') {
    stack.push(a * b);
   } else if (token === '/') {
    stack.push(a / b);
   }
  } else {
   stack.push(parseFloat(token));
  }
 }
 return stack.pop();
}
console.log(calculate('1+2+3'));   // 6
console.log(calculate('2*3/(4-1)')); // 2

2. 编写一个模拟游戏

代码案例：

class Game {
 constructor() {
  this.grid = [];
  for (let i = 0; i < 10; i++) {
   this.grid.push([]);
   for (let j = 0; j < 10; j++) {
    this.grid[i].push('.');
   }
  }
  this.players = [];
 }
 addPlayer(name, x, y) {
  this.players.push( x: x);
  this.grid[x][y] = name[0];
 }
 movePlayer(name, dx, dy) {
  let player = this.getPlayer(name);
  let x = player.x + dx;
  let y = player.y + dy;
  if (x < 0 || x > 9 || y < 0 || y > 9) {
   throw new Error('Invalid move');
  }
  if (this.grid[x][y] !== '.') {
   throw new Error('Position occupied');
  }
  this.grid[player.x][player.y] = '.';
  this.grid[x][y] = player.name[0];
  player.x = x;
  player.y = y;
 }
 getPlayer(name) {
  for (let player of this.players) {
   if (player.name === name)
    return player;
   
  }
 }
}
let game = new Game();
game.addPlayer('Alice', 0, 0);
game.addPlayer('Bob', 9, 9);
console.log(game.grid);
game.movePlayer('Alice', 1, 1);
console.log(game.grid);
game.movePlayer('Bob', -1, -1);
console.log(game.grid);

3. 编写一个图片滑块游戏

代码案例：

let container = document.getElementById('container');
let tiles = [];
for (let i = 0; i < 9; i++) {
 let tile = document.createElement('div');
 tile.className = 'tile';
 tile.style.backgroundPosition = `-${i % 3 * 100}px -${Math.floor(i / 3) * 100}px`;
 tile.addEventListener('click', function () {
  if (canMove(i)) {
   moveTile(i);
   if (isSolved()) {
    alert('Congratulations!');
   }
  }
 });
 container.appendChild(tile);
 tiles.push(tile);
}
shuffleTiles();

以上是几个常见的JavaScript编程挑战，通过不断尝试，你将提高自己的JavaScript编程能力，为自己的前端工作打下坚实的基础。

自测, 编程挑战

  
  

评论区