首先,这是一个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. 二、vue学习--父元素如何获取子元素的值,子元素如何获取父元素的值

      下图是父元素: 下图是子元素,获取父元素的值,使用props定义属性,这样就可以获取到父元素上传过来的set .place.type,拿到值就可以做一些自己的逻辑处理 二.子元素给父元素传值? 下 ...

  2. LeetCode题解之Unique Morse Code Words

    1.题目描述 2.题目分析 将words 中的每一个string  直接翻译成对应的Morse 码,然后将其放入 set 中,最后返回set的大小即可,此处利用的set 中元素不重复的性质. 3.代码 ...

  3. 转:线程Thread (1)

    引言 1.理解多线程 2. 线程异步与线程同步 3.创建多线程应用程序 3.1通过System.Threading命名空间的类构建 3.1.1异步调用线程 3.1.2并发问题 3.1.3线程同步 3. ...

  4. 将jsonModel转化为文件

    将jsonModel转化为文件 这个类是我自己写着用的,用于将字典文件直接转换成Model的文件,省去你写无数Model中属性的代码: TransformDictionary.h 与 Transfor ...

  5. Linux mount命令详解

    mount命令用于加载文件系统到指定的加载点.此命令的也常用于挂载cdrom,使我们可以访问cdrom中的数据,因为你将光盘插入cdrom中,Linux并不会自动挂载,必须使用Linux mount命 ...

  6. 【matlab】 QR分解 求矩阵的特征值

    "QR_H.m" function [Q,R] = QR_tao(A) %输入矩阵A %输出正交矩阵Q和上三角矩阵R [n,n]=size(A); E = eye(n); X = ...

  7. Android点击事件

    Android点击事件 备注 全局实现View.OnClickListener 或许需要将MainActivity设置为public 注册事件 btn_login.setOnClickListener ...

  8. (转)图形学理论知识 BRDF 双向反射分布函数(Bidirectional Reflectance Distribution Function)

    BRDF理论 BRDF表示的是双向反射分布函数(Bidirectional Reflectance Distribution Function),它描述了光线如何在物体表面进行反射,可以用来描述材质属 ...

  9. jiekou

    接口 新的接口 package cn.eangaie.jingdong.controller;   import cn.eangaie.jingdong.entity.Result; import c ...

  10. 3星|《结构思考力》:用金字塔原理整理PPT的思路,案例偏简单

    结构思考力 名义上全书是讲结构化思考,实际内容是用结构化思考的方法来整理PPT的思路,让PPT的逻辑更清晰.少部分提到如何修改标题更吸引人,如何做图表设计. 书中结构化思考的基本思路,重要的有两个:1 ...