刚开始学习JS和CSS,写了一个小游戏,分享给大家~
<html> <!-- 作者:王荣光 QQ:1289666719 完成日期:2017年8月5日 16:38 --> <head> <!-- 游戏规则: 点击某一个按钮,其上下左右和本身都会+1,若某按钮的值为9,再+1则为0 争取使九宫格的数字最大吧!! --> <meta charset = "gb2312"> <style type = "text/css"> body { background-color: #7fff00 ; } .center { text-align: center; } input { font-size: 50px; width: 150px; height: 150px; margin: 20px; background-color: yellow; } div { margin: 20px; } </style> <script type = "text/javascript"> var max = 0; function add1(a){ var but = document.getElementById("but-1"); if(parseInt(but.value) < 9){ but.value = parseInt(but.value) + 1; }else{ but.value = 0; } if(a == 1){ add2(2);add4(2);all(); } } function add2(a){ var but = document.getElementById("but-2"); if(parseInt(but.value) < 9){ but.value = parseInt(but.value) + 1; }else{ but.value = 0; } if(a == 1){ add1(2);add3(2);add5(2);all(); } } function add3(a){ var but = document.getElementById("but-3"); if(parseInt(but.value) < 9){ but.value = parseInt(but.value) + 1; }else{ but.value = 0; } if(a == 1){ add2(2);add6(2);all(); } } function add4(a){ var but = document.getElementById("but-4"); if(parseInt(but.value) < 9){ but.value = parseInt(but.value) + 1; }else{ but.value = 0; } if(a == 1){ add1(2);add5(2);add7(2);all(); } } function add5(a){ var but = document.getElementById("but-5"); if(parseInt(but.value) < 9){ but.value = parseInt(but.value) + 1; }else{ but.value = 0; } if(a == 1){ add2(2);add4(2);add6(2);add8(2);all(); } } function add6(a){ var but = document.getElementById("but-6"); if(parseInt(but.value) < 9){ but.value = parseInt(but.value) + 1; }else{ but.value = 0; } if(a == 1){ add3(2);add5(2);add6(2);all(); } } function add7(a){ var but = document.getElementById("but-7"); if(parseInt(but.value) < 9){ but.value = parseInt(but.value) + 1; }else{ but.value = 0; } if(a == 1){ add4(2);add8(2);all(); } } function add8(a){ var but = document.getElementById("but-8"); if(parseInt(but.value) < 9){ but.value = parseInt(but.value) + 1; }else{ but.value = 0; } if(a == 1){ add5(2);add7(2);add9(2);all(); } } function add9(a){ var but = document.getElementById("but-9"); if(parseInt(but.value) < 9){ but.value = parseInt(but.value) + 1; }else{ but.value = 0; } if(a == 1){ add6(2);add8(2);all(); } } function all(){ var baseId = "but-"; var result = 0; for(var i = 1; parseInt(i) < 10; i = parseInt(i) + 1){ var id = baseId + i; var but = document.getElementById(id); result = parseInt(result) + parseInt(but.value); } if(parseInt(max) < parseInt(result)){ document.getElementById("score").innerHTML = result; max = result; } } </script> </head> <body> <div class = "center"> <div> <input type = "button" value = "0" id = "but-1" onclick = "add1(1)" /> <input type = "button" value = "0" id = "but-2" onclick = "add2(1)" /> <input type = "button" value = "0" id = "but-3" onclick = "add3(1)" /> </div> <div> <input type = "button" value = "0" id = "but-4" onclick = "add4(1)" /> <input type = "button" value = "0" id = "but-5" onclick = "add5(1)" /> <input type = "button" value = "0" id = "but-6" onclick = "add6(1)" /> </div> <div> <input type = "button" value = "0" id = "but-7" onclick = "add7(1)" /> <input type = "button" value = "0" id = "but-8" onclick = "add8(1)" /> <input type = "button" value = "0" id = "but-9" onclick = "add9(1)" /> </div> </div> <div class = "center"> 最好成绩:<div id = "score"></div> </script> </div> </body> </html>