基于js的吃方块小游戏-web开发-互联网-天达云

基于js的吃方块小游戏
更新：HHH 时间：2023-1-7

<html>

小时候经常可以在电子游戏机上面玩这种打击方块的游戏，下面用纯粹的表格加js做一个，如果想看效果，将jquery文件复制到此游戏的跟目录下。目的只有一个：游戏中的jquery能工作。

<!--

-->

var time=4000;

var n1=1;

var a=0;

var x=0;

function load(){

//alert(112);

a++;

if(a==(20*n1)){

n1++;

alert("恭喜你，第"+n1+"关");

time=time*80/100;

}

$("#guan").html(n1);

for(var j=1;j<=15;j++){

for(var m=1;m<23;m++){

if(j==1){

var arr=["#0000ff","#ffff00"];

var n = Math.floor(Math.random()*arr.length+1)-1;

$("#"+1+"_"+m).css("background-color",arr[n]);

}else{

n=j-1;

$("#"+j+"_"+m).css("background-color",$("#"+n+"__"+m).css("background-color"));

}

for(var l=1;l<=15;l++){

for(var h=1;h<23;h++){

$("#"+l+"__"+h).css("background-color",$("#"+l+"_"+h).css("background-color"));

}

if(x==1){

over();

}

for(var f=1;f<23;f++){

if(document.getElementById(15+"_"+f).style.backgroundColor=="rgb(0, 0, 255)"){

x=1;

break;

}

//alert(11);

setTimeout("load();",time);

}

</script>

function choose(){

var asciicode=event.keyCode;

var strcode=String.fromCharCode(asciicode);

//alert(document.getElementById(11).style.backgroundColor=="red");

if(strcode=="A"){

for(var i=1;i<23;i++){

var m=i-1;

if(document.getElementById(i).style.backgroundColor=="red"){

document.getElementById(m).style.backgroundColor="red";

document.getElementById(i).style.backgroundColor="yellow";

break;

}

if(strcode=="D"){

for(var j=1;j<23;j++){

var p=j+1;

if(document.getElementById(j).style.backgroundColor=="red"){

document.getElementById(p).style.backgroundColor="red";

document.getElementById(j).style.backgroundColor="yellow";

break;

}

for(var k=1;k<23;k++){

if(document.getElementById(k).style.backgroundColor=="red"){

$("#zId").val(k);

}

if(strcode=="J"){

if($("#tt").val()==1){

fire($("#zId").val(),15);

}

if(strcode=="H"){

if($("#fa").html()>=1){

for(var s=1;s<=15;s++){

for(var d=1;d<23;d++){

$("#"+s+"_"+d).css("background-color","#ffff00");

$("#"+s+"__"+d).css("background-color","#ffff00");

}

$("#fa2").val(parseInt($("#fa2").val(), 10)+1);

}

</script>

function start1(){

//alert(22);

if($("#tt").val()==1){

alert("已经开始。不能重复开始");

}else{

$("#tt").val(1);

load();

}

</script>

function fire(id,faId){

var time=20;

var aftId=faId+1;

if(document.getElementById(faId+"_"+id).style.backgroundColor=="rgb(0, 0, 255)"){

$("#"+faId+"_"+id).css("background-color","#ffff00");

$("#"+faId+"__"+id).css("background-color","#ffff00");

faId="";

$("#core").val(parseInt($("#core").val(),10)+100);

if($("#core").val()>=10000){

$("#fa1").val($("#core").val()/10000);

$("#fa").html(parseInt($("#fa1").val(),10)-parseInt($("#fa2").val(),10));

}

if(faId==1){

$("#"+faId+"_"+id).css("background-color","#ffff00");

}else{

$("#"+faId+"_"+id).css("background-color","#ff0000");

}

$("#"+aftId+"_"+id).css("background-color","#ffff00");

faId-=1;;

if(faId==-1){

faId="";

}

setTimeout("fire("+id+","+faId+");",time);

}

</script>

function again(){

var total=0;

if($("#tt").val()==1){

alert("游戏已经开始,不能重置");

}else{

var arr=["#0000ff","#ffff00"];

for(var i=1;i<7;i++){

for(var j=1;j<23;j++){

var n = Math.floor(Math.random()*arr.length+1)-1;

$("#"+i+"_"+j).css("background-color",arr[n]);

if(arr[n]=="#0000ff"){

total++;

$("#total").val(total);

$("#coreTotal").val(total*100);

}

for(var q=1;q<=15;q++){

for(var p=1;p<23;p++){

$("#"+q+"__"+p).css("background-color",$("#"+q+"_"+p).css("background-color"));

}

function over(){

alert("游戏结束，总得分："+$("#core").val());

window.location.reload();

}

</script>

</head>

<h2>此游戏对治疗近视有明显的效果</h2>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr >

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr >

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

得分：<input type="text" id="core" style="width:100px" disabled="disabled" value="0"/>

第<span id="guan">1</span>关  法宝：<span id="fa">0</span>次

</center>

</body>

</html>


返回web开发教程...

新手上路

产品管理

支付方式

关于我们