主要由javascript实现的网页打字小游戏

代码如下 :

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>打字游戏</title>
<style type="text/css">
   b{
       position:absolute;

   }
</style>
<script type="text/javascript">

   function startGame(){

       var words = "QWERTYUIOPASDFGHJKLZXCVBNM";//要生成的所有字母
       var wordArray = [];//存放产生的字母的数组
       var makeWordPer = 500;//字母产生的间隔时间
       var downPer=200;//字母下落间隔时间
       var downLen = 10;//每次下落的距离
       var colors = ["red","green","blue","orange"];//字母可能出现的颜色
       //点击开始游戏后隐藏按钮
       var btn = document.getElementById("startBtn");//获得按钮元素
       btn.style.display="none";
       //周期性生成字母
       setInterval(function(){
           var index = Math.random()*26;//字母在字符串中的索引
           var word = words.charAt(index);//获得生成的字母
           var b = document.createElement("b");
           b.innerHTML=word;//将获得的字母添加到<b>标签中去
           var width = document.documentElement.clientWidth;//浏览器宽度
           b.style.left = Math.random()*width-20+"px";//字母出现位置,预留20px防止字母显示到页面外
           b.style.top = "0px";
           b.style.color = colors[parseInt(Math.random()*colors.length)];//字母颜色随机产生
           wordArray.push(b);
           document.body.appendChild(b);
       },makeWordPer);
       //让字母向下掉
       setInterval(function(){
           for(var i = 0;i<wordArray.length;i++){
               var w = wordArray[i];//取到<b>标签
               var oldTop = parseInt(w.style.top);
               var newTop = oldTop+downLen;
               var pageHeight = parseInt(document.documentElement.clientHeight)-20;//页面高度,同样预留20
               if(pageHeight>newTop){
                   w.style.top = newTop+"px";//设置新的top值,实现字母掉落效果
               }else{
                   //若字母落到底部则消失
                   w.parentNode.removeChild(w);
                   wordArray.splice(i,1);
                   i--;//恢复索引
                   var score = document.getElementById("score");
                   score.innerHTML = parseInt(score.innerHTML)-20;//失败一次得分减少20
                   if(parseInt(score.innerHTML)<-100){
                       location.href = "game.html";//失分超过100则重新开始游戏
                   }
               }
           }
       },downPer);
       //为页面添加键盘事件监听
       document.documentElement.οnkeydοwn=function(event){
           var keyCode = event.keyCode;
           var b = String.fromCharCode(keyCode);

           for(var i = 0;i<wordArray.length;i++){
               var j = wordArray[i].innerHTML;
               if(j==b){//若按键正确,则消除屏幕上的字母
                   wordArray[i].parentNode.removeChild(wordArray[i]);
                   wordArray.splice(i,1);
                   var score = document.getElementById("score");
                   score.innerHTML = parseInt(score.innerHTML)+10;//正确消除一次得分增加10
               }
           }
       }
   }
</script>
</head>
<body>
   <button id="startBtn" style="color:red" οnclick="startGame()">
       开始游戏
   </button>
得分:<span id="score">0</span>
</body>
</html>

主要由javascript实现的网页打字小游戏相关推荐

用javascript编写的打字小游戏
最近在学ExtJs,看了蔡世友老师的视频课程,在第十课中留了一个小作业,就是用javascript写一个打字小游戏,于是按照前几课所讲的知识自己编写了一个. 一.需求:网页上在随机位置会出现字母,字母 ...
JavaScript打字小游戏
上半年自学了JavaScript,然后就做了个打字小游戏玩玩. 功能模块: 程序设计: 1.可选择游戏时间,显示倒计时 ...
JavaScript-事件和事件对象、实现键盘打字小游戏
JavaScript-事件和事件对象一．事件介绍事件一般是用于浏览器和用户操作进行交互.最早是IE和Netscape Navigator中出现,作为分担服务器端运算负载的一种手段.直到几乎所有的浏 ...
原生JS实现一个简单的打字小游戏
原生JS实现一个简单的打字小游戏利用javascript制作一个简单的打字小游戏之前写了一个贪吃蛇小游戏好像反响不错今天我来写一个比贪吃蛇更low更简单的打字小游戏打字小游戏原理接下来咋们直 ...
Python 打字小游戏开发，来体验不一样的打字游戏乐趣（第二篇）
Python 打字小游戏开发,来体验不一样的打字游戏乐趣(第二篇) 代码实现窗口类小车类玩家类电脑类赛道类小树类打字类 Python 打字小游戏开发,来体验不一样的打字游戏乐趣(第一篇) ...
我的《上勾拳》网页单机小游戏有什么版权问题吗
很遗憾,你上传的[<上勾拳>网页单机小游戏,发泄类型,可以自己上传音效适配,适配PC和安卓.大部分元素为SVG动画,云彩和火焰是canvas动画]没有通过审核,原因是:版权,如有疑问,请联 ...
JAVA实现打字小游戏
目录一.效果二.教程三.代码一.效果首先我们先看效果,左上角的分数是用来记录我们打对了多少字母.字母是从上面开始往下落.每打对一个字母,分数增加,增加到一定分数后,字母下落的速度也会增加.( ...
java实验2总结心得,打字小游戏JAVA实验总结及心得体会
篇一:扫雷游戏实验报告课程设计班级: 姓名: 学号: 指导教师: 成绩: 电子与信息工程学院信息与通信工程系目录 1.任务概述------------------------------ ...
如何在html上放小游戏,如何在网页插入小游戏
如何在网页插入小游戏,有两种方法: 方法一:使用IE浏览器1.首先打开一个小游戏,等待他加载完毕,也就是等游戏可以玩的时候: 2.在浏览器的菜单栏上面,点击[工具],然后选择[internet选项]: ...
Python 打字小游戏开发，来体验不一样的打字游戏乐趣（完结篇）
Python 打字小游戏开发,来体验不一样的打字游戏乐趣(完结篇) 资源下载完整代码 Python 打字小游戏开发,来体验不一样的打字游戏乐趣(第一篇) Python 打字小游戏开发,来体验不一样的 ...

主要由javascript实现的网页打字小游戏

主要由javascript实现的网页打字小游戏相关推荐

最新文章

热门文章