原生JS写打字游戏
来源：互联网 发布：linux 火锅平台 编辑：程序博客网 时间：2024/05/21 21:39
新手第一次写出的完整项目，在火狐完美运行（背景图源自百度）。<!DOCTYPE html><html lang="en"><head> <meta charset="gbk"> <title>气球</title> <style> *{ padding: 0; margin: 0; -moz-user-select: none; } body{ background: rgba(0, 0, 0, 0.14); } #balloon{ position: absolute; top:0; right:220px; background: url("sky.jpg"); width: 1000px; height: 635px; } #menu{ width: 100px; height:635px; position: absolute; right: 70px; } #menu span{ display: block; margin-top: 10px; cursor: default; text-align: center} #menu input{ width: 100px; margin-top: 20px;background: rgba(0, 0, 0, 0.33); border-radius: 50%;box-shadow: 0 0 5px 1px red; } .balloon_head{ position: absolute; border-radius: 50% 50% 23% 50%; transform: rotate(45deg); background: rgba(25, 0, 255, 0.68); box-shadow: -5px -5px 10px 1px rgba(0, 0, 0, 0.7) inset; cursor: pointer; } .balloon_foot{ border: solid 4px transparent; border-bottom-color: #FF0000; transform: rotate(-45deg); position: absolute; bottom: -4px; right: -4px; } .balloon_text{ transform: rotate(-45deg); position: absolute; bottom: 14px; right: 18px; font-size: 13px; font-weight: 600; } </style></head><body><div id="menu"> <span>得分：</span> <span> 0 分</span> <span>总数：</span> <span> 0 分</span> <input type="button" value="难度一"> <input type="button" value="难度二"> <input type="button" value="难度三"> <input type="button" value="暂停"> <input type="button" value="重新开始"></div><div id="balloon"></div></body><script> document.onload=addmenuevents(); var grade= 0; var Total=0; var grade_text=document.getElementsByTagName("span"); var input=document.getElementsByTagName("input"); var keys=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"]; function addmenuevents(){ var input=document.getElementsByTagName("input"); input[0].onclick=function(e){ //为不同难度选项赋函数 e.target.style.backgroundColor="blue"; //事件委托的方式改变按键颜色 dif(3); }; input[1].onclick=function(e){ e.target.style.backgroundColor="blue"; dif(6); }; input[2].onclick=function(e){ e.target.style.backgroundColor="blue"; dif(9); }; } function dif(n){ //执行时同时清除所有选择难度按钮的功能 balloon_start(n); for(var i= 0,l=input.length-2;i<l;i++){ input[i].onclick=null; } input[3].onclick= pause; input[4].onclick=stop; addevents(); //执行时添加按键和鼠标事件 } function pause(e){ e.target.style.backgroundColor="blue"; var balloons=document.getElementsByClassName("balloon_head"); for (var i= 0,l=balloons.length;i<l;i++){ console.log(balloons[i].time); clearInterval(balloons[i].time); } document.onmousedown=null; document.onkeyup=null; input[3].onclick=restart; } function restart(e){ e.target.style.backgroundColor="rgba(0, 0, 0, 0.33)"; init(); addevents(); input[3].onclick=pause; } function stop(){ input[3].click(); var grade_text=document.getElementsByTagName("span"); grade=0; Total=0; grade_text[1].innerHTML=' ' + 0 + ' 分';//停止时重置记分板 grade_text[3].innerHTML=' ' + 0 + ' 分'; var balloons=document.getElementsByClassName("balloon_head"); for (var i= 0,l=balloons.length;i<l;i++){ console.log(balloons[i].time); clearInterval(balloons[i].time); } for(var j= 0,input_l=input.length-1;j<input_l;j++){ input[j].style.backgroundColor="rgba(0, 0, 0, 0.33)"; } var balloon=document.getElementById("balloon"); balloon.innerHTML = null; input[3].onclick = null; addmenuevents(); //停止时同时恢复各个按键的功能 } function addevents(){ document.onkeyup=keyup; document.onmousedown=mousedown; } function balloon_start(n){ product(n); init(); } function product(n) { //生成气球 for (var i = 0; i < n; i++) { var balloon_box = document.createElement("div"); balloon_box.className = "balloon_head"; balloon_box.style.left =Math.random() * 850+50+"px"; //随机出现位子 balloon_box.style.top = "567px"; //初始位置距顶部距离 balloon_box.style.width="50px"; //生成气球的宽 balloon_box.style.height="50px"; //生成气球的高 balloon_box.style.opacity=1; //透明度 balloon_box.style.background=color(); //随机生成气球颜色 var balloon_text= document.createElement("div"); balloon_text.className="balloon_text"; balloon_text.innerHTML=keys[get_text()]; //随机文字内容 balloon_text.style.opacity=1; //必须在js代码中给属性赋值才能在js中修改该属性 var balloon_foot = document.createElement("div"); //小尾巴 balloon_foot.className="balloon_foot"; balloon_foot.style.borderBottomColor=color(); //随机生成小尾巴颜色 balloon_box.appendChild(balloon_text); balloon_box.appendChild(balloon_foot); document.getElementById('balloon').appendChild(balloon_box); } } function color(){ //返回一个rbg颜色值 this.r=Math.floor(1+Math.random()*255); this.b=Math.floor(1+Math.random()*255); this.g=Math.floor(1+Math.random()*255); return "rgb("+r+","+g+","+b+")" } function get_text(){ return Math.floor(Math.random()*26); } function init(){ //初始化 var balloons=document.getElementsByClassName("balloon_head"); for(var i= 0,l=balloons.length;i<l;i++) { balloons[i].speed =Math.random() * 5 + 1; balloons[i].time = setInterval(function () { this.style.top = this.offsetTop - this.speed + 'px'; if (this.offsetTop < -80) { Total++; grade_text[3].innerHTML = ' ' + Total + ' 分'; clearInterval(this.time); this.parentNode.removeChild(this); product(1); move() } }.bind(balloons[i]), 1000 / 40); } } function keyup(e){ //键盘输入 var text=document.getElementsByClassName("balloon_text"); for (var i= 0,l=text.length;i<l;i++){ if (keys[e.keyCode - 65] == text[i].innerHTML) { grade++; Total++; grade_text[1].innerHTML = ' ' + grade + ' 分'; grade_text[3].innerHTML = ' ' + Total + ' 分'; clearInterval(text[i].parentNode.time); //清除原有定时器防止顶部自动移除 text[i].style.opacity = 0; //点击时隐藏文字 text[i].clear_time = setInterval(function () { //移除时效果 this.parentNode.style.top=this.parentNode.offsetTop-this.parentNode.speed+"px"; //重新设置向上运动 this.parentNode.style.width = parseInt(this.parentNode.style.width) - 6 + "px"; //缩小宽度 this.parentNode.style.height = parseInt(this.parentNode.style.height) - 6 + "px"; //缩小长度 this.parentNode.style.opacity -= 0; //点击时隐藏文字 if (parseInt(this.parentNode.style.width) < 10) { clearInterval(this.clear_time); this.parentNode.parentNode.removeChild(this.parentNode); product(1); move(); } }.bind(text[i]), 50); } } } function mousedown(e){ //为每一个气球添加鼠标事件 if(e.target.className=='balloon_head'){ e.target.firstChild.style.opacity=0; //点击是隐藏文字 var clear_time=setInterval(function(){ //移除时效果 e.target.style.width=parseInt( e.target.style.width)-6+"px"; //缩小宽度 e.target.style.height=parseInt( e.target.style.height)-6+"px"; //缩小长度 if(parseInt( e.target.style.width)<10){ Total++; grade_text[3].innerHTML = ' ' + Total + ' 分'; e.target.parentNode.removeChild(e.target); clearInterval(clear_time); clearInterval(e.target.time); product(1); move(); } }.bind(e),50); //bind 绑定事件 } } function move(){ //上升 var balloons=document.getElementsByClassName("balloon_head"); var l=balloons.length-1; balloons[l].speed =Math.random() * 5 + 1; balloons[l].time = setInterval(function () { this.style.top = this.offsetTop - this.speed + 'px'; if (this.offsetTop < -80) { Total++; grade_text[3].innerHTML = ' ' + Total + ' 分'; clearInterval(this.time); this.parentNode.removeChild(this); product(1); //顶部自动生成新气球 move() } }.bind(balloons[l]), 1000 / 40); //bind（为计时器绑定） }</script></html>
阅读全文
0 0
- 原生JS写打字游戏
- js+canvas+html 写的打字游戏
- JavaScript写的打字游戏
- JS打字特效 JS 原生代码
- 原生js写的贪吃蛇网页版游戏
- 自己写的一个打字游戏
- jQuery 写的简单打字游戏
- Java 写的打字游戏，不喜勿喷
- 原生js写tab
- 原生js写ajax
- 原生js写手风琴
- 原生javascript开发打字游戏---代码重构版本
- js的打字游戏的例子
- 打字游戏
- 打字游戏
- 打字游戏
- 打字游戏
- 打字游戏
- hibernate笔记06 hibernate事务代码规范写法
- openfalcon 使用 swcollector 监控交换机等网络设备 配合着
- Jetson TX1/TX2 deviceQuery
- 每天一点ES6（一）
- Spring 定时任务之 @Scheduled cron表达式
- 原生JS写打字游戏
- 如何通过ARM Compute Library写深度学习模型
- Jmeter 3.2 环境配置
- python学习2——字符串
- 七牛图片上传的使用心得[JS篇]
- Oracle 获取一个月的所有日期
- 自定义控件Topbar 升级版
- ddddd
- Android Studio类中实现Serializable自动生成serialVersionUID
