源码请点此下载并用浏览器打开index.html观看

图例：

代码：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>地图加载 英雄出现 19.3.6 10:20 by:逆火狂飙 horn19782016@163.com</title>

     <style>
     #canvas{
        background:#ffffff;
        cursor:pointer;
        margin-left:10px;
        margin-top:10px;
        -webkit-box-shadow:3px 3px 6px rgba(0,0,0,0.5);
        -moz-box-shadow:3px 3px 6px rgba(0,0,0,0.5);
        box-shadow:3px 3px 6px rgba(0,0,0,0.5);
     }

     #controls{
        margin-top:10px;
        margin-left:15px;
     }
     </style>

    </head>

     <body onload="init()">
        <div id="controls">
            <input id='animateBtn' type='button' value='开始'/>
        </div>

        <canvas id="canvas" width="160px" height="160px" >
            出现文字表示你的浏览器不支持HTML5
        </canvas>
     </body>
</html>
<script type="text/javascript">
<!--
var paused=true;
animateBtn.onclick=function(e){
    paused=! paused;

    if(paused){
        animateBtn.value="开始";    

    }else{
        animateBtn.value="停止";

        window.requestAnimationFrame(animate);
    }
}

var ctx;// 绘图环境
var r;// 表盘半径
var terrain;
var hero;
function init(){
    // init Canvas
    var canvas=document.getElementById('canvas');
    r=160;
    canvas.width =2*r;
    canvas.height=2*r;
    ctx=canvas.getContext('2d');

    terrain=new Terrain();
    hero=new Hero();

    // 响应键盘事件
    canvas.addEventListener('keydown', doKeyDown, true);
    canvas.focus();
    window.addEventListener('keydown', doKeyDown, true);
};

function draw(){
    // Clear Canvas
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
    ctx.fillStyle="#ECF5FF";
    ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);

    terrain.paint(ctx);
    hero.paint(ctx);
}

function animate(){
    if(!paused){
        draw();
        window.requestAnimationFrame(animate); /// 让浏览器自行决定帧速率
    }
}

function doKeyDown(e) {
    var keyID = e.keyCode ? e.keyCode :e.which;
    if(keyID === 38 || keyID === 87)  { // up arrow and W
        hero.move('up');
        e.preventDefault();
    }
    if(keyID === 39 || keyID === 68)  { // right arrow and D
        hero.move('right');
        e.preventDefault();
    }
    if(keyID === 40 || keyID === 83)  { // down arrow and S
        hero.move('down');
        e.preventDefault();
    }
    if(keyID === 37 || keyID === 65)  { // left arrow and A
        hero.move('left');
        e.preventDefault();
    }
}

//---------------------------------------------------地形类定义开始------------------------------------------------------------------->>
Terrain=function(){
    this.files=["road.png","tree.png","home.png",];

    this.maps=new Array(
        [0,0,0,0,0,0,0,0,0,0],
        [0,0,1,1,1,1,1,1,0,0],
        [0,0,0,0,0,0,0,0,0,0],
        [0,0,2,2,2,2,2,2,2,0],
        [0,0,0,0,0,0,2,0,0,0],
        [0,0,0,2,0,0,2,0,0,0],
        [0,0,0,2,0,0,0,0,0,0],
        [0,2,2,2,2,2,2,2,0,0],
        [0,0,0,0,0,0,0,0,0,0],
        [0,1,1,1,1,1,1,1,1,0],
    );
}
Terrain.prototype={
    files:[],
    // Property
    maps:0,

    // method
    paint:function(ctx){
        for(var i=0;i<this.maps.length;i++){
            var arr=this.maps[i];

            for(var j=0;j<arr.length;j++){
                var value=arr[j];

                var img=new Image();
                img.src=this.files[value];

                ctx.drawImage(img,i*32,j*32);
            }
        }
    },

    getValue:function(i,j){
        if(i<0 || i>=this.maps.length){
            return undefined;
        }
        var arr=this.maps[i];
        if(j<0 || j>=arr.length){
            return undefined;
        }
        var value=arr[j];
        return value;
    },
}
//---------------------------------------------------地形类定义结束-------------------------------------------------------------------<<

//---------------------------------------------------英雄类定义开始------------------------------------------------------------------->>
Hero=function(){
    this.files=["arrow_left.png","arrow_right.png","arrow_up.png","arrow_down.png",];

}
Hero.prototype={
    files:[],
    x:160,
    y:160,
    xTo:160,
    yTo:160,
    step:32,
    direction:'up',

    // method
    paint:function(ctx){
        var img=new Image();

        if(this.direction=='up'){
            img.src=this.files[2];
        }
        if(this.direction=='down'){
            img.src=this.files[3];
        }
        if(this.direction=='left'){
            img.src=this.files[0];
        }
        if(this.direction=='right'){
            img.src=this.files[1];
        }

        ctx.drawImage(img,this.x,this.y);
    },

    move:function(direction){
        this.direction=direction;

        if(this.direction=='up'){
            this.yTo-=this.step;
        }
        if(this.direction=='down'){
            this.yTo+=this.step;
        }
        if(this.direction=='left'){
            this.xTo-=this.step;
        }
        if(this.direction=='right'){
            this.xTo+=this.step;
        }

        if(terrain.getValue(this.xTo/this.step,this.yTo/this.step)==0){
            this.x=this.xTo;
            this.y=this.yTo;
        }else{
            this.xTo=this.x;
            this.yTo=this.y;
        }
    }
}
//---------------------------------------------------英雄类定义结束-------------------------------------------------------------------<<
//-->
</script>

