首先，这是一个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. PDW V2培训简记

    最近有幸参加了微软专家进行的为期一周PDW培训,将一些知识点记录如下: 不知道PDW是什么东西的,简单介绍一下:这是微软与HP/Dell合作推出的SQL Server数据仓库一体机,由HP或DELL提 ...

  2. Android 仿美团网，探索使用ViewPager+GridView实现左右滑动查看更多分类的功能

    看下效果图,自己考虑下自己会如何实现,然后再继续看看作者的实现~ 不记得什么时候,我留意到到美团网首页有使用ViewPager+GridView实现左右滑动查看更多分类的一个功能,感觉它很有趣,于是想 ...

  3. 润乾在东方通tongweb5.0上部署手册

     作为国内领先的中间件开发商,东方通是国内最早研究J2EE技术和开发应用服务器产品的厂商.应用服务器TongWeb的开发目标,是利用公司在中间件 领域的技术优势,实现符合J2EE规范的企业应用支撑 ...

  4. Material适配1 - 入门篇

    版权声明: 欢迎转载,但请保留文章原始出处 作者:GavinCT 出处:http://www.cnblogs.com/ct2011/p/4493384.html 随着Material Design的普 ...

  5. JQuery 选择器 筛选器

    什么是jQuery对象 参考:http://jquery.cuishifeng.cn/css.html jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQue ...

  6. 指令-Directive

    restrict:'A'用作设定用那种方式使用指令. 可组合使用如restrict:'AE' E - 元素名称: <my-directive></my-directive> A ...

  7. 如何在前端项目中引用bootstrap less？

    在基于bootstrap css框架的前端项目开发中,如果有grunt build系统,那么工作流是:客制化less,在less中定义自己的 CSS,同时可以随意引用bootstrap中预定义好的cs ...

  8. Jenkins操作，实现增删改查

    Jenkins的版本是:Jenkins2.138.1 实现的操作接口: using System; using System.Collections.Generic; namespace iHRPub ...

  9. C# 标准的MD5加密32位

    标准的MD5加密32位小写的: public static string GetMD5(string myString) { MD5 md5 = new MD5CryptoServiceProvide ...

  10. C#的Lambda 表达式都使用 Lambda 运算符 =>，该运算符读为“goes to”。语法如下：

    形参列表=>函数体 函数体多于一条语句的可用大括号括起. 类型 可以将此表达式分配给委托类型,如下所示:   delegate int del(int i); del myDelegate = ...