<!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. Elasticsearch 开箱指南

    内容概要 ES 基础介绍,重点是其中的核心概念. 基础 API 实践操作. 1. 基础介绍 Elasticsearch (ES) 是一个数据库,提供了分布式的.准实时搜索和分析. 基于 Apache ...

  2. 【Java并发基础】使用“等待—通知”机制优化死锁中占用且等待解决方案

    前言 在前篇介绍死锁的文章中,我们破坏等待占用且等待条件时,用了一个死循环来获取两个账本对象. // 一次性申请转出账户和转入账户,直到成功 while(!actr.apply(this, targe ...

  3. [bzoj3529] [洛谷P3312] [Sdoi2014] 数表

    Description 有一张n×m的数表,其第i行第j列(1 < =i < =n,1 < =j < =m)的数值为 能同时整除i和j的所有自然数之和.给定a,计算数表中不大于 ...

  4. 60 个让程序员崩溃的瞬间,太TM真实了

    前方高能!笑死人不偿命系列~ 表演即将开始,吃东西的请停下来,不然你会后悔的 1. 公司实习生找 Bug 2. 在调试时,将断点设置在错误的位置 3. 当我有一个很棒的调试想法时 4. 偶然间看到自己 ...

  5. Excel.Application class

    https://docs.microsoft.com/en-us/javascript/api/excel/excel.application?view=office-js Represents th ...

  6. 个人第四次作业--Alpha项目测试

    这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/GeographicInformationScience 这个作业要求在哪里 https://www.cn ...

  7. Linux 查看磁盘IO并找出占用IO读写很高的进程

    背景-线上告警 线上一台服务器告警,磁盘利用率 disk.util > 90,并持续告警. 登录该服务器后通过 iostat -x 1 10 查看了相关磁盘使用信息.相关截图如下: # 如果没有 ...

  8. Git详解之内部原理

    前言 不管你是从前面的章节直接跳到了本章,还是读完了其余各章一直到这,你都将在本章见识 Git 的内部工作原理和实现方式.我个人发现学习这些内容对于理解 Git 的用处和强大是非常重要的,不过也有人认 ...

  9. 对比PXC集群与主从架构在一致性上的区别

    在上一篇文章中,已经完成了三节点PXC集群的搭建,现在搭建node3的从库node4,并且有如下测试: 搭建node3的从库,代号node4 测试1: 先断开node3节点,然后在node1构造数据, ...

  10. 20190708三人开黑CF模拟赛

    7月8号晚上8点和两位巨佬开了一场虚拟cf: [Helvetic Coding Contest 2018 online mirror (teams allowed, unrated)] 我这么蔡,只A ...