javascript实现简单打字游戏
本文实例为大家分享了javascript打字游戏的具体代码，供大家参考，具体内容如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>传智打字游戏</title>
<style type="text/css">
.label{
position:absolute;left: 0px;
}
</style>
<script type="text/javascript" src="game.js"></script>
</head>
<body>
<div id="msg"></div>
<input id="startBtn" type="button" value="开始游戏" οnclick="startGame(this)"/>
<input type="button" value="停止游戏" οnclick="stopGame()"/>
</body>
</html>
var CODE = "QWERTYUIOPASDFGHJKLZXCVBNM";
var codeArray = [];
var number = 0;
//创建随机字母
function createCode(){
//0-25
var index = parseInt(Math.random()*26);
return CODE.charAt(index);
};
//创建显示label方法
function createLabel(code){
/**
* <label class="label">
A
</label>
*/
var label = document.createElement("label");
label.className = "label";
label.style.top = "50px";
label.innerHTML = code;
label.code = code;
var html = document.documentElement;
//所有label标签的x坐标
var labelX = parseInt(Math.random()*html.clientWidth);
if(labelX>100){
labelX-=20;
}
label.style.left = labelX+"px";
return label;
}
window.onload = function(){
document.getElementById("startBtn").disabled = false;
//注册键盘事件
document.documentElement.οnkeydοwn=function(event){
var keyCode = event.keyCode; //获取按下的吗
var code = String.fromCharCode(keyCode);//A-Z
for ( var i = 0; i < codeArray.length; i++) {
//label标签
var label = codeArray[i];
if(label.code==code){
clearInterval(label.interval_id);
label.parentNode.removeChild(label);
codeArray.splice(i,1);
number+=10;
document.getElementById("msg").innerHTML = number+"分";
break;
}
}
};
};
//让label标签慢慢的从上向下移动
function runLabelTop(label){
//获取页面的高度
var height = Math.max(document.documentElement.clientHeight,document.documentElement.scrollHeight);
label.interval_id = setInterval(function(){
//50px
var top = parseInt(label.style.top);
top+=1;
//判断label是否已经超过页面的高度
if(top>height-30){
removeLabel(label,false);
}else{
label.style.top = top+"px";
}
},10);
}
//flag = false用户没有按下该字母
function removeLabel(label,flag){
clearInterval(label.interval_id);
label.parentNode.removeChild(label);
codeArray.shift();
number-=20;
document.getElementById("msg").innerHTML = number+"分";
}
var game_id = null;
//开始游戏
function startGame(startButton){
startButton.disabled = true;
game_id = setInterval(function(){
//创建要显示的字符
var code =createCode();
//创建一个label显示字符
var label = createLabel(code);
//让label标签慢慢向下移动,修改标签的style.top属性
runLabelTop(label);
//把label标签节加入到页面中
document.body.appendChild(label);
codeArray.push(label);
},1000);
}
//停止游戏
function stopGame(){
clearInterval(game_id);
for ( var i = 0; i < codeArray.length; i++) {
clearInterval(codeArray[i].interval_id);
codeArray[i].parentNode.removeChild(codeArray[i]);
}
codeArray = [];
document.getElementById("startBtn").disabled = false;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript打字小游戏代码
功能模块: 程序设计: 1.可选择游戏时间,显示倒计时 1.定义全局变量 2.可选择英文字母出现个数 2.控制游戏时间函数 3.统计得分 3.动画效果 4.菜单选项 4.设定字母图片出现的时间 5.判断函数 6.游戏菜单 7.游戏时间选项 8.显示游戏时间 9.游戏难度选项 10.游戏得分 先上效果图:(PS:美工是硬伤) 主要代码设计: 复制代码 代码如下: //-------全局变量------- var data={ "10":["<img src='images
-
原生js实现打字动画游戏
这是昨天用原生的js写的打字动画游戏,主要用的间歇定时器,对象,还有Math方法,感觉还行,主要看消除字母的时间快慢,但是也有bug,就是字母都是一次性生成的,所以一开始,看起来感觉会有种爆炸的感觉,如果能够一次性生成一批,然后分批往下掉就好了,求大神帮忙改改,大家也可以参考参考. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <ti
-
javascript 打字游戏实现代码
效果如图所示:下面是核心代码 复制代码 代码如下: GAME = { //随机产生字母 randLetter: function() { var arrLetter = new Array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K&qu
-
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
前两讲我告诉了大家如何使人物移动,那么今天我们就来看看如何实现仿<三国志曹操传>人物情景对话.具体的链接我写在下方. 一.前言 相信大家都还记得吧,在某些新闻里会有一些惨不忍睹的结果是用像打字机一样的方式把文字弄出来.那么今天的主要目的就是要办到这个. 就在9月5日的时候,我在办公室里起了个做这种程序的念头,并且有了点思路.我首先想用调margin的方法,按理说是作出来了,但很不让人满意,毕竟很麻烦,并且技术也差.所以我打算用上数组和循环.9月13日我抽空写出来了,但由于这几天很忙,基本上在工
-
javascript实现简单打字游戏
本文实例为大家分享了javascript打字游戏的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>传智打字游戏</title> <style type="text/css"> .label{ position:a
-
C#实现简单打字游戏
本文实例为大家分享了C#实现简单打字游戏的具体代码,供大家参考,具体内容如下 运行效果图如下: 功能:程序运行后,点击开始按钮,窗体中的文本框中出现字母,用户通过键盘输入文本框中字母,窗体显示用时.正确数.错误数和正确率. 按钮:开始.结束.退出. 菜单:设置(开始游戏.结束游戏.退出游戏),查看(正确率.所用时间). 页面: 控件属性: timer1: enabled选择false,Interval设置为5. timer2: enabled选择false,Interval设置为1000. 代码
-
原生JavaScript实现简单五子棋游戏
本文实例为大家分享了JavaScript实现简单五子棋游戏的具体代码,供大家参考,具体内容如下 HTML页面 注释都很明确了,大家好好学习. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, height=d
-
jQuery 写的简单打字游戏可以提示正确和错误的次数
var off_x; //横坐标 var count=0; //总分 var speed=5000; //速度,默认是5秒. var keyErro=0; //输入错误次数 var keyRight=0; //输入正确的次数 //组织字母 var charArray=new Array("A", "B", "C", "D", "E", "F", "G", "
-
利用原生的JavaScript实现简单拼图游戏
前言 本篇主要讲解,如何利用原生的 JavaScript 来实现一个简单的拼图小游戏. 一.游戏的基础逻辑 想用一门语言来开发游戏,必须先了解如何使用这门语言来实现一些基础逻辑,比如图像的绘制.交互的处理.定时器等. 1.图形绘制 图形绘制是一切的基础,这里使用 JavaScript 在 canvas 上进行绘制.即先在 html 中创建 canvas 元素,然后在 JavaScript 中,通过 id 拿到这个元素,并且通过 canvas 拿到对应的上下文环境 context ,为后续的绘图做
-
基于JavaScript实现简单扫雷游戏
对于10年前的人来说,扫雷肯定是家喻户晓,由于当时的科技并不是很发达,大家对于电脑游戏的了解,可能都是从扫雷开始的,今天就交大家一种用js原生代码写一个简单的扫雷游戏,话不多说,直接上干货: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid
-
JavaScript实现简单打地鼠游戏
本文实例为大家分享了JavaScript实现打地鼠游戏的具体代码,供大家参考,具体内容如下 效果如下: html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/index.js"></script> <link rel="s
-
javascript实现简单的贪吃蛇游戏
javascript实现简单的贪吃蛇游戏,功能很简单,代码也很实用,就不多废话了,小伙伴们参考注释吧. <html> <head> <meta http-equiv='content-type' content='text/html;charset=utf-8'> <title>贪吃蛇</title> <script type="text/javascript"> var map; //地图 var snake;
-
C#实现简单打字小游戏
本文实例为大家分享了C#实现简单打字小游戏的具体代码,供大家参考,具体内容如下 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.For