<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id=dt width="560" height="560"></canvas>
<script>
level1=[ 
 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 [0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0], 
 [0,0,0,0,0,0,1,2,1,0,0,0,0,0,0,0], 
 [0,0,0,0,0,0,1,0,1,1,1,1,0,0,0,0], 
 [0,0,0,0,1,1,1,3,0,3,2,1,0,0,0,0], 
 [0,0,0,0,1,2,0,3,4,1,1,1,0,0,0,0], 
 [0,0,0,0,1,1,1,1,3,1,0,0,0,0,0,0], 
 [0,0,0,0,0,0,0,1,2,1,0,0,0,0,0,0], 
 [0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0], 
 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]]; 
 
dt=document.getElementById('dt')
dt.width="560";
dt.height="560";
w=32,h=32;
ctx = dt.getContext('2d')
var curMan;
var curarry= [];
curarry=level1
//定义小人位置
function point(x,y) 
{ 
    this.x=x; 
    this.y=y; 
}
var manPosition = new point(5,5);//初始化小人位置
//定义图片
block=new Image()
block.src="data:image/block.gif"
wall=new Image()
wall.src="data:image/wall.png" 
ball=new Image()
ball.src="data:image/ball.png" 
box=new Image()
box.src="data:image/box.png" 
up=new Image()
up.src="data:image/up.png" 
left=new Image()
left.src="data:image/left.png"
right=new Image()
right.src="data:image/right.png"
down=new Image()
down.src="data:image/down.png"
function init()
{
 curMan=down;
 initMap();
 initMap(curarry); 
}
//画地图
function initMap() { 
 for (m=0;m<level1.length;m++) 
    { 
        for (n=0;n<16;n++) 
        {  pic = block;
        ctx.drawImage(pic,w*m-(pic.width-w)/2,h*n-(pic.height-h),pic.width,pic.height);
          switch (level1[m][n]) 
            { 
            case 1:
                pic = wall; 
                break; 
            case 2:
                pic = ball; 
                break; 
            case 3:
                pic = box; 
                break; 
            case 4:
                pic = curMan; 
                manPosition.x=m 
                manPosition.y=n;
                break; 
            } 
            ctx.drawImage(pic,w*m-(pic.width-w)/2,h*n-(pic.height-h),pic.width,pic.height); 
        } 
    }
}
//绑定键盘：上下左右+AWDS
document.onkeydown=function(ev) 
{ 
    var p1;
    var p2;
 var keyCode = ev.keyCode;
    switch(keyCode) 
    { 
    case 37: 
      curMan=left; 
      p1=new point(manPosition.x-1,manPosition.y); 
      p2=new point(manPosition.x-2,manPosition.y);
       break; 
     case 65: 
      curMan=left; 
      p1=new point(manPosition.x-1,manPosition.y); 
      p2=new point(manPosition.x-2,manPosition.y);
       break; 
     case 38: 
       curMan=up;  
       p1=new point(manPosition.x,manPosition.y-1); 
       p2=new point(manPosition.x,manPosition.y-2);
       break; 
     case 87: 
       curMan=up;  
       p1=new point(manPosition.x,manPosition.y-1); 
       p2=new point(manPosition.x,manPosition.y-2);
       break; 
     case 39: 
       curMan=right;  
       p1=new point(manPosition.x+1,manPosition.y); 
       p2=new point(manPosition.x+2,manPosition.y);
        break; 
     case 68: 
       curMan=right;  
       p1=new point(manPosition.x+1,manPosition.y); 
       p2=new point(manPosition.x+2,manPosition.y);
        break; 
     case 40: 
       curMan=down;  
       p1=new point(manPosition.x,manPosition.y+1); 
       p2=new point(manPosition.x,manPosition.y+2);
       break; 
     case 83: 
       curMan=down;  
       p1=new point(manPosition.x,manPosition.y+1); 
       p2=new point(manPosition.x,manPosition.y+2);
       break;    
    }
   
    if(curarry[p1.x][p1.y]==1)return;//如果p1位置是墙，则不能移动
    if(curarry[p1.x][p1.y]==3)//如果p1位置是箱子，则需要考虑p2位置
    {
     if(curarry[p2.x][p2.y]==1 || curarry[p2.x][p2.y]==3)return;//如果p2位置是箱子或墙，则不能移动
     else{
      curarry[p1.x][p1.y]=4; 
            curarry[p2.x][p2.y]=3;
            if(curarry[manPosition.x][manPosition.y]==2)  //如果小人所处的位置是球
                curarry[manPosition.x][manPosition.y]=2;  //则把小人所处的位置显示为球
                else 
                curarry[manPosition.x][manPosition.y]=0;  //否则则把小人所处的位置显示为草地
                initMap(); 
                initMap(curarry);
     }
    }
    else
    {
     curarry[p1.x][p1.y]=4; //否则p1显示为小人
      if(curarry[manPosition.x][manPosition.y]==2) 
     curarry[manPosition.x][manPosition.y]=2; 
      else 
     curarry[manPosition.x][manPosition.y]=0; 
      initMap(); 
      initMap(curarry); 
    }
}
init()
</script>
</body>
</html>
 

作者：kerwin-chyl

