简略版的完整代码，可以玩一哈~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#stage {
width: 300px;
height: 300px;
position: relative;
}
#background {
width: 300px;
height: 300px;
position: absolute;
top: 0;
left: 0;
background: yellow;
}
#cannon {
width: 20px;
height: 20px;
position: absolute;
top: 270px;
left: 140px;
background: red;
}
#alien {
width: 20px;
height: 20px;
position: absolute;
top: 20px;
left: 80px;
background: blue;
}
#missile {
width: 10px;
height: 10px;
position: absolute;
top: 270px;
left: 140px;
background: black;
}
#explosion {
width: 20px;
height: 20px;
position: absolute;
top: 0;
left: 0;
background: pink;
display: none;
}
</style>
</head>
<body>
<div id="stage">
<div id="background"></div>
<div id="cannon"></div>
<div id="missile"></div>
<div id="alien"></div>
<div id="explosion"></div>
</div>
<p id="output">请输入x和y坐标（0-300），然后点击fire</p>
<input type="text" id="inputX" placeholder="X...">
<input type="text" id="inputY" placeholder="Y...">
<button>fire</button>
<script>
function BinaryTree() {
var Node = function(key) {
this.key = key;
this.left = null;
this.right = null;
this.selected = false;
};
var root = null;
var insertNode = function(node, newNode) {
if (newNode.key < node.key) {
if (node.left === null) {
node.left = newNode;
} else {
insertNode(node.left, newNode);
}
} else {
if (node.right === null) {
node.right = newNode;
} else {
insertNode(node.right, newNode);
}
}
}
this.insert = function(key) {
var newNode = new Node(key);
if (root == null) {
root = newNode;
} else {
insertNode(root, newNode);
}
};
var inOrderTraverseNode = function(node, callback) {
if (node !== null) {
inOrderTraverseNode(node.left, callback);
callback(node.key);
inOrderTraverseNode(node.right, callback);
}
}
this.inOrderTraverse = function(callback) {
inOrderTraverseNode(root, callback);
}
var searchNode = function(node, key) {
if (node === null) {
return false;
}
if (key < node.key) {
return searchNode(node.left, key);
} else if (key > node.key) {
return searchNode(node.right, key);
} else {
return node;
}
}
this.search = function(key) {
return searchNode(root, key);
}
}
var callback = function(key) {
console.log(key);
};
// init alienSiteArray
var nodesForAlien = [];
for (var i = 0; i < 10; i++) {
nodesForAlien.push(Math.floor(Math.random() * 281));
}
// nodesArray for selected
var nodesForSelected = [];
for (var i = 0; i < 10; i++) {
nodesForSelected.push({selected: false});
}
// activate first alienSite
var alienNodeSelect = Math.floor(Math.random() * 9);
nodesForSelected[alienNodeSelect].selected = true;
var binaryTree = new BinaryTree();
nodesForAlien.forEach(function(key) {
binaryTree.insert(key)
});
//Game section
var alienX = 20;
var alienY = 20;
var guessX = 0,
guessY = 0,
shotsRemaning = 8,
shotsMade = 0,
gameState = "",
gameWon = false;
var cannon = document.querySelector("#cannon"),
alien = document.querySelector("#alien"),
missile = document.querySelector("#missile"),
explosion = document.querySelector('#explosion');
var inputX = document.querySelector('#inputX'),
inputY = document.querySelector('#inputY'),
output = document.querySelector('#output');
var button = document.querySelector("button");
button.style.cursor = "pointer";
button.addEventListener("click", clickHandler, false);
window.addEventListener("keydown", keydownHandler, false);
function clickHandler() {
validateInput();
}
function keydownHandler() {
if (event.keyCode === 13) {
validateInput();
}
}
function validateInput() {
guessX = parseInt(inputX.value);
guessY = parseInt(inputY.value);
if (isNaN(guessX) || isNaN(guessY)) {
output.innerHTML = "请输入数字坐标";
} else if (guessX > 300 || guessY > 300) {
output.innerHTML = "坐标不能大于300"
} else {
playGame();
}
}
function playGame() {
shotsRemaning--;
shotsMade++;
gameState = "炮弹：" + shotsMade + ",数量：" + shotsRemaning;
guessX = parseInt(inputX.value);
guessY = parseInt(inputY.value);
var alienNode = binaryTree.search(guessX);
var alienFlag = -1;
if (alienNode) {
nodesForAlien.forEach(function(val, index) {
if (val === alienNode.key) {
alienFlag = index;
}
})
}
if (alienNode !== null && alienNodeSelect === alienFlag) {
if (guessY >= alienY && guessY <= alienY + 20) {
gameWon = true;
endGame();
}
} else {
output.innerHTML = "没有击中" + "<br>" + gameState;
if (shotsRemaning < 1) {
endGame();
}
}
if (!gameWon) {
alienNodeSelect = Math.floor(Math.random() * 9);
alienX = nodesForAlien[alienNodeSelect];
alienY += 30;
}
render();
console.log("X" + alienX);
console.log("Y" + alienY);
}
function render() {
alien.style.left = alienX + 'px';
alien.style.top = alienY + 'px';
cannon.style.left = guessX + 'px';
missile.style.left = guessX + 'px';
missile.style.top = guessY + 'px';
if (gameWon) {
explosion.style.display = 'block';
explosion.style.left = alienX + 'px';
explosion.style.top = alienY + 'px';
alien.style.display = "none";
missile.style.display = "none";
}
}
function endGame() {
if (gameWon) {
output.innerHTML = "Hit! 你拯救了地球" + "<br>" + "你发射了炮弹" + shotsMade;
} else {
output.innerHTML = "失败了！" + "<br>" + "地球被外星人侵略！";
}
button.removeEventListener("click", clickHandler, false);
button.disabled = true;
window.removeEventListener("keydown", keydownHandler, false);
inputX.disabled = true;
inputY.disabled = true;
}
</script>
</body>
</html>
