Question

我应该创建一个非常简单的JavaScript游戏，并且已经设法汇编了上面的代码。一旦红框击中目标，我想结束游戏-是否可以在不使代码过于复杂的情况下完成游戏？

在此处查看我的完整代码：http://jsfiddle.net/sumaiya786/o5jpdxrL/8/

谢谢

HTML：

<body>
<h1> Game</h1>
<div id ="container">
<div id ="character"></div>
<div id="target"></div>
</div>


<div id="buttons">
 <button  class="control-button" onClick="moveup()">UP</button><br><br>
  <button class="control-button" onClick="moveleft()">LEFT</button>
  <button class="control-button" onClick="moveright()">RIGHT</button><br><br>
  <button class="control-button" onClick="movedown()">DOWN</button>
</div>

CSS：

#container {
  width: 800px;
  height: 550px;
  position: relative;
  background-image: url(ground.png);
  opacity: 0.9;
  margin-left: auto;
  margin-right: auto;
}
#character {
  width: 80px;
  height: 80px;
  left:50px;
  top:50px;
  position: absolute;
  content:url(dog.png);
}
#target {
  width: 70px;
  height: 60px;
  position: absolute;
  right: 100px;
  bottom: 200px;
 content:url(bone.png);
}

#buttons {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    display: block;

}

.control-button {
    background-color: #189B23;
    height: 2em;
    width: 90px;
    font-size: 15px;
    color: white;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-weight: bold;
}

JavaScript：

 var up = 20;
var side = 20;


function moveup(){
  up -=20;
 document.getElementById("character").style.top = up + "px";
}

function movedown(){
up +=20;
 document.getElementById("character").style.top = up + "px";
}

function moveleft(){
side -=20;
 document.getElementById("character").style.left = side + "px";
}

function moveright(){
side +=20;
document.getElementById("character").style.left = side + "px";
}

Answer 1

希望这会对您有所帮助。发生碰撞时，我已更改了目标的颜色。将其替换为结束游戏的功能。希望这就是您想要的。

var up = 20;
var side = 20;
	
function moveup(){
  up -=20;
 document.getElementById("character").style.top = up + "px";
 isCollision(document.getElementById('character'),document.getElementById('target'))

}
	
function movedown(){
up +=20;
 document.getElementById("character").style.top = up + "px";
 isCollision(document.getElementById('character'),document.getElementById('target'))

}
	
function moveleft(){
side -=20;
 document.getElementById("character").style.left = side + "px";
 isCollision(document.getElementById('character'),document.getElementById('target'))

}
	
function moveright(){
side +=20;
document.getElementById("character").style.left = side + "px";
isCollision(document.getElementById('character'),document.getElementById('target'))
}



function isCollision(box1, box2) {

    var al = box1.offsetLeft;
    var ar = box1.offsetLeft + box1.offsetWidth;
    var bl = box2.offsetLeft;
    var br = box2.offsetLeft + box2.offsetWidth;

    var at = box1.offsetTop;
    var ab = box1.offsetTop + box1.offsetHeight;
    var bt = box2.offsetTop;
    var bb = box2.offsetTop + box2.offsetHeight;

    if (bl > ar || br < al) {
        return false;
    } 
    if (bt > ab || bb < at) {
        return false;
    }

    if (bl > al && bl < ar) {
        changecolor();
        return true;
    }
    if (br > al && br < ar) {
        changecolor();
        return true;
    }

    if (bt > at && bt < ab) {
        changecolor();
        return true;
    }
    if (bb > at && bb < ab) {
        changecolor();
        return true;
    }

    return false;
}

function changecolor() {
    document.querySelector("#target").style.backgroundColor = 'green';
}

#container {
  width: 800px;
  height: 600px;
  position: relative;
  background-color: black;
  opacity: 0.9;
  margin-left: auto;
  margin-right: auto;
}
#character {
  width: 80px;
  height: 80px;
  left:50px;
  top:50px;
  position: absolute;
  background-color: red;}
#target {
  width: 70px;
  height: 60px;
  position: absolute;
  right: 100px;
  bottom: 200px;
background-color: aqua;}
	
#buttons {
	text-align: center;
	width: 480px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	display: block;
}

.control-button {
	background-color: #CDA40F;
	height: 2em;
	width: 70px;
	color: #1D1D1D;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id ="container">
<div id ="character"></div>
<div id="target"></div>
</div>

<div id="buttons">
 <button  class="control-button" onClick="moveup()">UP</button><br><br>
  <button class="control-button" onClick="moveleft()">LEFT</button>
  <button class="control-button" onClick="moveright()">RIGHT</button><br><br>
  <button class="control-button" onClick="movedown()">DOWN</button>
</div>

Javascript游戏中的对象冲突

1 个答案: