js推箱子
<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推箱子的更多相关文章
- JS推箱子游戏
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Inse ...
- 用HTML5+原生js实现的推箱子游戏
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- three.js 制作一个三维的推箱子游戏
今天郭先生发现大家更喜欢看我发的three.js小作品,今天我就发一个3d版本推箱子的游戏,其实webGL有很多框架,three.js并不合适做游戏引擎,但是可以尝试一些小游戏.在线案例请点击博客原文 ...
- JavaScript写一个小乌龟推箱子游戏
推箱子游戏是老游戏了, 网上有各种各样的版本, 说下推箱子游戏的简单实现,以及我找到的一些参考视频和实例: 推箱子游戏的在线DEMO : 打开 如下是效果图: 这个拖箱子游戏做了移动端的适配, 我使用 ...
- jQuery版推箱子游戏详解和源码
前言 偶然间看到很多用js写游戏的感觉很炫酷的样子,所以就想试试,就看了一些资料和某前端站点的视屏.于是乎就自己动手实践了一下,上推箱子截图 感觉很丑陋,但是功能是实现了.再说貌似大多都是这样的吧,这 ...
- javascript 推箱子游戏介绍及问题
最近没什么事情,我的一个亲戚在学校学习PHP,课程中老师让他们编写一个javascript版本的推箱子小游戏,他没什么头绪,就来问我,我当时很闲,就随口答应他包在我身上.结果真正写的时候还是花了点时间 ...
- JavaScript 推箱子游戏
推箱子游戏的 逻辑非常简单,但是如果不动手的话,还是不太清楚.我在这里讲一下自己的思路. 制作推箱子,首先要有自己的设计素材.如下我也是网上找的素材 第二步,理清游戏的规则. 游戏规则: 1.小人将箱 ...
- OC推箱子
#include<stdio.h> #include<stdlib.h> int main(void) { char sr;//存储用户输入的指令 //绘制地图 char a[ ...
- c语言游戏推箱子
前两天做了推箱子小游戏,看似简单的一个小游戏背后却 有巨大的秘密,这秘密就是一大堆逻辑. 自从学习了函数过后,的确是解决了很多问题,而且调用很方便,尽管我现在都不是很会调用. 写完一个函数,准备测试一 ...
随机推荐
- 解决securecrt连接慢(而xshell秒连)的问题
打开securecrt的跟踪选项,观察输出信息来诊断 解决方法: 1)首先,将全局设置中,GSSAPI属性由自动改为GSSAPI 2)其次,将不支持的多余的密钥交换去掉 3)最后,可以将服务端 ...
- scrapy-redis 0.6.8 配置信息
很多博客的db参数配置都不能用,所以记录一下该版本可用的配置 #启用Redis调度存储请求队列 SCHEDULER = "scrapy_redis.scheduler.Scheduler&q ...
- HDU4747：Mex（线段树区间修改）
传送门 题意: 给出\(n\)个数,然后求\(\sum_{i=1}^n\sum_{j=i}^nmex(i,j)\).\(mex(i,j)\)表示区间\([i,j]\)的\(mex\). 思路: 考虑枚 ...
- socket套接字及粘包问题
socket套接字 1.什么是socket socket是一个模块,又称套接字,用来封装互联网协议(应用层以下的层) 2.为什么要有socket 实现应用层以下的层的工作,提高开发效率 3.怎么使用s ...
- 【reactNative 大杂烩 好文章汇总 】
1. React Native之打包 https://blog.csdn.net/xiangzhihong8/article/details/70162784
- Git创建与简单使用
一. 服务器端 创建空的仓库(以项目tm201为例) 1. git账户登录 2. 新建仓库目录 mkdir tm101.git && cd tm201.git 3. git初始化新的空 ...
- celery异步任务、定时任务
阅读目录 一 什么是Celery? 二 Celery的使用场景 三 Celery的安装配置 四 Celery异步任务 五Celery定时任务 六在Django中使用Celery 一 什么是Cele ...
- Arduino读取ph试剂浓度
https://detail.tmall.com/item.htm?id=600904840315&spm=a1z09.2.0.0.31cd2e8d1sb06V&_u=e1qf7bf5 ...
- Java中HTTP网络传输中文编码问题
Java中HTTP网络传输中文编码问题 1.java中new String(str.getBytes("utf-8"),"iso-8859-1")编码详解 前提 ...
- First Chance Exception是什么？
是否调试过应用程序并在输出窗口中看到有关“First Chance”异常的消息?有没有想过: 什么是First Chance Exception? 第一次机会异常是否意味着我的代码中存在问题? 在调试 ...