键盘小游戏

最新推荐文章于 2021-06-16 10:25:43 发布

李永岩

最新推荐文章于 2021-06-16 10:25:43 发布

阅读量713

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/jackliyongyan/article/details/9142047

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.开发目的 :

为了更好的了解javascript的语言特性，同时也是为了对提高打字效率而开发的

2.分析与设计：

（1）分析：这是一款网页版的键盘小游戏，操作简单，易懂，只需一款浏览器即可运行。

（2）设计原理：这款网页小游戏主要以javacript语言开发为主，基于javascript的语言特性，事件模型驱动，

去执行所要执行的功能函数借鉴java的编程模式oo模式，从而实现要实现的效果，

3.开发IDE：notepad++

4.运行与测试环境：firefox、ie浏览器

5.所用技术：html css javascript

6.实现步骤和代码实例：

<html>
<head>
<title></title>
<style type="text/css">
.bodydiv{border:1px #898989 solid;width:700px;height:500px;background:#000000}
.twodiv{border:1px #898989 solid;width:700px;height:30px}
.createDiv{position:absolute;border:0px #898989 solid;width:30px;height:30px;color:#ffffff;text-align:center;font-size:20px}
</style>
<script type="text/javascript">
//div char

//div字符类
function charDiv(){
//alert("in charDiv");
var creatediv;
var charArray=new Array("A","B","C","D","E","F","G","H");

//随即生成字母
function returnChar(){
return charArray[parseInt(Math.random()*charArray.length)];
}
//Dynamic create the Div

//动态生成div
function createDiv(x,y){
   creatediv=document.createElement("div");
   creatediv.className="createDiv";
   creatediv.style.left=x;
   creatediv.style.top=y;
   creatediv.innerHTML=returnChar();
   oneDiv.appendChild(creatediv);
}
createDiv(Math.random()*500,10);
//the div move
this.divMove=function(){
   return creatediv.style.top=parseInt(creatediv.style.top)+10;
}
//div innerHTML
this.getInnerHTML = function(){
      return creatediv.innerHTML;
}
//hide this div
this.dispose = function(){
      return creatediv.style.display = "none";
}
}
//game in class

//游戏类
function game(){
//create Array the Storage in charDiv()
var StorageArray=new Array();
function productChar(){
   for(var i=0;i<5;i++){
    var objDiv=new charDiv();
    StorageArray.push(objDiv);
   }
}
//the loop div move
var Time;

//div移动
function loop(){
   //alert(StorageArray[1].getInnerHTML());
   Time=setInterval(function (){
    for(var i=0;i<StorageArray.length;i++){
     StorageArray[i].divMove();
    }

   },1000)

}
//Keyboard monitor

//监听键盘事件
function keyDown(){
   document.οnkeydοwn=function (e){
    var charkey=e.which;
    //alert(charkey);
    var gerkeyChar=String.fromCharCode(charkey);
    //alert(gerkeyChar);

    for(var i=0;i<StorageArray.length;i++){
     if(gerkeyChar==StorageArray[i].getInnerHTML()){
      StorageArray[i].dispose();

     }

    }

   };
}
this.strat=function(){
   productChar();
   loop();
   keyDown();
}
}
//To start the game

//游戏开始
function strat(){
//alert("in strat");
var games=new game();
games.strat();
}
function stop(){

clearInterval(Time);
alert("");
}
</script>
</head>
<body>
<div class="bodydiv" id="oneDiv">
</div>
<div class="twodiv">
<input type="button" value="strat" οnclick="strat()"/>
<input type="button" value="stop" οnclick="stop()"/>
</div>
</body>
</html>