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

代码：

  1. <!DOCTYPE html>
  2. <html lang="utf-8">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  4. <head>
  5.      <title>地图加载 英雄出现2 19.3.6 15:37 by:逆火狂飙 horn19782016@163.com</title>
  6.  
  7.      <style>
  8.      #canvas{
  9.         background:#ffffff;
  10.         cursor:pointer;
  11.         margin-left:10px;
  12.         margin-top:10px;
  13.         -webkit-box-shadow:3px 3px 6px rgba(0,0,0,0.5);
  14.         -moz-box-shadow:3px 3px 6px rgba(0,0,0,0.5);
  15.         box-shadow:3px 3px 6px rgba(0,0,0,0.5);
  16.      }
  17.  
  18.      #controls{
  19.         margin-top:10px;
  20.         margin-left:15px;
  21.      }
  22.      </style>
  23.  
  24.     </head>
  25.  
  26.      <body onload="init()">
  27.         <div id="controls">
  28.             <input id='animateBtn' type='button' value='开始'/>
  29.         </div>
  30.  
  31.         <canvas id="canvas" width="160px" height="160px" >
  32.             出现文字表示你的浏览器不支持HTML5
  33.         </canvas>
  34.      </body>
  35. </html>
  36. <script type="text/javascript">
  37. <!--
  38. var paused=true;
  39. animateBtn.onclick=function(e){
  40.     paused=! paused;
  41.  
  42.     if(paused){
  43.         animateBtn.value="开始";    
  44.  
  45.     }else{
  46.         animateBtn.value="停止";
  47.  
  48.         window.requestAnimationFrame(animate);
  49.     }
  50. }
  51.  
  52. var ctx;// 绘图环境
  53. var r;// 表盘半径
  54. var terrain;
  55. var hero;
  56. function init(){
  57.     // init Canvas
  58.     var canvas=document.getElementById('canvas');
  59.     r=160;
  60.     canvas.width =2*r;
  61.     canvas.height=2*r;
  62.     ctx=canvas.getContext('2d');
  63.  
  64.     terrain=new Terrain();
  65.     hero=new Hero();
  66.  
  67.     // 响应键盘事件
  68.     canvas.addEventListener('keydown', doKeyDown, true);
  69.     canvas.focus();
  70.     window.addEventListener('keydown', doKeyDown, true);
  71. };
  72.  
  73. function draw(){
  74.     // Clear Canvas
  75.     ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
  76.     ctx.fillStyle="#ECF5FF";
  77.     ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);
  78.  
  79.     terrain.paint(ctx);
  80.     hero.paint(ctx);
  81. }
  82.  
  83. function animate(){
  84.     if(!paused){
  85.         draw();
  86.         window.requestAnimationFrame(animate); /// 让浏览器自行决定帧速率
  87.     }
  88. }
  89.  
  90. function doKeyDown(e) {
  91.     var keyID = e.keyCode ? e.keyCode :e.which;
  92.     if(keyID === 38 || keyID === 87)  { // up arrow and W
  93.         hero.move('up');
  94.         e.preventDefault();
  95.     }
  96.     if(keyID === 39 || keyID === 68)  { // right arrow and D
  97.         hero.move('right');
  98.         e.preventDefault();
  99.     }
  100.     if(keyID === 40 || keyID === 83)  { // down arrow and S
  101.         hero.move('down');
  102.         e.preventDefault();
  103.     }
  104.     if(keyID === 37 || keyID === 65)  { // left arrow and A
  105.         hero.move('left');
  106.         e.preventDefault();
  107.     }
  108. }
  109.  
  110. //---------------------------------------------------地形类定义开始------------------------------------------------------------------->>
  111. Terrain=function(){
  112.     this.files=["road.png","tree.png","home.png",];
  113.  
  114.     this.maps=new Array(
  115.         [0,0,0,0,0,0,0,0,0,0],
  116.         [0,0,1,1,1,1,1,1,0,0],
  117.         [0,0,0,0,0,0,0,0,0,0],
  118.         [0,0,2,2,2,2,2,2,2,0],
  119.         [0,0,0,0,0,0,2,0,0,0],
  120.         [0,0,0,2,0,0,2,0,0,0],
  121.         [0,0,0,2,0,0,0,0,0,0],
  122.         [0,2,2,2,2,2,2,2,0,0],
  123.         [0,0,0,0,0,0,0,0,0,0],
  124.         [0,1,1,1,1,1,1,1,1,0],
  125.     );
  126. }
  127. Terrain.prototype={
  128.     files:[],
  129.     // Property
  130.     maps:0,
  131.  
  132.     // method
  133.     paint:function(ctx){
  134.         for(var i=0;i<this.maps.length;i++){
  135.             var arr=this.maps[i];
  136.  
  137.             for(var j=0;j<arr.length;j++){
  138.                 var value=arr[j];
  139.  
  140.                 var img=new Image();
  141.                 img.src=this.files[value];
  142.  
  143.                 ctx.drawImage(img,i*32,j*32);
  144.             }
  145.         }
  146.     },
  147.  
  148.     getValue:function(i,j){
  149.         if(i<0 || i>=this.maps.length){
  150.             return undefined;
  151.         }
  152.         var arr=this.maps[i];
  153.         if(j<0 || j>=arr.length){
  154.             return undefined;
  155.         }
  156.         var value=arr[j];
  157.         return value;
  158.     },
  159. }
  160. //---------------------------------------------------地形类定义结束-------------------------------------------------------------------<<
  161.  
  162. //---------------------------------------------------英雄类定义开始------------------------------------------------------------------->>
  163. Hero=function(){
  164.     this.files=["arrow_left.png","arrow_right.png","arrow_up.png","arrow_down.png",];
  165.  
  166.     this.pngs=[
  167.         {left:0,top:10,width:40,height:40},
  168.         {left:0,top:66,width:40,height:40},
  169.         {left:0,top:120,width:40,height:40},
  170.         {left:0,top:180,width:40,height:40},
  171.     ];
  172. }
  173. Hero.prototype={
  174.     files:[],
  175.     pngs:[],
  176.     x:160,
  177.     y:160,
  178.     xTo:160,
  179.     yTo:160,
  180.     step:32,
  181.     direction:'up',
  182.  
  183.     // method
  184.     paint:function(ctx){
  185.         var img=new Image();
  186.         img.src='bowman.png';
  187.  
  188.         var index=0;
  189.         if(this.direction=='up'){
  190.             index=3;
  191.         }
  192.         if(this.direction=='down'){
  193.             index=0;
  194.         }
  195.         if(this.direction=='left'){
  196.             index=1;
  197.         }
  198.         if(this.direction=='right'){
  199.             index=2;
  200.         }
  201.         var pos=this.pngs[index];
  202.         ctx.drawImage(img,pos.left,pos.top,pos.width,pos.height,this.x,this.y,pos.width,pos.height);
  203.         //ctx.drawImage(img,this.x,this.y);
  204.     },
  205.  
  206.     move:function(direction){
  207.         this.direction=direction;
  208.  
  209.         if(this.direction=='up'){
  210.             this.yTo-=this.step;
  211.         }
  212.         if(this.direction=='down'){
  213.             this.yTo+=this.step;
  214.         }
  215.         if(this.direction=='left'){
  216.             this.xTo-=this.step;
  217.         }
  218.         if(this.direction=='right'){
  219.             this.xTo+=this.step;
  220.         }
  221.  
  222.         if(terrain.getValue(this.xTo/this.step,this.yTo/this.step)==0){
  223.             this.x=this.xTo;
  224.             this.y=this.yTo;
  225.         }else{
  226.             this.xTo=this.x;
  227.             this.yTo=this.y;
  228.         }
  229.     }
  230. }
  231. //---------------------------------------------------英雄类定义结束-------------------------------------------------------------------<<
  232. //-->
  233. </script>

