<head>
<meta charset="utf-8" />
<title></title>
<script>
//创建地图
var arr=[
[,,,,,,,,,,,,,,],
[,,,,,,,,,,,,,,],
[,,,,,,,,,,,,,,],
[,,,,,,,,,,,,,,],
[,,,,,,,,,,,,,,],
[,,,,,,,,,,,,,,],
[,,,,,,,,,,,,,,],
[,,,,,,,,,,,,,,],
[,,,,,,,,,,,,,,],
[,,,,,,,,,,,,,,],
[,,,,,,,,,,,,,,],
[,,,,,,,,,,,,,,]
];
</script>
<style>
#box>div{
float: left;
background-repeat: no-repeat;
background-size: %;
}
</style>
</head>
<body>
<div id="box"></div>
</body> <script> //人物的坐标
let x, y; //判断是否结束,当地图中没有箱子就表示通关了
function falg(){
for(let i=; i<arr.length; i++){
for(let j=; j<arr[i].length; j++){
if(arr[i][j]==){
return false;
}
}
}
return true;
} //求人物坐标
function getPersonXY(){
for(let i=; i<arr.length; i++){
for(let j=; j<arr[i].length; j++){
if(arr[i][j]==){
x = i;
y = j;
return;
}
}
}
} //创建元素
function createEl(e){
//创建一个div元素
var div = document.createElement("div");
//给元素设置宽高
div.style.width = "50px";
div.style.height = "50px";
switch(e){
case :
//空白
div.style.backgroundImage = "url(./img/blank.jpg)";
break;
case :
//墙
div.style.backgroundImage = "url(./img/wall.jpg)";
break;
case :
//箱子
div.style.backgroundImage = "url(./img/box.jpg)";
break;
case :
//目的地
div.style.backgroundImage = "url(./img/des.jpg)";
break;
case :
//占位
div.style.backgroundImage = "url(./img/over_box.jpg)";
break;
case :
//人物
div.style.backgroundImage = "url(./img/player.jpg)";
break;
}
return div;
} //画图
function draw(){
//获得地图容器
var box = document.getElementById("box");
//清空容器
box.innerHTML = "";
box.style.width = *arr[].length+"px"
//遍历地图
for(let i=; i<arr.length; i++){
for(let j=; j<arr[i].length; j++){
box.appendChild(createEl(arr[i][j]));
}
}
} //temp是保存的是上一个点的状态,默认是空白0
let tmp = ;
window.onload = function(){
//查询人物坐标,给x,y赋值
getPersonXY();
//画图
draw();
//键盘按下事件
document.onkeydown = function(e){
switch(e.keyCode){
case :
case :
//左 0 : 空白 , 1:墙, 2:箱子 , 3 :目标位子 , 4 :占位 , 5 七星瓢虫
if(arr[x][y-]==|| //左边第一个墙
(arr[x][y-] == && arr[x][y-] ==) ||
(arr[x][y-] == && arr[x][y-] ==) ||
(arr[x][y-] == && arr[x][y-] ==) ||
(arr[x][y-] == && arr[x][y-] ==) ||
(arr[x][y-] == && arr[x][y-] ==) ||
(arr[x][y-] == && arr[x][y-] ==)
){
return;
}
if(arr[x][y-]==){ //左边是空白 , 左边变成七星瓢虫
arr[x][y-] = ;
arr[x][y] = tmp; //给当前坐标赋值为系统保存的状态值
tmp = ; //记录x不变,y减少1后,的坐标是什么值
}else if(arr[x][y-]==){
if(arr[x][y-]==){ //左边是箱子,箱子的左边是目标位子,那么目标位子变成占位
arr[x][y-] =
}else if(arr[x][y-] == ){ //左边是箱子,箱子的左边是空白,空白就变成箱子了
arr[x][y-] = ;
}
arr[x][y-] = ; //左边变成七星瓢虫,
arr[x][y] = tmp;
tmp = ;
}else if(arr[x][y-]==){//左边是目标位置,
arr[x][y-] = ;
arr[x][y] = tmp;
tmp = ;
}else if(arr[x][y-]==){ //左边是占位
if(arr[x][y-]==){ //左边的左边是空白
arr[x][y-] = ;
}else if(arr[x][y-] == ){//左边的左边是目标位置
arr[x][y-] = ;
}
arr[x][y-]=;
arr[x][y] = tmp;
tmp = ;
}
y--;
break;
case :
case :
//右
if( arr[x][y+]==||
(arr[x][y+] == && arr[x][y+] ==) ||
(arr[x][y+] == && arr[x][y+] ==) ||
(arr[x][y+] == && arr[x][y+] ==) ||
(arr[x][y+] == && arr[x][y+] ==) ||
(arr[x][y+] == && arr[x][y+] ==) ||
(arr[x][y+] == && arr[x][y+] ==)
){
return;
}
if(arr[x][y+]==){
arr[x][y+] = ;
arr[x][y] = tmp;
tmp = ;
}else if(arr[x][y+]==){
if(arr[x][y+]==){
arr[x][y+] =
}else{
arr[x][y+] = ;
}
arr[x][y+] = ;
arr[x][y] = tmp;
tmp = ;
}else if(arr[x][y+]==){
arr[x][y+] = ;
arr[x][y] = tmp;
tmp = ;
}else if(arr[x][y+]==){
if(arr[x][y+]==){
arr[x][y+] = ;
}else{
arr[x][y+] = ;
}
arr[x][y+]=;
arr[x][y] = tmp;
tmp = ;
}
y++;
break;
case :
case :
//上
if( arr[x-][y]==||
(arr[x-][y] == && arr[x-][y] ==) ||
(arr[x-][y] == && arr[x-][y] ==) ||
(arr[x-][y] == && arr[x-][y] ==) ||
(arr[x-][y] == && arr[x-][y] ==) ||
(arr[x-][y] == && arr[x-][y] ==) ||
(arr[x-][y] == && arr[x-][y] ==)
){
return;
}
if(arr[x-][y]==){
arr[x-][y] = ;
arr[x][y] = tmp;
tmp = ;
}else if(arr[x-][y]==){
if(arr[x-][y]==){
arr[x-][y] =
}else{
arr[x-][y] = ;
}
arr[x-][y] = ;
arr[x][y] = tmp;
tmp = ;
}else if(arr[x-][y]==){
arr[x-][y] = ;
arr[x][y] = tmp;
tmp = ;
}else if(arr[x-][y]==){
if(arr[x-][y]==){
arr[x-][y] = ;
}else{
arr[x-][y] = ;
}
arr[x-][y]=;
arr[x][y] = tmp;
tmp = ;
}
x--;
break;
case :
case :
//下
if( arr[x+][y]==||
(arr[x+][y] == && arr[x+][y] ==) ||
(arr[x+][y] == && arr[x+][y] ==) ||
(arr[x+][y] == && arr[x+][y] ==) ||
(arr[x+][y] == && arr[x+][y] ==) ||
(arr[x+][y] == && arr[x+][y] ==) ||
(arr[x+][y] == && arr[x+][y] ==)
){
return;
}
if(arr[x+][y]==){
arr[x+][y] = ;
arr[x][y] = tmp;
tmp = ;
}else if(arr[x+][y]==){
if(arr[x+][y]==){
arr[x+][y] =
}else{
arr[x+][y] = ;
}
arr[x+][y] = ;
arr[x][y] = tmp;
tmp = ;
}else if(arr[x+][y]==){
arr[x+][y] = ;
arr[x][y] = tmp;
tmp = ;
}else if(arr[x+][y]==){
if(arr[x+][y]==){
arr[x+][y] = ;
}else{
arr[x+][y] = ;
}
arr[x+][y]=;
arr[x][y] = tmp;
tmp = ;
}
x++;
break;
}
//画图
draw();
setTimeout(function(){
if(falg()){
alert("恭喜闯关成功");
}
},);
}
} </script>

