js写小游戏（打字母）

关键事件：

的Math.random（）产生0-1的随机数;
setInterval（）方法按照指定的周期（以毫秒计）来调用函数或计算表达式;
clearInterval（）方法取消由setInterval（）函数设定的定时执行操作;

clearInterval（）方法的参数必须是由setInterval（）返回的ID值;

注意： 要使用clearInterval（）方法，在创建执行定时操作时要使用全局变量
使用String.fromCharCode（代码）将数字转换成字符类型的字母;使用String.fromCharCode（代码）.toUpperCase（）将字母大写;
window.onkeypress键盘事件
inner H tml在js中是双向功能：获取对象的内容或向对象插入内容;
例如：<div id =“test”>演示</ div>，我们可以通过document.getElementById（'test'）。inner H tml来获取id为test对象的内嵌内容;
也可以对某对象插入内容，如document.getElementById（'test）.inner H tml ='演示'; 向ID为测试对象插入内容。

效果图：

具体代码：

<html>
<head>
<meta charset="utf-8" />
<title>字母小游戏</title>
<style type="text/css">
* {margin: 0px;padding: 0px;
}body {background: url(img/bg3.jpg);background-size: 100% 100%;background-repeat: no-repeat;
}#bottom {width: 100%;height: 70px;position: absolute;bottom: 0px;/* margin-left: 16%; */
}.botton {margin-left: 50px;width: 200px;height: 70px;background-image: url(img/startButton.jpg);background-size: 197px 68px;float: left;text-align: center;line-height: 70px;cursor: pointer;
}#score {width: 200px;height: 200px;position: absolute;/* bottom: 0px;right: 0px; 在右下角 */left:0px;top:0px;/* 左上角 */background-image: url(img/score2.jpg);background-size: 200px 200px;text-align: center;line-height: 180px;font-size: 40px;
}#time {width: 100px;height: 100px;position: absolute;right: 0px;top: 0px;text-align: center;line-height: 100px;font-size: 30px;
}#info {width: 500px;height: 300px;position: absolute;left: 450px;top: -60%;background-image: url(img/restart4.jpg);background-size: 500px 300px;cursor: pointer;text-align: center;line-height: 60px;color: blue;font-size: 25px;border-radius: 15px;
}@
keyframes drop {from {top: -60%;
}to {top: 0px;
}
}
</style>
<script src="js/jquery.js"></script>
<script>var arr = [];var T = 0;var score = 0;var createId = 0;var downId = 0;var timeId = 0;var time;var downspeed;var createspeed;var scoreParam;function start() {        //已经点击过了就不能再次点击,暂停以后才可以再次点击if (T == 0) {T++;score = 0;//分数清0time = 0;//时间清0var grade = document.getElementById("score");grade.innerHTML = score;var timeMessage = document.getElementById("time");timeMessage.innerHTML = time + "秒";downspeed = 200;createspeed = 1000;/* 定时器：根据返回值清除定时器*/timeId = setInterval("timeMessage()", 1000);createId = setInterval("create()", createspeed);//创建字母的速度downId = setInterval("down()", downspeed);//降落速度var info = document.getElementById("info");info.style.top = "-60%";}}function restart() {//点击提示图片继续//已经点击过了就不能再次点击,暂停以后才可以再次点击if (T == 0) {T++;time = 0;downspeed = 200;createspeed = 1000;/* 定时器：根据返回值清除定时器*/timeId = setInterval("timeMessage()", 1000);createId = setInterval("create()", createspeed);//创建字母的速度downId = setInterval("down()", downspeed);//降落速度var info = document.getElementById("info");info.style.top = "-60%";}}function create() {//创建一个图片对象var img = document.createElement("img");//生成A-Z的字母的随机数，也就是ASC码的65-90var characterNum = Math.ceil(65 + Math.random() * 25); //向上取整        //将unicode码转化为字母var letter = String.fromCharCode(characterNum);//生成图片img.src = "img/" + letter + ".jpg";img.name = letter;img.style.position = "absolute";//绝对定位img.style.width = "50px";//只设置宽度，高度自适应，防止图片失真//生成一个随机数，是为了让图片出现的水平位置不同 大概1300个随机数var left = Math.floor(Math.random() * 1300); //向下取整img.style.left = left + "px";img.style.top = "0px";//将图片放到数组里arr.push(img);document.body.appendChild(img);//页面放入图片}function down() {for (var i = 0; i < arr.length; i++) {var letter = arr[i];var top = letterPosition(letter.style.top);var grade = document.getElementById("score");if (top > 520) {//让图片从页面中消失letter.parentNode.removeChild(letter);//清除该字母在数组的存储arr.splice(i, 1);gameover();grade.innerHTML = score;}letter.style.top = top + 20 + "px";}}//  获取字母距离顶部的高度function letterPosition(top) {//传过来的top值为    5pxvar h = top.substring(0, top.indexOf("p"));//截取数字，获取高度return new Number(h);//数字格式化}//  暂停游戏function pause() {clearInterval(createId);clearInterval(downId);clearInterval(timeId);var pause = document.getElementById("pau");if (pause.innerHTML == "继续游戏") {createId = setInterval("create()", createspeed);downId = setInterval("down()", downspeed);timeId = setInterval("timeMessage()", 1000);pause.innerHTML = "暂停游戏";var info = document.getElementById("info");info.innerHTML = "休息会。。。";} else {pause.innerHTML = "继续游戏";}}//当敲击键盘时触发该函数window.onkeypress = function(e) {//获得按下的键的codevar code = e.keyCode;console.log(code);var grade = document.getElementById("score");var letter = String.fromCharCode(code).toUpperCase();for (var i = 0; i < arr.length; i++) {if (arr[i].name == letter) {score++;scoreParam = score;changeSpeed();grade.innerHTML = score;arr[i].parentNode.removeChild(arr[i]);arr.splice(i, 1);break;}}} //  游戏结束function gameover() {T--;for (var i = 0; i < arr.length; i++) {arr[i].parentNode.removeChild(arr[i]);}arr.splice(0, arr.length);clearInterval(createId);clearInterval(downId);clearInterval(timeId);var info = document.getElementById("info");info.style.animation = "drop 2s linear";info.style.top = "0px";//info.innerHTML = time + "秒"      var message = "就这样吧。。。";//提示信息if(score==0){message="发呆了。。"}else if(0<score && score<10){message="这么低哦";    }else if(10<=score && score<15){var msNum = Math.random()*10;//1到10的随机整数if(0<msNum && msNum <=3){message="加油，加油。。。";               }else if(3<msNum && msNum <=6){message="想什么呢，不好好玩！";}else{message="是不是走神了，分数有点低哦！";}}else{message="不错哦，敲键盘还是很快的嘛"}       info.innerHTML = message;}//  计时function timeMessage() {time++;var timeMessage = document.getElementById("time");timeMessage.innerHTML = time + "秒";}//  根据分数，改变速度function changeSpeed() {if (scoreParam >= 5 && scoreParam < 10) {//当分数小于10大于5downspeed = 150;//降落createspeed = 800;clearInterval(createId);clearInterval(downId);createId = setInterval("create()", createspeed);downId = setInterval("down()", downspeed);} else if (scoreParam >= 10 && scoreParam < 70) {downspeed = 120;createspeed = 700;clearInterval(createId);clearInterval(downId);createId = setInterval("create()", createspeed);downId = setInterval("down()", downspeed);}  else if (scoreParam >= 70) {downspeed = 50;createspeed = 200;clearInterval(createId);clearInterval(downId);createId = setInterval("create()", createspeed);downId = setInterval("down()", downspeed);}}
</script>
</head>
<body><div id="score">0</div><div id="bottom"><div id="sta" class="botton" onclick="start()">开始游戏</div><div id="pau" class="botton" onclick="pause()">暂停游戏</div></div>    <div id="time">0秒</div><div id="info" onclick="restart()"></div><!-- 点击图片继续开始 -->
</body>
</html>

js写小游戏（打字母）相关推荐

也分享自己做的JS扫雷小游戏
看了草根程序猿分享的JS扫雷小游戏想起去年的时候自己也做了一个于是也拿出来分享之先上截图~ 引用了jQuery,节省了很多鼠标点击上的判断界面显然都是照搬Windows的扫雷啦详细的内容注释 ...
开维控制精灵 Ctrl js 快手小游戏 - 自动消砖块
开维控制精灵 Ctrl.js 快手小游戏 - 自动消砖块 Ctrl.js是基于js语法规则的控制类脚本语言,用于自动化软件测试. Ctrl.js 需要在手机上下载"开维控制精灵", ...
JS扫雷小游戏(DOM (html+css+js))
一:效果图: 二:资源 js扫雷小游戏源代码下载地址 js贪吃蛇小游戏链接 python小黄脸大战小游戏链接 vue高仿网易云音乐app 三:源代码: html部分: <!DOCTYPE htm ...
js网页小游戏老虎不吃素
下载地址一款漂亮的网页小游戏,js网页小游戏老虎不吃素. dd:
手把手带你写Node.JS版本小游戏
JavaScript的出现催动了前端开发的萌芽,前后端分离促进了Vue.React等开发框架的发展,Weex.React-Native等的演变赋予了并存多端开发的能力,而Node.JS的面世无疑是推动 ...
Wiew 像写 Android UI 一样写小游戏布局
Wiew 项目地址: https://github.com/onlynight/Wiew 简易微信小游戏view系统以及touch系统.你可以想写Android UI一样写界面布局,处理点击事件. 预 ...
1.5万字详述 | 全开源：python写小游戏+AI强化学习与传统DFS/BFS控制分别实现
简介:本周的强化学习我们来到实践部分.我以我在 GitHub 上开源的项目 PiperLiu / Amazing-Brick-DFS-and-DRL 为对象,从零开始与各位朋友分享:如何用 pytho ...
利用原生js制作小游戏
1.编写函数: 该函数对游戏间隔时间.影响游戏的对象的绑定.开始.结束进行编写 /*** * @param {*} duration 间隔时间* @param {*} thisObj 绑定的this对 ...
1000行代码写小游戏（一）
用lua写的小游戏,主要玩法是点击进行采矿并和怪物搏斗等操作,人物属性有体力,血量,恢复,攻击,防御采矿可以挖到金币和经验,打怪升级最后决战boss赢取胜利,升级可以获得技能点增加属性,还有老虎机系 ...

js写小游戏（打字母）

js写小游戏（打字母）相关推荐

最新文章

热门文章