我应该创建一个非常简单的 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";
}
最佳答案
希望这对您有所帮助。我已经更改了发生碰撞时目标的颜色。将其替换为结束游戏的功能。希望这就是您要找的。
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 - Javascript 游戏中的对象碰撞，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53219101/