图片资源

js推箱子的更多相关文章

  1. JS推箱子游戏

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

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

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

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

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

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

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

  5. jQuery版推箱子游戏详解和源码

    前言 偶然间看到很多用js写游戏的感觉很炫酷的样子,所以就想试试,就看了一些资料和某前端站点的视屏.于是乎就自己动手实践了一下,上推箱子截图 感觉很丑陋,但是功能是实现了.再说貌似大多都是这样的吧,这 ...

  6. javascript 推箱子游戏介绍及问题

    最近没什么事情,我的一个亲戚在学校学习PHP,课程中老师让他们编写一个javascript版本的推箱子小游戏,他没什么头绪,就来问我,我当时很闲,就随口答应他包在我身上.结果真正写的时候还是花了点时间 ...

  7. JavaScript 推箱子游戏

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

  8. OC推箱子

    #include<stdio.h> #include<stdlib.h> int main(void) { char sr;//存储用户输入的指令 //绘制地图 char a[ ...

  9. c语言游戏推箱子

    前两天做了推箱子小游戏,看似简单的一个小游戏背后却 有巨大的秘密,这秘密就是一大堆逻辑. 自从学习了函数过后,的确是解决了很多问题,而且调用很方便,尽管我现在都不是很会调用. 写完一个函数,准备测试一 ...

随机推荐

  1. 【转载】C#的ArrayList使用IndexOf方法查找第一个符合条件的元素位置

    在C#的编程开发中,ArrayList集合是一个常用的非泛型类集合,在ArrayList集合中如果需要查找第一个符合条件的元素所在的位置,可以使用ArrayList集合的IndexOf方法,Index ...

  2. iOS编程

    一.语法 1. performSelector 2.

  3. Codeforces J. Soldier and Number Game(素数筛)

    题目描述: Soldier and Number Game time limit per test 3 seconds memory limit per test 256 megabytes inpu ...

  4. djabgo 中间件

    1.中间件是发生在request和response 之间,都会经过中间键, 上述截图中的中间件都是django中的,我们也可以自己定义一个中间件,我们可以自己写一个类,但是必须继承Middleware ...

  5. 套接字编程(TCP)

    json模块补充 json保存的格式中,key值一定要用双引号隔开 import json #把字典转成json格式字符串 dic = {'name': 'lqz', 'xx': False, 'yy ...

  6. @Path注解

    最近用到的一个项目,看到Controller控制层.Method方法都是通篇的@Path注解,由于之前并没有使用过该注解,故记此篇. 首先看一下项目中的使用方式: @Path("client ...

  7. 第二章python中的一切皆对象

    1.函数和类也是对象,属于python的一等公民 赋值给一个变量 可以添加到集合对象之中 可以作为参数传递给函数 可以当作函数的返回值 def ask(name="ask_wzh" ...

  8. python相对导包问题

    导包分为:绝对路径.相对路径 在测试时发现不能够使用相对路径 查过之后才知道: 运行模块(如:main.py)中导包只能使用绝对路径,不能使用相对路径 官方文档: Note that relative ...

  9. WebForm 打开默认页

    原文:https://www.cnblogs.com/lionden/p/3728716.html <configuration> <system.webServer> < ...

  10. RE:SB的SDOISB记

    Day0 到了农大 进门看见hly 和myj一起乱%一通 一本爷的气场就是强大 晚上gryz搬砖三人组出去吃饭,开心>_< 吃完饭后去试机 手速比较快,写了一下ntt,lct,sa和一些小 ...