键盘打字游戏简要代码

主要运用js、css、jQuery的基本语法完成。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>打字游戏</title><style>body{background-image: url(img/dz2.jpg);background-repeat: no-repeat;background-size: cover;margin: 0px;padding: 0px;}#d-bottom{background-color: cornflowerblue ;width: 100%;height: 80px;position: absolute;bottom: 0px;}.stop{background-image: url(img/stop.png);width: 200px;height: 80px;background-repeat: no-repeat;text-align: center;line-height: 70px;float: left;cursor: pointer;}#score{background-image: url(img/fs.png);background-repeat: no-repeat;background-size: 200px 300px;width: 200px;height: 300px;position: absolute;right: 20px;bottom: 30px;text-align: center;line-height: 220px;font-size: 50px;}#lose{background-image: url(img/sp1.png);width: 500px;height: 400px;background-repeat: no-repeat;background-size: 500px 400px;position: absolute;top: -60%;left: 350px;cursor: pointer;}</style><script type="text/javascript" src="js/jquery.js"></script><script>var arr=[];var score=0;function createLetter(){//根据图片名称搜索名字，//图片名称根据asii码获取，asii码根据随机数生成。大写字母 A-Z  背后的asii码 是65-90var key =   Math.random()*25+65;var letter = String.fromCharCode(key);var img = document.createElement("img");//创建标签img.setAttribute("src","img/"+letter+".png");//赋值img.setAttribute("name",letter);img.style.position="absolute";var left = Math.floor(Math.random()*1200+50);//随机控制图片生成的位置img.style.left=left+"px";document.body.appendChild(img);//写入标签arr.push(img);}function down(){for(var i=0;i<arr.length;i++){//使用jQuery获取高度没有pxarr[i].style.top = $(arr[i]).offset().top+20+"px";if($(arr[i]).offset().top>470){$(arr[i]).remove();score--;//给计分板赋值$("#score").html(score);//写入if(score<0){clear();//jquery动画 3秒执行到top=0$("#lose").animate({top:"0px"},3000);}}}   }function start(){//让失败牌隐藏$("#lose").css("top","-60%");//重置记分牌分数score=0;$("#score").html(score);sid = window.setInterval("createLetter()",700);//使用计时器重复生成图片did = window.setInterval("down()",200);//使用计时器重复掉落图片}function clear(){//清除计时器window.clearInterval(sid);window.clearInterval(did);for(var i=0;i<arr.length;i++){$(arr[i].remove());}}window.onkeydown=function(e){var word = String.fromCharCode(e.keyCode);for(var i=0;i<arr.length;i++){var letter = $(arr[i].attr("name"));if(word==letter){$(arr[i].remove());score++;$("#score").html(score);break;}}}</script></head><body><div id="lose" onclick="start();"></div><div id="d-bottom"><div class="stop" onclick="start();">启动游戏</div><div class="stop">暂停游戏</div></div><div id="score">0</div></body>
</html>

键盘打字游戏简要代码相关推荐

Linux打字游戏程序代码,c语言shell打字游戏.pdf
一.实验说明 1. 环境登录无需密码自动登录 ,系统用户名shiyanlou ,密码shiyanlou 2. 环境介绍本实验环境采用带桌面的Ubuntu Linux环境 ,实验中用到桌面上的程序 ...
JS：打字游戏_键盘事件监听
1. 打字游戏屏幕随机出现字母或数字用户按下键盘,屏幕显示回答正确与否当用户按下ESC时游戏结束 <!DOCTYPE html> <html lang="en&quo ...
键盘输入盲打训练, 打字练习，打字游戏打字教程推荐
作为一个程序员键盘输入算是基本功,这一项肯定是要牢靠才行,以下我总结了几个不错的资源分享给大家: --祝玩的开心刚开始可以在这里训练下指头和按键的对应关系 http://www.typingstud ...
打字游戏代码_下一个打字稿代码的5大专业技巧
打字游戏代码 JavaScript与TypeScript (JavaScript vs TypeScript) JavaScript started its journey a few decades ...
仿金山打字通游戏 Java代码
Code: package com.mxs.util;import javax.swing.*; import java.awt.*; import java.awt.event.*;public c ...
Python 打字小游戏开发，来体验不一样的打字游戏乐趣（完结篇）
Python 打字小游戏开发,来体验不一样的打字游戏乐趣(完结篇) 资源下载完整代码 Python 打字小游戏开发,来体验不一样的打字游戏乐趣(第一篇) Python 打字小游戏开发,来体验不一样的 ...
python小游戏开发，使用python实现英语打字游戏
需求分析英文打字小游戏,要有多界面交互,界面整洁.美观,可调节游戏等级难度,可配置游戏信息. 要有游戏分数,游戏时间,动画特效,背景音乐,不同游戏等级的历史最高分记录. 拼写成功的英文单词显示中文意 ...
pygame简单的俄罗斯方块游戏和简单的打字游戏
1.pygame简单的俄罗斯方块游戏一.对战的方块管理定义一个BlockManage管理对战的方块根据BlockManage根据传入的玩家id返回方块,保证每个玩家拿到的方块序列是一致的,所以在 ...
pygame做一个简单的打字游戏
pygame做一个简单的打字游戏 1.基本代码下面的代码完成了每一秒在界面的顶部随机生成一个新的字母 # -*- coding=utf-8 -*- import pygame from pygame ...

键盘打字游戏简要代码

键盘打字游戏简要代码相关推荐

最新文章

热门文章