JS推箱子游戏
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<canvas id=dt width="560" height="560"></canvas>
<script>
[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";
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"
{
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);
}
}
}
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推箱子游戏的更多相关文章
- 用HTML5+原生js实现的推箱子游戏
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- three.js 制作一个三维的推箱子游戏
今天郭先生发现大家更喜欢看我发的three.js小作品,今天我就发一个3d版本推箱子的游戏,其实webGL有很多框架,three.js并不合适做游戏引擎,但是可以尝试一些小游戏.在线案例请点击博客原文 ...
- JavaScript写一个小乌龟推箱子游戏
推箱子游戏是老游戏了, 网上有各种各样的版本, 说下推箱子游戏的简单实现,以及我找到的一些参考视频和实例: 推箱子游戏的在线DEMO : 打开 如下是效果图: 这个拖箱子游戏做了移动端的适配, 我使用 ...
- JavaScript 推箱子游戏
推箱子游戏的 逻辑非常简单,但是如果不动手的话,还是不太清楚.我在这里讲一下自己的思路. 制作推箱子,首先要有自己的设计素材.如下我也是网上找的素材 第二步,理清游戏的规则. 游戏规则: 1.小人将箱 ...
- C# 推箱子游戏&对战游戏
推箱子游戏提纲,只有向右向上的操作,向左向下同理,后期需完善. namespace 推箱子 { class Program { static void Main(string[] args) { // ...
- 【CCpp程序设计2017】推箱子游戏
我的还……支持撤销!用链表实现! 题目:推箱子小游戏(基于console) 功能要求: 将p09迷宫游戏改造为“推箱子”游戏: 在地图中增加箱子.箱子目标位置等图形: 当玩家将所有箱子归位,则显示玩家 ...
- 用C写一个简单的推箱子游戏（二）
下面接着上一篇随笔<用C写一个简单的推箱子游戏(一)>来写 tuidong()函数是用来判断游戏人物前方情况的函数,是推箱子游戏中非常重要的一个函数,下面从它开始继续介绍推箱子的小程序怎么 ...
- 用C写一个简单的推箱子游戏（一）
我现在在读大二,我们有一门课程叫<操作系统>,课程考查要求我们可以写一段程序或者写Windows.iOS.Mac的发展历程.后面我结合网上的资料参考,就想用自己之前简单学过的C写一关的推箱 ...
- C语言实现推箱子游戏完整代码
C语言实现推箱子游戏完整代码 前言 自己做的,可能有些代码不够工整,或者有些小问题,但游戏的基本操作是可以实现的 代码效果 代码一共分为8个部分,4个控制上下左右移动,2个判断输赢,1个统计归为的个数 ...
随机推荐
- [bzoj4568] [loj#2013] [Scoi2016] 幸运数字
Description \(A\) 国共有 \(n\) 座城市,这些城市由 \(n-1\) 条道路相连,使得任意两座城市可以互达,且路径唯一.每座城市都有一个幸运数字,以纪念碑的形式矗立在这座城市的正 ...
- [uoj#34] [洛谷P3803] 多项式乘法(FFT)
新技能--FFT. 可在 \(O(nlogn)\) 时间内完成多项式在系数表达与点值表达之间的转换. 其中最关键的一点便为单位复数根,有神奇的折半性质. 多项式乘法(即为卷积)的常见形式: \[ C_ ...
- PHP——数组
数组的定义 数组能够在单个变量中存储多个值. 创建空数组: $arr = array();//表示创建一个空数组,并把创建的空数组赋值给变量$arr 数值数组 自动分配 ID 键(ID 键总是从 0 ...
- 「 扫盲 」Web服务器和应用服务器的区别
我们经常使用apache,tomcat,nginx,jetty等服务器,但并不清楚它们间的区别,它们中,哪些是Web服务器,哪些是应用服务器?今天就来告诉你 Web服务器 理解WEB服务器,首先你要理 ...
- 【中文乱码】深入分析 Java Web 中的中文编码问题
深入分析 Java Web 中的中文编码问题 1.几种常见的编码格式 1.1 为什么要编码 在计算机中存储信息的最小单元是 1 个字节,即 8 个 bit, 所以能表示的字符范围是 0 ~ 255 个 ...
- JAVA WebSocket 使用时需要注意的地方
最近在做一个项目,需要用WebSocket与另外一个平台建立通讯,来获取项目业务需要的实时数据,因此项目一启动,后台就要与另外一个平台建立WebSocket连接并且要保证他们的之间有且只有一条持续畅通 ...
- Kdenlive-开始
版权声明:原创文章,未经博主允许不得转载 这是 Kdenlive 系列文章的第一篇 说明 在 Linux 下的视频编辑的软件并不多,作为其中之一的 kdenlive 在网上的教程就更少了.于是自己琢磨 ...
- xpath写法大全（适用于selenium、robotframework）
1.//input[contains(@id, 'txttags')] 定位出来是个ID,但是ID后面的“102”是个随机数,所以用定位ID的方法就不行了,用firepath生成的xpath也会包括这 ...
- jmeter使用—响应断言
断言的作用:一个HTTP请求发出去,怎么判断执行的任务是否成功呢?通过检查服务器响应数据,是否返回预期想要的数据,如果是,判断任务成功,反之任务失败. 1.添加断言:选中一个取样器,右键->添加 ...
- SpringBoot任务篇Ⅴ --- 异步任务、定时任务、邮件任务
Java的任务在项目中需要用到的地方很多,比如,每月月末的财务报表给财务部门,定时给领导发个邮件短信等等.这时候我们就需要用到任务了,任务调度本身涉及到多线程并发.运行时间规则制定和解析.场景保持与恢 ...