用幽默案例让你爱上js

前言

说到JavaScript，很多人可能会觉得它是一种枯燥、复杂的编程语言。但事实并非如此。JavaScript可以非常有趣。就像一个魔术师，它能让你的网页变得生动起来，让你体验到编程的魅力。

用案例学JavaScript

接下来，我们将通过几个趣味案例，让你感受JavaScript的乐趣。

1. 让你的网页动起来

现在，让我们用JavaScript创建一个简单的动画效果。我们让网页上的一个元素，比如一个小球，从左向右移动。

var ball = document.getElementById("ball");

// 创建一个函数，让小球从左向右移动
function moveBall() {
  // 获取小球当前的位置
  var currentLeft = parseInt(ball.style.left);

  // 更新小球的位置，让它向右移动10像素
  ball.style.left = (currentLeft + 10) + "px";

  // 如果小球已经移动到网页的右边缘，就让它从左边缘重新开始移动
  if (currentLeft + 10 >= window.innerWidth) {
    ball.style.left = "0px";
  }

  // 每隔10毫秒调用一次moveBall函数，让小球持续移动
  setTimeout(moveBall, 10);
}

// 调用moveBall函数，让小球开始移动
moveBall();

现在，当你刷新网页时，你会看到一个小球从左向右移动。这就是JavaScript的魅力，它能让你轻松创建出各种动画效果。

2. 创建一个简单的游戏

接下来，我们用JavaScript创建一个简单的游戏。我们让用户控制一个小人，躲避从天而降的障碍物。

// 获取游戏元素
var player = document.getElementById("player");
var obstacles = document.getElementsByClassName("obstacle");

// 创建一个函数，让小人移动
function movePlayer(e) {
  // 获取小人的当前位置
  var currentLeft = parseInt(player.style.left);

  // 根据键盘按键，更新小人的位置
  if (e.keyCode === 37) {
    player.style.left = (currentLeft - 10) + "px";
  } else if (e.keyCode === 39) {
    player.style.left = (currentLeft + 10) + "px";
  }

  // 如果小人移动到网页的边缘，就阻止它继续移动
  if (currentLeft <= 0) {
    player.style.left = "0px";
  } else if (currentLeft >= window.innerWidth - player.offsetWidth) {
    player.style.left = (window.innerWidth - player.offsetWidth) + "px";
  }
}

// 创建一个函数，让障碍物从天而降
function createObstacle() {
  // 创建一个新的障碍物元素
  var obstacle = document.createElement("div");
  obstacle.classList.add("obstacle");

  // 设置障碍物的位置
  obstacle.style.top = "0px";
  obstacle.style.left = Math.random() * (window.innerWidth - obstacle.offsetWidth) + "px";

  // 将障碍物添加到网页中
  document.body.appendChild(obstacle);

  // 让障碍物从天而降
  var obstacleInterval = setInterval(function() {
    // 获取障碍物的当前位置
    var currentTop = parseInt(obstacle.style.top);

    // 更新障碍物的位置，让它向下移动10像素
    obstacle.style.top = (currentTop + 10) + "px";

    // 如果障碍物已经移动到网页的底端，就从网页中移除它
    if (currentTop + 10 >= window.innerHeight) {
      clearInterval(obstacleInterval);
      obstacle.parentNode.removeChild(obstacle);
    }
  }, 10);
}

// 创建一个函数，检查小人是否与障碍物碰撞
function checkCollision() {
  // 获取小人