当前位置: 代码迷 >> Web前端 >> 键盘游戏之div-用OO形式写
  详细解决方案

键盘游戏之div-用OO形式写

热度:281   发布时间:2013-09-09 20:31:09.0
键盘游戏之div--用OO方式写
虽然写的不是很好,但解释权以及版权还是归13东倍所有
<html>
<head>
<title>game-00</title>
<script>
window.onload=function(){
alert("游戏说明:在键盘上输入的字符与游戏下落的字符相同时,积分板加分,积分达到一定时,提示进入下一关,若字符落到底部,即游戏结束。点击按钮开始游戏吧!");
var game=new Game();
game.start();
}
function Game(){
//alert("coming Game()");
var gameBackground=new GameBackground();
var gameScoreBoard=new GameScoreBoard()
var createChar=new Array();
for(var i=0;i<10;i++){
createChar[i]=new CreateChar();
}
this.start=function(){
//alert("start()");
var time=setInterval(function(){
//alert("loop");
for(var i=0;i<10;i++){
createChar[i].move();
if(createChar[i].divTOP()>490){
clearInterval(time);
alert("game over");
break;
}
}
},50);
}
document.onkeydown=keydown;
var jifen=200;
var pass=2;
function keydown(e){
var real=String.fromCharCode(e.which);
//alert(real);
for(var i=0;i<10;i++){
if(real==createChar[i].divHTML()){
//alert("ko");
gameScoreBoard.addScore();
createChar[i].returnTOP();
if(gameScoreBoard.jifen()==jifen){
jifen+=200;
alert("恭喜你,点击确定进入第"+(pass++)+"关!");
for(var i=0;i<10;i++){
createChar[i].returnTOP();
createChar[i].speed();
}
}
}
}
}
}
function GameBackground(){
//alert("coming GameBackground()");
function initBackground(){
var gb=document.createElement("div");
//alert("gb---"+gb);
gb.style.width="700px";
gb.style.height="500px";
gb.style.border="3px solid black";
document.body.appendChild(gb);
//alert("ok");
}
initBackground();
}
function GameScoreBoard(){
//alert("coming GameBackground()");
var sb;
var scores=0;
function initScoreBoard(){
sb=document.createElement("div");
//alert("gb---"+gb);
sb.style.width="100px";
sb.style.height="20px";
sb.style.top="20px";
sb.style.left="600px";
sb.style.border="1px solid red";
sb.style.position="absolute";
sb.innerHTML="得分:0";
document.body.appendChild(sb);
//alert("ok");
}
initScoreBoard();
this.addScore=function(){
scores+=10;
sb.innerHTML="得分:"+scores;
}
this.jifen=function(){
return scores;
}
}
function CreateChar(){
//alert("coming CreateChar()");
var newChar;
//var newChar_y=50;
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 down=1;
function initChar(){
//alert("coming initChar()");
newChar=document.createElement("div");
//alert("newChar---"+newChar);
newChar.style.top="50";
//规定范围内取随机数   *(上限-下限+1)+下限
newChar.style.left=parseInt(Math.random()*(690-10+1)+10);
newChar.style.position="absolute";
newChar.innerHTML=words[parseInt(Math.random()*words.length)];
document.body.appendChild(newChar);
}
initChar();
this.move=function(){
newChar.style.top=parseInt(newChar.style.top)+down;
//alert(newChar_y);
}
this.divHTML=function(){
return newChar.innerHTML;
}
this.returnTOP=function(){
newChar.style.top="50";
newChar.style.display="none";
initChar();
}
this.divTOP=function(){
return parseInt(newChar.style.top);
}
this.speed=function(){
down++;
}
}
</script>
</head>
<body>
</body>
</html>
  相关解决方案