使用canvas通过js制作一个小型英雄抓怪兽的2D小游戏

程序员文章站 2022-11-27 15:01:19

首先，这是一个html：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>simple canvas game</title>
</head>
<body>
</body>
</html>
<script src="../js/canvas.js"></script>

然后，是canvas.js的内容，主要操作都在js中：

var cvs = document.createelement('canvas'); // 创建canvas标签
var ctx = cvs.getcontext('2d');

cvs.width = 512;    // 设置canvas的宽度
cvs.height = 480;   // 设置canvas的高度
// cvs.style = 'border:1px solid #000;';   // 设置canvas样式
document.body.appendchild(cvs); // 将新建的canvas渲染到页面
// console.log(ctx);

// 准备背景图片
var bgready = false;
var bgimg = new image();
bgimg.onload = function () {
    bgready = true;
}
bgimg.src = "../src/images/games/images/background.png";

使用canvas通过js制作一个小型英雄抓怪兽的2D小游戏

// 准备英雄图片
var heroready = false;
var heroimg = new image();
heroimg.onload = function () {
    heroready = true;
}
heroimg.src = "../src/images/games/images/hero.png";

使用canvas通过js制作一个小型英雄抓怪兽的2D小游戏

// 准备怪兽图片
var monsterready = false;
var monsterimg = new image();
monsterimg.onload = function () {
    monsterready = true;
}
monsterimg.src = "../src/images/games/images/monster.png";

使用canvas通过js制作一个小型英雄抓怪兽的2D小游戏

// 定义游戏对象
var hero = {
    speed: 256  // 控制英雄每秒移动多少像素
}
var monster = {};
var monstercaught = 0;  // 抓到的怪兽数量

// 处理用户的键盘控制
var keysdown = {};
// 监听键盘按下事件
addeventlistener('keydown', function (e) {
    keysdown[e.keycode] = true;
}, false);
// 监听键盘抬起事件
addeventlistener('keyup', function (e) {
    delete keysdown[e.keycode];
}, false);

// 重开新一轮游戏的事件处理
var reset = function () {
    hero.x = cvs.width / 2;
    hero.y = cvs.height / 2; // 英雄的初始坐标

    monster.x = 32 + (math.random() * (cvs.width - 64));
    monster.y = 32 + (math.random() * (cvs.height - 64));
};

// 更新游戏对象事件处理
var update = function (modifier) {
    if (87 in keysdown) {   // 键盘按下“w”
        hero.y -= hero.speed * modifier;
    }
    if (83 in keysdown) {   //  键盘按下“s”
        hero.y += hero.speed * modifier;
    }
    if (65 in keysdown) {   // 键盘按下“a”
        hero.x -= hero.speed * modifier;
    }
    if (68 in keysdown) {   // 键盘按下“d”
        hero.x += hero.speed * modifier;
    }

    // 碰到上下左右边界时
    if (hero.x < 0) { // 左边界
        hero.x = cvs.width - 32;
    } else if (hero.x > cvs.width) {    // 右边界
        hero.x = 0;
    } else if (hero.y < 0) {    // 上边界
        hero.y = cvs.height - 32;
    } else if (hero.y > cvs.height) {    // 下边界 
        hero.y = 0
    }

    // 判断是否抓住怪兽
    if (
        hero.x <= (monster.x + 32) &&
        monster.x <= (hero.x + 32) &&
        hero.y <= (monster.y + 32) &&
        monster.y <= (hero.y + 32)
    ) {
        ++monstercaught;
        reset();
    }
}

// 渲染物体
var render = function () {
    if (bgready) {
        ctx.drawimage(bgimg, 0, 0);
    }
    if (heroready) {
        ctx.drawimage(heroimg, hero.x, hero.y);
    }
    if (monsterready) {
        ctx.drawimage(monsterimg, monster.x, monster.y);
    }

    // 上色
    ctx.fillstyle = "rgb(250,250,250)";
    ctx.font = "24px helvetica";
    ctx.textalign = "left";
    ctx.textbaseline = "top";
    ctx.filltext('抓到的怪兽数量：' + monstercaught, 32, 32);
}

// 主循环函数
var main = function () {
    var now = date.now();

    var delta = now - then;
    update(delta / 1000);
    render();
    then = now;

    var w = window;
    requestanimationframe = w.requestanimationframe || w.webkitrequestanimationframe || w.msrequestanimationframe || w.mozrequestanimationframe;
    requestanimationframe(main);
};

// 启动游戏
var then = date.now();
reset();
main();

使用canvas通过js制作一个小型英雄抓怪兽的2D小游戏

初来博客园，还有许许多多不了解的地方，还请多多谅解。
成果展示：
资源都在我的 github 上边儿，有兴趣的博友可以上去看看：https://github.com/lqitong/canvas

上一篇： RFID NFC

下一篇：深入了解PHP类Class的概念