文章链接：https:////www.cnblogs.com/kerwin-chyl

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

JS推箱子游戏的更多相关文章

  1. 用HTML5+原生js实现的推箱子游戏

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

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

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

  3. JavaScript写一个小乌龟推箱子游戏

    推箱子游戏是老游戏了, 网上有各种各样的版本, 说下推箱子游戏的简单实现,以及我找到的一些参考视频和实例: 推箱子游戏的在线DEMO : 打开 如下是效果图: 这个拖箱子游戏做了移动端的适配, 我使用 ...

  4. JavaScript 推箱子游戏

    推箱子游戏的 逻辑非常简单,但是如果不动手的话,还是不太清楚.我在这里讲一下自己的思路. 制作推箱子,首先要有自己的设计素材.如下我也是网上找的素材 第二步,理清游戏的规则. 游戏规则: 1.小人将箱 ...

  5. C# 推箱子游戏&对战游戏

    推箱子游戏提纲,只有向右向上的操作,向左向下同理,后期需完善. namespace 推箱子 { class Program { static void Main(string[] args) { // ...

  6. 【CCpp程序设计2017】推箱子游戏

    我的还……支持撤销!用链表实现! 题目:推箱子小游戏(基于console) 功能要求: 将p09迷宫游戏改造为“推箱子”游戏: 在地图中增加箱子.箱子目标位置等图形: 当玩家将所有箱子归位,则显示玩家 ...

  7. 用C写一个简单的推箱子游戏（二）

    下面接着上一篇随笔<用C写一个简单的推箱子游戏(一)>来写 tuidong()函数是用来判断游戏人物前方情况的函数,是推箱子游戏中非常重要的一个函数,下面从它开始继续介绍推箱子的小程序怎么 ...

  8. 用C写一个简单的推箱子游戏（一）

    我现在在读大二,我们有一门课程叫<操作系统>,课程考查要求我们可以写一段程序或者写Windows.iOS.Mac的发展历程.后面我结合网上的资料参考,就想用自己之前简单学过的C写一关的推箱 ...

  9. C语言实现推箱子游戏完整代码

    C语言实现推箱子游戏完整代码 前言 自己做的,可能有些代码不够工整,或者有些小问题,但游戏的基本操作是可以实现的 代码效果 代码一共分为8个部分,4个控制上下左右移动,2个判断输赢,1个统计归为的个数 ...

随机推荐

  1. mongdb角色的授权

    开启cmd窗口切换到cd D:\programs\mongoDB\bin D:\programs\mongoDB\bin>mongo MongoDB shell version v3.4.6 c ...

  2. 高通量计算框架HTCondor(五)——分布计算

    目录 1. 正文 1.1. 任务描述文件 1.2. 提交任务 1.3. 返回结果 2. 相关 1. 正文 1.1. 任务描述文件 前文提到过,HTCondor是通过condor_submit命令将提交 ...

  3. MySQL数据库之xtrabackup物理备份(一)

    前言:说到数据库备份,我们知道可以用来对数据库进行备份的工具有mysqldump.mydumer.mysqlpump等等,实际工作中,机器上的数据库不大的话,都是用mysqldump工具来备份,这些备 ...

  4. java面试| 精选基础题(3)

    每天进步一点点,距离大腿又近一步! 阅读本文大概需要6分钟 系列文章 java面试| 精选基础题(1) java面试|精选基础题(2) 1.float f=3.4;是否正确? 答:不正确,编译无法通过 ...

  5. AVL练习题——宠物收养所

    题目描述 最近,阿Q开了一间宠物收养所.收养所提供两种服务:收养被主人遗弃的宠物和让新的主人领养这些宠物.每个领养者都希望领养到自己满意的宠物,阿Q根据领养者的要求通过他自己发明的一个特殊的公式,得出 ...

  6. AI领域有什么职业？怎样才能在AI领域找到工作？

    AI领域是一个很吃香的行业,在这个行业中,很多人都是高薪的,而且有些学生为了以后能够接触到这个行业,都在大学的时候,学习这个专业,那么大家知道AI领域有什么职业吗?下面我们就来给大家讲解一下. 1.算 ...

  7. 关于MySQL5.6配置文件my-default.ini不生效问题

    一.问题描述 首先,由于工作要求,需使用MySQL5.6版本(绿色版),从解压到修改root密码,一切都很顺利,但是在我要修改mysql的最大连接数的时候,出现问题了,配置不生效.完蛋.还好有万能的百 ...

  8. 爬虫之pyspider 安装

    解决方法: 利用wheel安装 S1: pip install wheelS2: 进入www.lfd.uci.edu/~gohlke/pythonlibs/,Ctrl + F查找pycurl S3:这 ...

  9. ReactNative---setState与性能的平衡

    setState用来更新RN的视图层显示,每一次setState操作都会更新整个 视图,于是对应的是性能消耗,在某些特殊情况下就会造成卡顿 app假死等问题: 因此个人使用setState中总结的原则 ...

  10. 基于 HTML5 WebGL 的智慧城市（一）

    前言 中共中央.国务院在今年12月印发了<长江三角洲区域一体化发展规划纲要>(下文简称<纲要>),并发出通知,要求各地区各部门结合实际认真贯彻落实. <纲要>强调, ...