這個游戲是自己在大約一年前聯系js熟練度時做的，用的都是基礎的東西，最近比較忙沒時間整理。直接發給大家，有興趣的可以看一下。歡迎大家提出建議。如果你有什么新的想法也可以提出來，或者你並不擅長編程。你想做什么東西可以告訴我。我盡量幫你實現。
不要在意標點符號什么的，，哈哈
廢話不說了上代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title>zwcai pai bool</title>
<style>
.innerGrid {
width: 20px;
height: 20px;
margin: 0;
padding: 0;
text-align: center;
line-height: 20px;
float: left;
background-color: beige;
border: solid burlywood 1px;
}
.clearBoth {
clear: both;
}
.outGrid {
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
width: 20px;
height: 20px;
margin: 0;
padding: 0;
float: left;
background-color: burlywood;
border: solid beige 1px;
}
.disOutGrid {
filter: alpha(opacity=0);
-moz-opacity: 0.0;
-khtml-opacity: 0.0;
opacity: 0.0;
width: 20px;
height: 20px;
margin: 0;
padding: 0;
float: left;
background-color: burlywood;
border: solid beige 1px;
}
.redOutGrid {
guessOutGrid filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
width: 20px;
height: 20px;
margin: 0;
padding: 0;
float: left;
background-color: red;
color: white;
text-align: center;
line-height: 20px;
border: solid beige 1px;
}
.guessOutGrid {
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
width: 20px;
height: 20px;
margin: 0;
padding: 0;
float: left;
color: red;
text-align: center;
line-height: 20px;
background-color: burlywood;
border: solid beige 1px;
}
</style>
</head>
<body>
<form action="javaScript:createContent()">
<div id="message" style="color: red; display: none;">booNum must less than xyNum*xyNum</div>
<br /> xyNum:
<input id="xyNum" type="number" required="true" name="points" min="1" max="50" /> booNum:
<input id="booNum" type="number" required="true" name="points" min="1" max="2500" />
<input type="submit" value="OK" />
<br /> 1. Input the width <br /> 2. Input the number of ray (ray number is less than the width * width) <br /> 3. Click ok <br />
The right mouse button:<br />
The first time: mark your guess<br />
The second time: confirm your guess<br />
The Third time: cancel the tag<br />
</form>
<div style="position: relative; margin: 20px 20px;">
<div id="content"></div>
<div id="outcontent" style="position: absolute;top: 0px;"></div>
</div>
<script>
document.oncontextmenu = function(e) {
e.preventDefault();
};
var xyNum = document.getElementById('xyNum'),
booNum = document.getElementById('booNum'),
message = document.getElementById('message'),
content = document.getElementById('content'),
outcontent = document.getElementById('outcontent'),
commonFunction = {
getPromptArray: function(xyL, BIndex) {
var resultArry = []; //["x1y1","x2y2","x3y3","x1y1"];BIndex:[[0,1],[3,1]]
var resultObj = {};
var bx = 0,
by = 0;
function calculateA(item) {
bx = item[0];
by = item[1];
if (bx > 0) {
resultArry.push('x' + (bx - 1) + 'y' + (by));
}
if (bx < xyL - 1) {
resultArry.push('x' + (bx + 1) + 'y' + (by));
}
if (by > 0) {
resultArry.push('x' + (bx) + 'y' + (by - 1));
}
if (by < xyL - 1) {
resultArry.push('x' + (bx) + 'y' + (by + 1));
}
if (bx > 0 && by > 0) {
resultArry.push('x' + (bx - 1) + 'y' + (by - 1));
}
if (bx > 0 && by < xyL - 1) {
resultArry.push('x' + (bx - 1) + 'y' + (by + 1));
}
if (bx < xyL - 1 && by > 0) {
resultArry.push('x' + (bx + 1) + 'y' + (by - 1));
}
if (bx < xyL - 1 && by < xyL - 1) {
resultArry.push('x' + (bx + 1) + 'y' + (by + 1));
}
}
function getResultObj(arr) {
var obj = {};
for (var ai = 0; ai < arr.length; ai++) {
var item = arr[ai];
if (obj[item] == null) obj[item] = 1;
else obj[item] = obj[item] + 1;
}
return obj;
}
for (var bi = 0; bi < BIndex.length; bi++) {
var Bitem = BIndex[bi]; //[0,1]
calculateA(Bitem);
}
resultObj = getResultObj(resultArry);
return resultObj;
},
getBIndex: function(xyn, boo) {
var result = [];
var xy = [];
function canAddRes() {
xy = result[result.length - 1];
for (var l = 0; l < result.length - 1; l++) {
if (result[l][0] == xy[0] && result[l][1] == xy[1]) {
return false;
}
}
return true;
};
for (var i = 0; i < boo; i++) {
var x = parseInt(Math.random() * xyn);
var y = parseInt(Math.random() * xyn);
result[i] = [x, y];
if (!canAddRes()) {
i--;
}
}
return result;
},
getInnerArea: function() {
if (xyNum.value * xyNum.value < booNum.value) {
message.style.display = 'block';
return false;
} else {
while (content.hasChildNodes()) {
content.removeChild(content.firstChild);
}
}
var oFrag = document.createDocumentFragment();
var BIndex = [];
BIndex = commonFunction.getBIndex(xyNum.value, booNum.value);
for (var xi = 0; xi < xyNum.value; xi++) {
var oLi = document.createElement("div");
oLi.id = 'x' + xi;
for (var yi = 0; yi < xyNum.value; yi++) {
var oDiv = document.createElement("div");
oDiv.id = 'x' + xi + 'y' + yi;
oDiv.className = 'innerGrid';
oLi.appendChild(oDiv);
if (yi == xyNum.value - 1) {
var endDiv = document.createElement("div");
endDiv.className = "clearBoth";
oLi.appendChild(endDiv);
}
}
oFrag.appendChild(oLi);
}
content.appendChild(oFrag);
var promptObj = commonFunction.getPromptArray(xyNum.value, BIndex); //{'x1y1':2}
for (var pItem in promptObj) {
document.getElementById(pItem).textContent = promptObj[pItem];
}
for (var Bi = 0; Bi < BIndex.length; Bi++) {
document.getElementById('x' + BIndex[Bi][0] + 'y' + BIndex[Bi][1]).textContent = "b";
}
return true;
},
getOutArea: function() {
while (outcontent.hasChildNodes()) {
outcontent.removeChild(outcontent.firstChild);
}
var oFrag = document.createDocumentFragment();
for (var xi = 0; xi < xyNum.value; xi++) {
var oLi = document.createElement("div");
oLi.id = xi;
for (var yi = 0; yi < xyNum.value; yi++) {
var oDiv = document.createElement("div");
oDiv.id = xi + 'y' + yi;
oDiv.className = 'outGrid';
oLi.appendChild(oDiv);
if (yi == xyNum.value - 1) {
var endDiv = document.createElement("div");
endDiv.className = "clearBoth";
oLi.appendChild(endDiv);
}
}
oFrag.appendChild(oLi);
}
outcontent.appendChild(oFrag);
},
checkEnd: function() {
if (document.getElementsByClassName('outGrid').length > booNum.value) {
return false;
} else {
return true;
}
},
LClickButton: function(elem) {
var result = false;
var id = this.id;
var interX = parseInt(id.split("y")[0]);
var interY = parseInt(id.split("y")[1]);
var doc = document.getElementById('x' + interX + 'y' + interY);
if (elem.button == 2) {
if (this.className == 'outGrid') {
this.className = 'guessOutGrid';
this.textContent='?';
result = false;
}else if (this.className == 'guessOutGrid') {
this.className = 'redOutGrid';
this.textContent='7';
result = false;
}else if (this.className == 'redOutGrid') {
this.className = 'outGrid';
this.textContent='';
result = false;
}
}else if (elem.button == 0) {
if(this.className == 'disOutGrid'){
result = false;
}else if (this.className != 'outGrid') {
this.className = 'outGrid';
this.textContent='';
return false;
}else if (doc.textContent == 'b') {
alert('you are fail');
while (outcontent.hasChildNodes()) {
outcontent.removeChild(outcontent.firstChild);
}
result = false;
} else if (doc.textContent != '') {
this.className = 'disOutGrid';
result = true;
} else {
commonFunction.removeSplace(this)
result = true;
}
if (result && commonFunction.checkEnd()) {
while (outcontent.hasChildNodes()) {
outcontent.removeChild(outcontent.firstChild);
}
alert('you are win')
}
}
return result;
},
removeSplace: function removeS(elem) {
if (elem.className == 'disOutGrid') {
return false;
}
var id = elem.id;
var interX = parseInt(id.split("y")[0]);
var interY = parseInt(id.split("y")[1]);
var doc = document.getElementById('x' + interX + 'y' + interY);
if (doc.textContent != 'b') {
elem.className = 'disOutGrid';
if (doc.textContent != '') {
return false;
}
if (interX > 0) {
removeS(document.getElementById((interX - 1) + 'y' + interY));
}
if (interX < xyNum.value - 1) {
removeS(document.getElementById((interX + 1) + 'y' + interY));
}
if (interY > 0) {
removeS(document.getElementById((interX) + 'y' + (interY - 1)));
}
if (interY < xyNum.value - 1) {
removeS(document.getElementById((interX) + 'y' + (interY + 1)));
}
}
}
},
createContent = function() {
if (commonFunction.getInnerArea()) {
commonFunction.getOutArea();
var outDiv = document.getElementsByClassName('outGrid');
for (var i = 0; i < outDiv.length; i++) {
outDiv[i].onmousedown = commonFunction.LClickButton;
}
};
};
</script>
</body>
</html>
直接將代碼復制帶一個文本中將后綴.txt改成.html即可。
《桃花庵--程序員版》
原著：某網友
改變：笑逗逗
寫字樓里寫字間，
寫字間中程序員；
程序員來寫程序，
又將程序換酒錢；
酒醒只在屏前坐，
酒醉還來屏下眠；
酒醉酒醒日復日，
屏前屏下年復年；
但願醉游代碼海，
不願鞠躬人世間；
大富大貴勿牽往，
公交自行自相隨；
別人笑我太瘋癲，
我笑他人莫逍遙；
但見滿街呆萌美，
哪個歸得程序員。