2019年3月6日15点41分

[Canvas]人物型英雄出现（前作仅为箭头）的更多相关文章

  1. [Canvas]游戏增加怪物爆炸效果，改善箭头形状

    请点此下载代码并用浏览器打开试玩. 图例: 代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-eq ...

  2. 当LinkButton无效时，光标不显示为手型

    在Flex组件LinkButton里,我们可以用useHandCursor属性来控制是否使用手型光标.现在我们要实现在LinkButton的enable=false时,useHandCursor=fa ...

  3. WPF在Canvas中绘图实现折线统计图

    最近在WPF中做一个需要实现统计的功能,其中需要用到统计图,之前也没有接触过,度娘上大多都是各种收费或者免费的第三方控件,不想用第三方控件那就自己画一个吧. 在园子还找到一篇文章,思路来自这篇文章,文 ...

  4. 03.Web大前端时代之：HTML5+CSS3入门系列~H5功能元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 2.功能元素 1.hgroup 对网页或区段(secti ...

  5. CCF-NOIP-2018 提高组(复赛) 模拟试题(五)

    T1 相遇 [问题描述] 在一场奇怪的梦里,小 Y 来到了一个神奇的国度.这个国度可以用一根数轴表示,小 Y 在 N 处,而小 Y 想吃的美食在 K 处.小 Y 有两种方式移动, 一种叫做步行, 一种 ...

  6. 【Cocos2dx游戏开发】Cocos2d-x简介

    一.简介 最近在做一个Android下的卡牌游戏--<九州幻想>开发项目,而我们使用的引擎是Cocos2dx,所以想要写写笔记来记录一下项目中的收获.当然首先稍微介绍一下Cocos2d-x ...

  7. 前端之JavaScript基础

    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

  8. C# 词法分析器（六）构造词法分析器

    系列导航 (一)词法分析介绍 (二)输入缓冲和代码定位 (三)正则表达式 (四)构造 NFA (五)转换 DFA (六)构造词法分析器 (七)总结 现在最核心的 DFA 已经成功构造出来了,最后一步就 ...

  9. C++学习笔记35:函数模板

    函数模板 函数模板的目的 设计通用的函数,以适应广泛的数据型式 函数模板的定义格式 template<模板型式参数列表>返回值型式 函数名称(参数列表): 原型:template<c ...

随机推荐

  1. JAVA GC 图解

    http://www.cnblogs.com/hnrainll/archive/2013/11/06/3410042.html http://www.blogjava.net/ldwblog/arch ...

  2. linux网络编程：splice函数和tee( )函数高效的零拷贝

    splice( )函数 在两个文件描述符之间移动数据,同sendfile( )函数一样,也是零拷贝. 函数原型: #include <fcntl.h> ssize_t splice(int ...

  3. setTimeout 的黑魔法 【event loop】

    setTimeout,前端工程师必定会打交道的一个函数.它看上去非常的简单,朴实.有着一个很不平凡的名字--定时器.让年少的我天真的以为自己可以操纵未来.却不知朴实之中隐含着惊天大密.我还记得我第一次 ...

  4. 加快Qemu Aarch32虚拟开发板的启动速度

    软件版本 Qemu: 2.8.0 虚拟开发板: vexpress-ca9 概述 之前的博文介绍了将Python移植到开发板上, 根文件系统采用的是ramdisk, 这个文件系统的缺点是修改的内容重启会 ...

  5. iOS内存管理 －讲的不错，角度独特

    ios的内存管理,包括对象的所有权与引用计数.自动释放.访问器方法与属性.一些会改变引用计数的特殊情况          ----- 对象所有权(ownership) 与引用计数 (retain co ...

  6. 打开IPHONE的sms.db短信文件 方法

    先将导出的sms.db文件改名为sms.sqlite再下载个火狐浏览器<IGNORE_JS_OP style="WIDOWS: 2; TEXT-TRANSFORM: none; BAC ...

  7. C#编程（三十三）----------Array类

    Array类 创建数组 Array intArray1 = Array.CreateInstance(typeof(int), 5); for (int i = 0; i < 5; i++) { ...

  8. C#编程（十二）----------函数

    类和结构 类和结构实际上都是创建对象的模板 ,每 个对象都包含数据 ,并 提供了处理和访问数据的方法. 类定义了类的每个对象 (称 为实例 )可 以包含什么数据和功能 . 例如 ,如 果 一 个类表示 ...

  9. linux搭建C开发环境

    目前决大多 数的Linux用户对Linux的了解还处于比较低级的层次,他们可能会几条命令.会配几种服务.会用rpm来安装软件.会操作KDE/Gnome界机等等,但是当他们遇到一些需要编译安装的软件时, ...

  10. 让Less在Dreamweaver中高亮显示

    装的Dreamweavercs6还是没支持less啊,试过几种方法,感觉还是插件比较直接, 下载插件:http://download.csdn.net/download/lml_231/8556517 ...