w读者只需要 将代码中的图片添加 就可以运行这段程序 图片代表什么 代码中有注释 图片大小 均为35*35
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style type="text/css">
#wrap{
margin:50px auto;
//背景小方格 35*35
background: url("../image/bsckGreen.png");
position: relative;
}
#wrap div{
width: 35px;
height: 35px;
position: absolute;
}
#wrap div img{
position: absolute;
}
#wrap div.people img{
z-index: 2;
}
#wrap div.box img{
z-index: 1;
}
/* #wrap div img.tree{
position: absolute;
bottom: 0px;
}
#wrap div image.ball{
}*/
style>
head>
<body>
<div id="wrap">div>
<script type="text/javascript">
window.onload=function () {
Game.exe();
}
var Game={
//先找wrap
oWrap:document.getElementById("wrap"),
exe:function(){
Game.CreateWrap(Game.level);
},
//当前管卡
level:0,
size:{x:16,y:16},
CreateWrap: function(lel){
size={x:16,y:16};
Game.oWrap.style.cssText="width:"+size.x*35+"px;height:"+size.y*35+"px;";
//将将小格子变成div
for(var i=0;i<size.x*size.y;i++){
var opeople;
/* Game.oWrap.appendChild(appenddiv);*/
var x,y;
switch (Game.mapdata[lel][i]){
case 1:
//算坐标
x=i%size.x;
y=parseInt(i/size.x);
var appenddiv=document.createElement("div");
appenddiv.style.cssText="left:"+x*35+"px;top:"+y*35+"px;";
//这种image对象的方式 有一种预加载的功能 当你给他src 的时候 就会开始加载图片
var ima=new Image();
/游戏边界 树的图片
ima.src="../image/backtree.png";
appenddiv.appendChild(ima);
appenddiv.className="tree";
appenddiv.x=x;
appenddiv.y=y;
appenddiv.appendChild(ima);
Game. oWrap.appendChild(appenddiv);
break;
case 2:
x=i%size.x;
y=parseInt(i/size.x);
/*alert(x+" "+y);*/
var appenddiv=document.createElement("div");
appenddiv.x=x;
appenddiv.y=y;
appenddiv.style.cssText="left:"+x*35+"px;top:"+y*35+"px;";
var ima=new Image();
//金蛋图片
ima.src="../image/backegg.png";
appenddiv.className="ball";
appenddiv.appendChild(ima);
Game. oWrap.appendChild(appenddiv);
break;
case 3:
x=i%size.x;
y=parseInt(i/size.x);
var appenddiv=document.createElement("div");
appenddiv.x=x;
appenddiv.y=y;
appenddiv.style.cssText="left:"+x*35+"px;top:"+y*35+"px;";
var ima=new Image();
//箱子图片
ima.src="../image/backbox.png"
appenddiv.className="box";
appenddiv.appendChild(ima);
Game. oWrap.appendChild(appenddiv);
break;
case 4:
x=i%size.x;
y=parseInt(i/size.x);
var appenddiv=document.createElement("div");
appenddiv.x=x;
appenddiv.y=y;
appenddiv.style.cssText="left:"+x*35+"px;top:"+y*35+"px;";
var ima=new Image();
//推箱子的小人图片
ima.src="../image/backpeople.png"
opeople=ima;
appenddiv.className="people";
appenddiv.appendChild(ima);
Game. oWrap.appendChild(appenddiv);
opeople=ima;
break;
}
}
Game.contralPeople(opeople);
},
//控制小人
contralPeople:function(op){
//先找到opeople div
oparent=op.parentNode;
document.onkeydown=function (event) {
event=event||window.event;
var keyCode=event.keyCode;
switch(keyCode){
//往zuo走
case 37:
/*alert(Game.level);
alert(oparent.x-1+oparent.y*Game.size.x)
alert(Game.mapdata[Game.level,oparent.x-1+oparent.y*Game.size.x]);
*/
Game.movePeople({x:-1},op);
break;
//上
case 38:
Game.movePeople({y:-1},op);
break;
case 39:
Game.movePeople({x:1},op);
break;
case 40:
Game.movePeople({y:1},op);
break;
}
}
},
movePeople:function (json,op) {
//临时存放box[i]
opeople = op;
oparent = opeople.parentNode;
var box = Game.getClass(Game.oWrap, "box");
x = json.x || 0;
y = json.y || 0;
if (Game.mapdata[Game.level][oparent.x + x + (oparent.y + y) * Game.size.x] != 1) {
oparent.x = oparent.x + x;
oparent.y = oparent.y + y;
oparent.style.left = oparent.offsetLeft + x * 35 + "px";
oparent.style.top = oparent.offsetTop + y * 35 + "px";
for (var i = 0; i < box.length; i++) {
if (box[i].x == oparent.x && box[i].y == oparent.y) {
if (Game.mapdata[Game.level][box[i].x + x + (box[i].y + y) * Game.size.x] != 1) {
//检测两个箱子是否碰撞 碰撞 小人则弹回
//alert(1);
if (!Game.twoBoxJianCe(box[i], x, y)) {
//alert(2);
box[i].x = box[i].x + x;
box[i].y = box[i].y + y;
box[i].style.left = box[i].offsetLeft + x * 35 + "px";
box[i].style.top = box[i].offsetTop + y * 35 + "px";
Game.isOrNoSuccess();
} else {
oparent.x = oparent.x - x;
oparent.y = oparent.y - y;
oparent.style.left = oparent.offsetLeft - x * 35 + "px";
oparent.style.top = oparent.offsetTop - y * 35 + "px";
}
} else {
//我特么就是天才 人物弹回
oparent.x = oparent.x - x;
oparent.y = oparent.y - y;
oparent.style.left = oparent.offsetLeft - x * 35 + "px";
oparent.style.top = oparent.offsetTop - y * 35 + "px";
}
}
}
}
/*alert(box[0].x);*/
},
twoBoxJianCe: function(box,x,y){
var obox=Game.getClass(Game.oWrap,"box");
//alert(box.x);
for(var i=0;i<obox.length;i++){
//alert(obox[i].x);
if(obox[i]!=box){
if(obox[i].x==box.x+x&&obox[i].y==box.y+y){
alert(obox[i]);
//碰撞
return true;
}
}
}
//没碰撞
return false;
},
//判断
isOrNoSuccess:function(){
var ball=Game.getClass(Game.oWrap,"ball");
var box=Game.getClass(Game.oWrap,"box");
var successnum=0;
/*alert(box.length);
alert(ball.length)*/;
for(var i=0;i<box.length;i++){
for(var j=0;j<ball.length;j++){
if(box[i].x==ball[j].x&&box[i].y==ball[j].y){
successnum++;
}
}
}
/*alert(successnum);*/
if(successnum==ball.length){
alert("嘻嘻嘻 success");
}
},
//存放管卡数据
mapdata:[
//第一关管卡数据 数组下标对应一个div 1表示边界 2表示球 3是箱子 4表示小人
[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,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,],
[],
[],
[],
[],
],
getClass:function (node,classname) {
if(node.getElementsByClassName) {
return node.getElementsByClassName(classname);
//如果存在该标签 就返回
} else {
var elems = node.getElementsByTagName(node),
defualt = [];
for (var i = 0; i < elems.length; i++) {
//遍历所有标签
if(elems[i].className.indexOf(classname) != -1) {
//查找相应类名的标签
defualt[defualt.length] = elems[i];
}
}
return defualt;
}
},
};
/*
* 1.做地图
* wrap的大小规定
* */
script>
body>
html>
