`
444878909
  • 浏览: 639439 次
文章分类
社区版块
存档分类
最新评论

用OO方式写键盘字母小游戏

 
阅读更多

<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>

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics