首先，这是一个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";



// 准备英雄图片

var heroReady = false;

var heroImg = new Image();

heroImg.onload = function () {

    heroReady = true;

}

heroImg.src = "../src/images/games/images/hero.png";



// 准备怪兽图片

var monsterReady = false;

var monsterImg = new Image();

monsterImg.onload = function () {

    monsterReady = true;

}

monsterImg.src = "../src/images/games/images/monster.png";



// 定义游戏对象

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();

初来博客园，还有许许多多不了解的地方，还请多多谅解。

成果展示：https://lqitong.github.io/canvas/

资源都在我的 github 上边儿，有兴趣的博友可以上去看看：https://github.com/LQiTong/canvas

使用canvas通过js制作一个小型英雄抓怪兽的2D小游戏的更多相关文章

  1. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  2. sChart.js：一个小型简单的图表库

    介绍 sChart.js 作为一个小型简单的图表库,没有过多的图表类型,只包含了柱状图.折线图.饼状图和环形图四种基本的图表.麻雀虽小,五脏俱全.sChart.js 基本可以满足这四种图表的需求.而它 ...

  3. 用JS制作一个信息管理平台完整版

      前  言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容.   1.JSON的基础知识 ...

  4. JS制作一个创意数字时钟

    通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间.具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模 ...

  5. three.js 制作一个三维的推箱子游戏

    今天郭先生发现大家更喜欢看我发的three.js小作品,今天我就发一个3d版本推箱子的游戏,其实webGL有很多框架,three.js并不合适做游戏引擎,但是可以尝试一些小游戏.在线案例请点击博客原文 ...

  6. 1000粉！使用Three.js制作一个专属3D奖牌🥇

    背景 破防了 !突然发现 SegmentFault 平台的粉丝数量已经突破 1000 了,它是我的三个博客平台掘金.博客园.SegmentFault中首个粉丝突破 1000 的,于是设计开发这个页面, ...

  7. iOS学习——制作一个小型加法计算器

    一.项目要求:制作一个加法计算器.在第1个和第2个文本框中输入两个整数,然后点击“计算”按钮,可将计算结果显示在第3个文本框中. 二.开发步骤: 1.搭建UI界面 2.监听按钮的点击事件 3.获取文本 ...

  8. 用js制作一个计算器

    使用js制作计算器 <!doctype html> <html lang="en"> <head> <meta charset=" ...

  9. JS制作一个通用的商城版历史浏览记录

    正在开发一个b2c的国外商城,昨天做了一个历史浏览记录发出来跟大家分享一下. JS: //cookie相关函数 function getCookieVal(offset) {    var endst ...

随机推荐

  1. Android Dialog的整个生命周期

    Activities提供了一种方便管理的创建.保存.回复的对话框机制,例如 onCreateDialog(int), onPrepareDialog(int, Dialog), showDialog( ...

  2. Python 执行主程序

    主程序里的代码包含的东西比较多, 如果在程序的.py文件里执行还要再调一遍方法, 但通常这个调用在测试完结后是要删掉的. 那么问题来了, 如果把这个代码直接发给别人, 执行时要再加上调用, 这个就很烦 ...

  3. Oracle EBS PO 接受入库

  4. RHEL7系统管理之网络管理

    1. RHEL7的网络介绍 在RHEL7中, NetworkManager 提供的默认联网服务是一个动态网络控制和配置守护进程, 支持ifcfg类型的配置文件. NetworkManager 可用于连 ...

  5. 几个很好用SQL语法（SqlServer）

    1,MERGE INTO 语句: 这个语法仅需要一次全表扫描就完成了全部工作,执行效率要高于INSERT+UPDATE,作用还是很强大的(简单的说就是它可以批量更新和插入处理一个数据集,如果存在就更新 ...

  6. Python初学者第二十三天 函数进阶（2）装饰器

    装饰器: 需求----> 写一个功能,测试其他同事函数的调用效率. 第一版:功能版 import time def func(): time.sleep(0.2) print('非常复杂') d ...

  7. Linux blkid命令详解

    blkid命令对查询设备上所采用文件系统类型进行查询.blkid主要用来对系统的块设备(包括交换分区)所使用的文件系统类型.LABEL.UUID等信息进行查询.要使用这个命令必须安装e2fsprogs ...

  8. [沫沫金]JavaWeb企业信息系统，增加操作记录、数据库记录

    背景 系统出现数据莫名丢失,业务人员的反馈无法复现问题.纠结了很久,最终老板发话要记录操作,通过日志进行分析重现 环境 SSH框架 目标 1.记录访问了那个方法,使用的参数及返回的内容 2.记录新增. ...

  9. docker 自制alpine-lnp镜像

    简单粗暴点吧 jenkins 镜像下载:docker pull jenkins:alpine dockfile 原地址:https://gist.github.com/phith0n/373cc078 ...

  10. php中查询时间

    在做查询过程中,例如要实现查上个月从第一天到最后一天的佣金(提成),那我们在程序实现过程中就要让程序在上个月的范围内查询,第一天是比较好办,但最后一天就不定,要去写段函数进行月份及年份判断来得出上个月 ...