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语言游戏推箱子
前两天做了推箱子小游戏,看似简单的一个小游戏背后却 有巨大的秘密,这秘密就是一大堆逻辑. 自从学习了函数过后,的确是解决了很多问题,而且调用很方便,尽管我现在都不是很会调用. 写完一个函数,准备测试一 ...
随机推荐
- 基于vue+springboot+docker网站搭建【六】安装中间件
安装中间件 去另外一台2核4G的机器先安装docker,然后安装后台项目使用的中间件 一.mysql 下载镜像:docker pull mysql:5.7 启动镜像实例:docker run -p 3 ...
- idea2019注册码
都9012年了,怎么还能忍受用低版本的编辑器呢, IntelliJ IDEA 2019破解教程拿走不谢 下载工具 Mac版idea下载链接: 链接:https://pan.baidu.com/s/1m ...
- i春秋——“百度杯”CTF比赛 十月场——Login
根据页面源码提示的 test1 test1 登录 刷新此页面并抓包,有个show=0值得关注 在发送的包的header中加一句show:1,即可得到member.php的源码 <?php inc ...
- idea万能快捷键，不可不知的17个实用技巧
说明 IDEA里有一个万能快捷键(alt enter),功能非常强大,同一个快捷键,可以根据不同的语境提示你不同的操作,很多人可能还不了解这些功能,在处理代码的时候还手动处理,了解这些技巧之后,你编码 ...
- cmd 计划任务
Schtasks /create /sc ScheduleType /tn TaskName /tr TaskRun [/s Computer [/u [Domain\]User [/p Passwo ...
- 开源许可证GPL、BSD、MIT、Mozilla、Apache和LGPL 介绍
原文地址
- 【Linux】查看程序是否正常运行
ps aux|grep redis-server ps -ef |grep redis netstat -tunple|grep 6379 netstat -lntp | grep 6379
- LeetCode 348. Design Tic-Tac-Toe
原题链接在这里:https://leetcode.com/problems/design-tic-tac-toe/ 题目: Design a Tic-tac-toe game that is play ...
- LeetCode 825. Friends Of Appropriate Ages
原题链接在这里:https://leetcode.com/problems/friends-of-appropriate-ages/ 题目: Some people will make friend ...
- Java中HTTP网络传输中文编码问题
Java中HTTP网络传输中文编码问题 1.java中new String(str.getBytes("utf-8"),"iso-8859-1")编码详解 前提 ...