用OO方式写键盘字母小游戏 - html/css语言栏目：

2023/04/09 · admin

< html> <head> <title>0.0</title> <script> window.onload=function Test(){ alert("游戏提示，本游戏没有关卡限制，每次得分超过整百时,进入下一关，点击确定开始游戏吧！"); var game=new Game(); game.start(); } var times; var words; var down=2; var fen=100; var createCharDiv=new Array(); function Game(){ //alert("coming game()"); words=new Array("A","B","C","D","E","F","G","H","I","J","K","L","N","M","O","P","Q","R","S","T","U","V","W","Z","X","Y"); var createBackground=new CreateBackground(); var createScore=new CreateScore(); //var createCharDiv=new CreateCharDiv(); this.start=function(){ for(var i=0;i<5;i++){ createCharDiv[i]=new CreateCharDiv(); } times=setInterval(function(){ for(var i=0;i<5;i++){ createCharDiv[i].move(); } },50); document.onkeydown=keydown; function keydown(e){ var real=String.fromCharCode(e.which); //alert(real); for(var i=0;i<5;i++){ if(createCharDiv[i].divHTML()==real){ //alert("zhong"); createScore.addScore(); createCharDiv[i].againTop(); } } } } } function CreateBackground(){ //alert("coming CreateBackground()"); var newBackground; function initBackground(){ //alert("coming initBackground()"); newBackground=document.createElement("div"); //alert(newBackground); newBackground.style.width="500px"; newBackground.style.height="600px"; newBackground.style.border="3px solid black"; newBackground.style.position="absolute"; //newBackground.style.background="pink"; document.body.appendChild(newBackground); } initBackground(); } function CreateScore(){ //alert("1"); var scoreboard; var score=0; function initScore(){ //alert("2"); scoreboard=document.createElement("div"); scoreboard.style.width="100px"; scoreboard.style.height="20"; scoreboard.style.top="10px"; scoreboard.style.left="405px"; scoreboard.style.position="absolute"; scoreboard.style.border="3px solid black"; scoreboard.style.background="green"; scoreboard.innerHTML="得分："+score; document.body.appendChild(scoreboard); //alert(scoreboard); } initScore(); this.addScore=function(){ score+=10; scoreboard.innerHTML=""; scoreboard.innerHTML="得分："+score; if(score==fen){ alert("亲，即将进入下一关，请做好准备！"); down++; fen+=100; //alert("fen"+fen); for(var i=0;i<5;i++){ createCharDiv[i].againTop(); } } } } function CreateCharDiv(){ //alert("CreateCharDiv()"); var newDiv; var numbs=0; function initCharDiv(){ //alert("initCharDiv()"); num=parseInt(Math.random()*words.length); //alert(words.length); newDiv=document.createElement("div"); newDiv.style.width="30px"; newDiv.style.height="30px"; newDiv.style.border="1px solid black"; newDiv.style.position="absolute"; newDiv.style.top="20px"; //规定范围内取随机数 *（上限-下限+1）+下限 //newDiv.style.left=parseInt(Math.random()*480)+"px"; newDiv.style.left=parseInt(Math.random()*(470-20+1)+20)+"px"; newDiv.style.background="red"; newDiv.innerHTML=words[num]; document.body.appendChild(newDiv); } initCharDiv(); this.move=function(){ //alert("move()"); newDiv.style.top=parseInt(newDiv.style.top)+down; if(parseInt(newDiv.style.top)>580){ clearInterval(times); alert("oh oh oh , game over !"); } } this.divHTML=function(){ return newDiv.innerHTML; } this.againTop=function(){ newDiv.style.display="none"; initCharDiv(); } } </script> </head> <body> </body> </html>

用OO方式写键盘字母小游戏 - html/css语言栏目：

相关文章

最新评论

最近发表

网站分类

文章归档