效果图
Paste_Image.png
资料图片
player10.png
player11.png
player12.png
wall.png
background.png
box.png
dest.png
player1.png
player2.png
player3.png
player4.png
player5.png
player6.png
player7.png
player8.png
player9.png
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0 auto;
padding: 0;
}
#screen{
width: 290px;
height: 290px;
background: url(background.png);
border: 3px solid black;
position: relative;
}
#girl{
width: 27px;
height: 27px;
background: url("player1.png");
position: absolute;
-webkit-background-size: 27px;
background-size: 27px;
left: 88px;
top: 117px;
}
#score{
width: 100px;
height: 20px;
/*background-color: blue;*/
color: red;
position: absolute;
right: 0px;
top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="screen">
<div id="girl"></div>
<div id="score">步数：0</div>
</div>
<script type="text/javascript">
// 获取分数节点
var jsScore = document.getElementById("score");
// 获取屏幕节点
var jsScreen = document.getElementById("screen");
// 获取小人节点
var jsGirl = document.getElementById("girl");
var arrBrick = new Array();
var arrBox = new Array();
var arrRedPoint = new Array();
console.log(arrBox);
// 创建小人对象
function Girl(){
this.div = jsGirl;
}
var girl = new Girl();
// 让小人移动
var speed = 29;
var count = 0;
var score = 0;
document.onkeydown = function(e){
var evt = e || window.event;
// 将分数写进HTML
switch(evt.keyCode){
case 37:
jsGirl.style.left = jsGirl.offsetLeft - speed + "px";
for(var i in arrBox){
if (brick1.crashExamine.call(arrBox[i],girl)) {
arrBox[i].div.style.left = (girl.div.offsetLeft -arrBox[i].div.offsetWidth - 2) + "px";
}
}
// 检测小木箱撞左边墙
for(var j in arrBrick ){
for(var k in arrBox){
if (arrBrick[j].crashExamine(arrBox[k])) {
// 小木箱撞到墙后木箱停下来
arrBox[k].div.style.left = (arrBrick[j].div.offsetLeft +arrBrick[j].div.offsetWidth + 1)+ "px";
// 小木箱撞到墙后人停下
jsGirl.style.left = (arrBrick[j].div.offsetLeft +arrBrick[j].div.offsetWidth + 3 + 27)+ "px";
}
}
}
// 检测人撞墙后停下
for(var j in arrBrick){
if (arrBrick[j].crashExamine(girl)) {
// 小人撞到墙后木箱停下来
girl.div.style.left = (arrBrick[j].div.offsetLeft +arrBrick[j].div.offsetWidth + 1)+ "px";
}
}
// 检测箱子撞到箱子后停下
for(var j in arrBox ){
for(var k in arrBox){
if (brick1.crashExamine.call(arrBox[j],arrBox[k])&&(j != k)) {
arrBox[j].div.style.left = (arrBox[k].div.offsetLeft + 27 + 2)+ "px";
girl.div.style.left = (arrBox[k].div.offsetLeft + 27 + 27 + 4)+ "px";
}
}
}
count = 1;
score++;
break;
// =====================左==========================================
case 38:
jsGirl.style.top = jsGirl.offsetTop - speed + "px";
count = 2;
for(var i in arrBox){
if (brick1.crashExamine.call(arrBox[i],girl)) {
arrBox[i].div.style.top = (girl.div.offsetTop -arrBox[i].div.offsetHeight - 2) + "px";
}
}
// 检测小木箱撞上边墙
for(var j in arrBrick ){
for(var k in arrBox){
if (arrBrick[j].crashExamine(arrBox[k])) {
arrBox[k].div.style.top = (arrBrick[j].div.offsetTop + arrBrick[j].div.offsetHeight + 1)+ "px";
jsGirl.style.top = (arrBrick[j].div.offsetTop +arrBrick[j].div.offsetHeight + 3 + 27)+ "px";
}
}
}
// 检测人撞墙后停下
for(var j in arrBrick){
if (arrBrick[j].crashExamine(girl)) {
// 小人撞到墙后木箱停下来
girl.div.style.top = (arrBrick[j].div.offsetTop + arrBrick[j].div.offsetHeight + 1)+ "px";
}
}
// 检测箱子撞到箱子后停下
for(var j in arrBox ){
for(var k in arrBox){
if (brick1.crashExamine.call(arrBox[j],arrBox[k])&&(j != k)) {
arrBox[j].div.style.top = (arrBox[k].div.offsetTop + 27 + 2)+ "px";
girl.div.style.top = (arrBox[k].div.offsetTop + 27 + 27 +4)+ "px";
}
}
}
score++;
break;
// ===================================上===================================
case 39:
jsGirl.style.left = jsGirl.offsetLeft + speed + "px";
count = 3;
for(var i in arrBox){
if (brick1.crashExamine.call(arrBox[i],girl)) {
arrBox[i].div.style.left = (girl.div.offsetLeft + girl.div.offsetWidth + 2) + "px";
}
}
// 检测小木箱撞右边墙
for(var j in arrBrick ){
for(var k in arrBox){
if (arrBrick[j].crashExamine(arrBox[k])) {
arrBox[k].div.style.left = (arrBrick[j].div.offsetLeft - 27 -1)+ "px";
jsGirl.style.left = (arrBrick[j].div.offsetLeft - 3 - 27 - 27)+ "px";
}
}
}
// 检测人撞墙后停下
for(var j in arrBrick){
if (arrBrick[j].crashExamine(girl)) {
// 小人撞到墙后木箱停下来
girl.div.style.left = (arrBrick[j].div.offsetLeft - 27 -1)+ "px";
}
}
// 检测箱子撞到箱子后停下
for(var j in arrBox ){
for(var k in arrBox){
if (brick1.crashExamine.call(arrBox[j],arrBox[k])&&(j != k)) {
arrBox[j].div.style.left = (arrBox[k].div.offsetLeft - 27 - 2)+ "px";
// jsGirl.style.left = (arrBox[k].div.offsetLeft - 27 - 3 - 27)+ "px";
girl.div.style.left = (arrBox[k].div.offsetLeft - 27 - 27 -4)+ "px";
}
}
}
score++;
break;
// =====================================右=========================================
case 40:
jsGirl.style.top = jsGirl.offsetTop + speed + "px";
count = 4;
for(var i in arrBox){
if (brick1.crashExamine.call(arrBox[i],girl)) {
arrBox[i].div.style.top = (girl.div.offsetTop + girl.div.offsetHeight + 2) + "px";
}
}
// 检测小木箱撞下边墙
for(var j in arrBrick ){
for(var k in arrBox){
if (arrBrick[j].crashExamine(arrBox[k])) {
arrBox[k].div.style.top = (arrBrick[j].div.offsetTop - 27 -1)+ "px";
jsGirl.style.top = (arrBrick[j].div.offsetTop - 27 - 27 - 3) + "px";
}
}
}
for(var j in arrBrick){
if (arrBrick[j].crashExamine(girl)) {
// 小人撞到墙后木箱停下来
girl.div.style.top = (arrBrick[j].div.offsetTop - 27 -1)+ "px";
}
}
// 检测箱子撞到箱子后停下
for(var j in arrBox ){
for(var k in arrBox){
if (brick1.crashExamine.call(arrBox[j],arrBox[k])&&(j != k)) {
arrBox[j].div.style.top = (arrBox[k].div.offsetTop - 27 - 2)+ "px";
girl.div.style.top = (arrBox[k].div.offsetTop - 27 - 27 -4)+ "px";
}
}
}
score++;
break;
// =======================================下=============================================
}
// 让小人动起来
var picNum = 1;
var timer = setInterval(function(){
if (count == 4) {
jsGirl.style.background = "url(player" + picNum + ".png)";
jsGirl.style.backgroundSize = "27px 27px";
}
if (count == 1) {
jsGirl.style.background = "url(player" + (picNum + 3) + ".png)";
jsGirl.style.backgroundSize = "27px 27px";
}
if (count == 2) {
jsGirl.style.background = "url(player" + (picNum + 6) + ".png)";
jsGirl.style.backgroundSize = "27px 27px";
}
if (count == 3) {
jsGirl.style.background = "url(player" + (picNum + 9) + ".png)";
jsGirl.style.backgroundSize = "27px 27px";
}
if (picNum == 3) {
picNum = 1;
}
picNum++;
}, 67);
// 碰撞检测
jsScore.innerHTML = "步数：" + score;
// =====================检测小球与箱子重合==========================================
for(var i in arrRedPoint){
arrRedPoint[i]["checked"] = false;
for(var j in arrBox){
if(brick1.crashExamine.call(arrRedPoint[i],arrBox[j])){
arrRedPoint[i]["checked"] = true;
arrRedPoint[i].div.style.display = "none";
if (arrRedPoint[0]["checked"]&&arrRedPoint[1]["checked"]&&arrRedPoint[2]["checked"]&&arrRedPoint[3]["checked"]) {
console.log("gameover");
}
};
};
};
}
// 创建砖的构造函数
function Brick(top,left){
this.width = "29px";
this.height = "29px";
this.background = "url(wall.png)"
this.top = top;
this.left = left;
this.div = document.createElement("div");
};
Brick.prototype = {
position : "absolute",
initPositin : function(){
this.div.style.top = this.top;
this.div.style.left = this.left;
this.div.style.width = this.width;
this.div.style.height = this.height;
this.div.style.background = this.background;
this.div.style.position = this.position;
jsScreen.appendChild(this.div);
},
crashExamine: function(obj2) {
var obj1Left = this.div.offsetLeft;
var obj1Width = this.div.offsetLeft + this.div.offsetWidth;
var obj1Top = this.div.offsetTop;
var obj1Height = this.div.offsetTop + this.div.offsetHeight;
var obj2Left = obj2.div.offsetLeft;
var obj2Width = obj2.div.offsetLeft + obj2.div.offsetWidth;
var obj2Top = obj2.div.offsetTop;
var obj2Height = obj2.div.offsetTop + obj2.div.offsetHeight;
if ( !(obj1Left > obj2Width || obj1Width < obj2Left || obj1Top > obj2Height || obj1Height < obj2Top) ) {
return true;
}
return false;
},
crashExamine1: function(obj2) {
var obj1Left = this.div.offsetLeft;
var obj1Width = this.div.offsetLeft + this.div.offsetWidth;
var obj1Top = this.div.offsetTop;
var obj1Height = this.div.offsetTop + this.div.offsetHeight;
var obj2Left = obj2.div.offsetLeft;
var obj2Width = obj2.div.offsetLeft + obj2.div.offsetWidth;
var obj2Top = obj2.div.offsetTop;
var obj2Height = obj2.div.offsetTop + obj2.div.offsetHeight;
if ( obj1Left < obj2Width) {
return 1;
}
if (obj1Width < obj2Left) {
return 2;
}
if (obj1Top > obj2Height) {
return 3;
}
if (obj1Height < obj2Top) {
return 4;
}
},
}
// 创建箱子函数
function Box(top,left){
this.width = "27px";
this.height = "27px";
this.background = "url(box.png)"
this.position = "absolute";
this.top = top;
this.left = left;
this.div = document.createElement("div");
};
// 创建红点函数
function RedPoint(top,left){
this.width = "19px";
this.height = "20px";
this.background = "url(dest.png)"
this.position = "absolute";
this.top = top;
this.left = left;
this.div = document.createElement("div");
};
// 第一排
var brick1 = new Brick("0px","87px");
var brick2 = new Brick("0px","116px");
var brick3 = new Brick("0px","145px");
// 第二排
var brick4 = new Brick("29px","58px");
var brick5 = new Brick("29px","145px");
// 第san排
var brick6 = new Brick("58px","58px");
var brick7 = new Brick("58px","145px");
// 第四排
var brick8 = new Brick("87px","29px");
var brick9 = new Brick("87px","58px");
var brick10 = new Brick("87px","145px");
var brick11 = new Brick("87px","174px");
var brick12 = new Brick("87px","203px");
var brick13 = new Brick("87px","232px");
var brick14 = new Brick("87px","261px");
// 第五排
var brick15 = new Brick("116px","0px");
var brick16 = new Brick("116px","261px");
// 第六排
var brick17 = new Brick("145px","0px");
var brick18 = new Brick("145px","58px");
var brick19 = new Brick("145px","203px");
var brick20 = new Brick("145px","232px");
var brick21 = new Brick("145px","261px");
// 第七排
var brick22 = new Brick("174px","0px");
var brick23 = new Brick("174px","116px");
var brick24 = new Brick("174px","203px");
// 第八排
var brick25 = new Brick("203px","0px");
var brick26 = new Brick("203px","29px");
var brick27 = new Brick("203px","116px");
var brick28 = new Brick("203px","203px");
// 第九排
var brick29 = new Brick("232px","58px");
var brick30 = new Brick("232px","87px");
var brick31 = new Brick("232px","116px");
var brick32 = new Brick("232px","203px");
// 第十排
var brick33 = new Brick("261px","116px");
var brick34 = new Brick("261px","145px");
var brick35 = new Brick("261px","174px");
var brick36 = new Brick("261px","203px");
// 将所有对象放进数组里面
arrBrick.push(brick1,brick2,brick3,brick4,brick5,brick6,brick7,brick8,brick9,brick10,brick11,brick12,brick13,brick14,brick15,brick16,brick17,brick18,brick19,brick20,brick21,brick22,brick23,brick24,brick25,brick26,brick27,brick28,brick29,brick30,brick31,brick32,brick33,brick34,brick35,brick36)
// 遍历所有对象，对其使用initPositin方法
for(var i in arrBrick){
arrBrick[i].initPositin();
};
// 箱子对象
var box1 = new Box("88px","88px");
var box2 = new Box("117px","146px");
var box3 = new Box("175px","88px");
var box4 = new Box("175px","146px");
arrBox.push(box1,box2,box3,box4);
//box1借用brick1的initPosition方法
brick1.initPositin.call(box1);
brick1.initPositin.call(box2);
brick1.initPositin.call(box3);
brick1.initPositin.call(box4);
// 红点对象
var redPoint1 = new RedPoint("35px","122px");
var redPoint2 = new RedPoint("120px","235px");
var redPoint3 = new RedPoint("180px","33px");
var redPoint4 = new RedPoint("237px","180px");
arrRedPoint.push(redPoint1,redPoint2,redPoint3,redPoint4);
//redPoint1借用brick1的initPosition方法
brick1.initPositin.call(redPoint1);
brick1.initPositin.call(redPoint2);
brick1.initPositin.call(redPoint3);
brick1.initPositin.call(redPoint4);
// 碰撞检测
</script>
</body>
</html>