正文

用JavaScript实现键盘控制方块移动的简单教程

/0 浏览量
0919

在这个教程中，我们将学习如何使用JavaScript和HTML来创建一个简单的游戏，玩家可以通过键盘按键来控制一个方块在屏幕上移动。这个项目不需要任何外部库，只使用原生的JavaScript和HTML。

准备工作

1. HTML结构

首先，我们需要创建一个简单的HTML页面来放置我们的游戏元素。创建一个<div>元素，我们将它作为游戏中的方块。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>键盘控制方块移动</title>
<style>
  #gameArea {
    width: 300px;
    height: 300px;
    border: 1px solid black;
    position: relative;
  }
  #box {
    width: 20px;
    height: 20px;
    background-color: red;
    position: absolute;
    top: 10px;
    left: 10px;
  }
</style>
</head>
<body>
<div id="gameArea">
  <div id="box"></div>
</div>
<script src="script.js"></script>
</body>
</html>

2. CSS样式

上面的代码中已经包含了基本的CSS样式。它设置了一个游戏区域和方块的基本样式。

3. JavaScript脚本

现在，我们将编写JavaScript脚本来控制方块的运动。

// script.js

document.addEventListener('DOMContentLoaded', function() {
  var box = document.getElementById('box');
  var x = 10; // 横坐标
  var y = 10; // 纵坐标
  var speed = 5; // 方块移动的速度

  function moveBox() {
    box.style.left = x + 'px';
    box.style.top = y + 'px';
  }

  // 控制方块移动的函数
  function moveLeft() {
    x -= speed;
    moveBox();
  }
  function moveRight() {
    x += speed;
    moveBox();
  }
  function moveUp() {
    y -= speed;
    moveBox();
  }
  function moveDown() {
    y += speed;
    moveBox();
  }

  // 监听键盘事件
  document.addEventListener('keydown', function(e) {
    switch (e.keyCode) {
      case 37: // 左箭头
        moveLeft();
        break;
      case 38: // 上箭头
        moveUp();
        break;
      case 39: // 右箭头
        moveRight();
        break;
      case 40: // 下箭头
        moveDown();
        break;
    }
  });
});

实现步骤解析

  1. HTML结构：我们创建了一个名为#gameArea的游戏区域和一个#box的方块元素。

  2. CSS样式：给游戏区域添加了一个边框，设置了方块的大小和初始位置。

  3. JavaScript脚本：

    • 当页面加载完成后，我们通过getElementById获取方块元素，并设置其初始位置。
    • 定义了方块移动的横纵坐标x和y以及移动速度speed。
    • moveBox函数负责更新方块的left和top样式属性，从而移动方块。
    • 定义了四个方向移动的函数，分别为左、上、右、下。
    • 使用addEventListener监听键盘事件，根据按下的键来调用相应的移动函数。

现在，你可以打开这个HTML文件，在浏览器中预览效果。通过左右上下的箭头键，你可以控制方块在屏幕上移动。这是一个简单的例子，你可以在此基础上添加更多的功能和复杂度。

-- 展开阅读全文 --