Simple Canvas Game

创作时间:

作者:

@小白创作中心

Simple Canvas Game

引用

CSDN

https://blog.csdn.net/2401_84976170/article/details/138932806

本文将介绍如何使用JavaScript和Canvas制作一个简单的HTML5小游戏。游戏规则是玩家通过键盘控制英雄移动，抓住尽可能多的怪物，并记录得分。

第一步：建立HTML文件和JS文件

首先创建一个文件夹结构，包含js和images子文件夹，以及index.html文件。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Simple Canvas Game</title>
    </head>
    <body>
        <script src="js/game.js"></script>
    </body>
</html>

第二步：创建游戏环境

1. 创建Canvas画布

通过Canvas标签创建元素，设置画布的宽度和高度，并将其添加到页面上。

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);

2. 加载游戏素材

加载背景、英雄和怪物的图片资源。

// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
    bgReady = true;
};
bgImage.src = "images/background.png";

// Hero image
var heroReady = false;
var heroImage = new Image();
heroImage.onload = function () {
    heroReady = true;
};
heroImage.src = "images/hero.png";

// Monster image
var monsterReady = false;
var monsterImage = new Image();
monsterImage.onload = function () {
    monsterReady = true;
};
monsterImage.src = "images/monster.png";

3. 定义游戏对象

创建英雄、怪物和分数变量。

// Game objects
var hero = {
    speed: 256 // movement in pixels per second
};
var monster = {};
var monstersCaught = 0;

4. 处理用户输入

监听键盘事件，保存用户按下的键值。

// Handle keyboard controls
var keysDown = {};
addEventListener("keydown", function (e) {
    keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
    delete keysDown[e.keyCode];
}, false);

5. 开始一轮游戏

重置游戏状态，将英雄放回画布中心，随机放置怪物。

// Reset the game when the player catches a monster
var reset = function () {
    hero.x = canvas.width / 2;
    hero.y = canvas.height / 2;
    // Throw the monster somewhere on the screen randomly
    monster.x = 32 + (Math.random() * (canvas.width - 64));
    monster.y = 32 + (Math.random() * (canvas.height - 64));
};