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语言游戏推箱子
前两天做了推箱子小游戏,看似简单的一个小游戏背后却 有巨大的秘密,这秘密就是一大堆逻辑. 自从学习了函数过后,的确是解决了很多问题,而且调用很方便,尽管我现在都不是很会调用. 写完一个函数,准备测试一 ...
随机推荐
- Kubernetes CNI网络插件
CNI 容器网络接口,就是在网络解决方案由网络插件提供,这些插件配置容器网络则通过CNI定义的接口来完成,也就是CNI定义的是容器运行环境与网络插件之间的接口规范.这个接口只关心容器的网络连接,在创建 ...
- Vue-cli构建spa应用
2.1 VUE-cli构建spa应用 npm install -g vue-cli Vue init webpack-simple demo vue init webpack demo2 如果在项目目 ...
- c# 根据域名的到对应的IP
今天做了域名解析,由于项目里要用到域名对应的ip 所以做了这个小程序 private void button_Net_Click(object sender, EventArgs e) ...
- JavaWeb 文件的上传、下载
文件上传 表单 <form action="HandlerServlet" method="post" enctype="multipart/f ...
- 服务刚启动就 Old GC，要闹哪样？
1.背景 最近有个同学说他的服务刚启动就收到两次 Full GC 告警, 按道理来说刚启动,对象应该不会太多,为啥会触发 Full GC 呢? 带着疑问,我们还是先看看日志吧,毕竟日志的信息更多. 2 ...
- CHAR与VARCHAR详解
前言: 前面写过一篇介绍int类型的文章,一直想写一篇介绍字符串字段类型的文章,一直拖着也没思路要怎么下手.最近多关注了下这方面的文章,决定还是把拖了好久的文章了结了吧.本篇文章主要会介绍字符串类型 ...
- 十六、python面向对象基础篇
面向对象基础: 在了解面向对象之前,先了解下变成范式: 编程范式是一类典型的编程风格,是一种方法学 编程范式决定了程序员对程序执行的看法 oop中,程序是一系列对象的相互作用 python支持多种编程 ...
- 并发编程 || Java线程详解
通用线程模型 在很多研发当中,实际应用是基于一个理论再进行优化的.所以,在了解JVM规范中的Java线程的生命周期之前,我们可以先了解通用的线程生命周期,这有助于我们后续对JVM线程生命周期的理解. ...
- Kdevelop的安装-2种方法
使用 Ubuntu 的自带的源: sudo apt-get update sudo apt-get install kdevelop 这就可以了.update这部,假如不换源,更新非常慢.换源方法很简 ...
- Spring-Data-Redis 入门学习
Spring-Data-Redis 入门学习 参考文章: https://www.jianshu.com/p/4a9c2fec1079 导入 redis 相关依赖 <dependency> ...