2019年3月6日11点07分

[Canvas]RPG游戏雏形 （地图加载，英雄出现并移动）的更多相关文章

  1. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  2. HTML5 RPG游戏引擎 地图实现篇

    一,话说全国年夜事   前没有暂看到lufy的专客上,有一名伴侣念要一个RPG游戏引擎,出于兴趣筹办入手做一做.因为我研讨lufylegend有冶时间了,对它有必然的依赖性,因而便筹办将那个引擎基于 ...

  3. 如何制作一款HTML5 RPG游戏引擎——第一篇，地图类的实现

    一,话说天下大事 前不久看到lufy的博客上,有一位朋友想要一个RPG游戏引擎,出于兴趣准备动手做一做.由于我研究lufylegend有一段时间了,对它有一定的依赖性,因此就准备将这个引擎基于lufy ...

  4. 【android原生态RPG游戏框架源码】

    转载请注明原创地址:http://www.cnblogs.com/zisou/p/android-RPG.html 这份源码是在今年6月份写的,当时公司有一个技术部们的学习讨论的讲座,然后我自己就写了 ...

  5. RPG JS:免费开源的跨平台RPG游戏引擎

    RPG JS是一个2D RPG游戏制作引擎,目前版本基于Ease|JS游戏引擎,基于Canvas Engine的新版本即将发布. RPG JS是免费且开源的. RPG JS有着完善的文档支持. RPG ...

  6. Leaflet+heatmap实现离线地图加载和热力图应用

    本人博客主页:http://www.cnblogs.com/webbest/ 2017年春节已经过完,新一年的奋斗也刚刚开始.今年要经历的挑战也是大大的...不扯了. 年底前软件项目相对较多,恰巧在年 ...

  7. 如何制作一款HTML5 RPG游戏引擎——第四篇，情景对话

    今天我们来实现情景对话.这是一个重要的功能,没有它,游戏将变得索然无味.所以我们不得不来完成它. 但是要知道,使用对话可不是一件简单的事,因为它内部的东西很多,比如说人物头像,人物名称,对话内容... ...

  8. Cesium 基于MapBox底图加载3DTiles 模型

    3DTiles 模型采用   CATIA V5 R22 --->3dxml --->GLB--->B3DM var extent = Cesium.Rectangle.fromDeg ...

  9. AMap地图加载完成事件

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta http ...

随机推荐

  1. Programming 2D Games 读书笔记(第二章)

      本意还是想了解DirectX的,由于网上拿不到书的pdf文档,幸好有作者的源代码示例,想完整的看一下,基本的游戏需要的点. 下面直接以代码为例,仅用于帮助自身理解 http://www.progr ...

  2. delphi dxRibbon中 F10快捷键不好用的原因

    最近在项目中使用ribbon  ,用F10做快捷键,但是不好用, 不好用的原因是dxBarManager1 中的有个选项UseF10ForMenu, 把这项关闭就可以了

  3. .Net Discovery系列之三 深入理解.Net垃圾收集机制(上)

    前言: 组成.Net平台一个很重要的部分----垃圾收集器(Garbage Collection),今天我们就来讲讲它.想想看没有GC,.Net还能称之为一个平台吗?各种语言虽然都被编译成MSIL,但 ...

  4. Linux内存管理学习2 —— head.S中的段页表的建立

    作者 彭东林 pengdonglin137@163.com 平台 TQ2440 Qemu+vexpress-ca9 Linux-4.10.17 正文 继续分析head.S: 此时r2存放的是设备树镜像 ...

  5. EF Code First更新数据库时报错：provider: SQL Network Interfaces, error: 26

    在使用EF Code First更新数据库时报如下错误: 在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误.未找到或无法访问服务器.请验证实例名称是否正确并且 SQL Serv ...

  6. iOS: 计算 UIWebView 的内容高度

    - (void)webViewDidFinishLoad:(UIWebView *)wb { //方法1 CGFloat documentWidth = [[wb stringByEvaluating ...

  7. Android_深入解析AsyncTask

    转载:特别感谢浪人的星空,有部分修改! http://blog.csdn.net/hitlion2008/article/details/7983449 1.AsyncTask的内幕 AsyncTas ...

  8. Windows：C:\Windows\System32\drivers\etc\hosts

    原文地址:http://zhumeng8337797.blog.163.com/blog/static/100768914201001983953188/. host是一个没有扩展名的系统文件,可以用 ...

  9. HttpSession javax.servlet.http.HttpServletRequest.getSession(boolean arg0)理解

    request.getSession()和request.getSession(true)意思相同:获取session,如果session不存在,就新建一个 reqeust.getSession(fa ...

  10. 唐顿庄园第一至五季/全集Downton Abbey迅雷下载

    本季Downton Abbey 1(2010)看点:ITV古装剧剧<唐顿庄园>由曾因<高斯福德庄园>而荣获奥斯卡的金牌编剧Julian Fellowes一手打造,明星云集的演员 ...