电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁(yè)技術(shù)文章
文章詳情頁(yè)

原生js實(shí)現(xiàn)的金山打字小游戲(實(shí)例代碼詳解)

瀏覽:85日期:2024-05-17 08:47:28

首先先來(lái)看一下效果圖

原生js實(shí)現(xiàn)的金山打字小游戲(實(shí)例代碼詳解)原生js實(shí)現(xiàn)的金山打字小游戲(實(shí)例代碼詳解)

如果感興趣的就來(lái)看一下Js源碼吧

//計(jì)分板var board = { dom: document.getElementById('score'), maxLost: 3, //最大丟失量 lost: 0, //當(dāng)前丟失了多少個(gè) score: 0, //當(dāng)前分?jǐn)?shù) render: function() { //顯示 this.dom.innerHTML = '<p>得分:' + this.score + '</p><p>丟失:' + this.lost + ' / ' + this.maxLost + '</p>'; }, //增加一個(gè)丟失數(shù) addLost: function() { if (this.lost === this.maxLost) { return; //游戲已經(jīng)結(jié)束了 } this.lost++; if (this.lost === this.maxLost) { //丟失量達(dá)到最大 game.gameOver(); } this.render(); }, reset: function() { this.lost = 0; this.score = 0; this.render(); }, //增加得分 addScore: function(number) { if (this.lost === this.maxLost) { //已經(jīng)結(jié)束了 return; } this.score += number; this.render(); }};board.render();var letters = []; //目前的所有字母,一個(gè)字母就是一個(gè)對(duì)象//字母的容器var divContainer = document.getElementById('letter-container');/** * 產(chǎn)生一個(gè)字母對(duì)象,并將其加入到數(shù)組中 */function createLetter() { //創(chuàng)建img元素 var img = document.createElement('img'); img.className = 'letter'; divContainer.appendChild(img); //設(shè)置src路徑 var charNumber = getRandom(65, 65 + 26); //字母的隨機(jī)ASCII碼 var char = String.fromCharCode(charNumber); img.src = 'http://www.hdgsjgj.cn/bcjs/img/letter/' + char + '.png'; //left隨機(jī) var left = getRandom(0, divContainer.clientWidth - img.width); img.style.left = left + 'px'; var letter = { dom: img, char: char, left: left, top: -img.height, //初始的top值 speed: getRandom(100, 500), //速度: 像素/秒 render: function() { this.dom.style.top = this.top + 'px'; }, // 每調(diào)用一次該方法,字母移動(dòng)一段距離 // duration是經(jīng)過(guò)的時(shí)間: 秒 move: function(duration) { var dis = duration * this.speed; //計(jì)算距離 this.top += dis; this.render(); }, kill: function() { //自殺 // 從數(shù)組中移除 var index = letters.indexOf(this); //找到字母在數(shù)組中的下標(biāo) if (index >= 0) { letters.splice(index, 1); } // 移除dom元素 this.dom.remove(); } }; letter.render(); letters.push(letter);}// 根據(jù)最小值和最大值產(chǎn)生一個(gè)隨機(jī)整數(shù)(不包含最大值)function getRandom(min, max) { // Math.random() 0~1 // Math.random() * (max - min) 0 ~ (max - min) // Math.random() * (max - min) + min min ~ max return Math.floor(Math.random() * (max - min) + min);}//游戲?qū)ο螅y(tǒng)籌規(guī)劃var game = { timerProduce: null, //自動(dòng)產(chǎn)生字母的timerid timerMove: null, //自動(dòng)移動(dòng)的timerid isOver: false, //自動(dòng)的,不斷的,產(chǎn)生字母 startProduce: function() { if (this.timerProduce) { return; //正在產(chǎn)生中,什么也不做 } this.timerProduce = setInterval(createLetter, 500); }, //停止自動(dòng)產(chǎn)生字母 stopProduce: function() { clearInterval(this.timerProduce); this.timerProduce = null; }, //開(kāi)始不斷的移動(dòng)所有字母 startMove: function() { if (this.timerMove) { return; } var duration = 0.016; //間隔時(shí)間,秒 this.timerMove = setInterval(function() { for (var i = 0; i < letters.length; i++) { var letter = letters[i]; //要移動(dòng)的字母 letter.move(duration); //判斷該字母是不是可以消除了 if (letter.top >= divContainer.clientHeight) { letter.kill(); i--; //丟失 board.addLost(); } } }, duration * 1000); }, //停止移動(dòng)所有字母 stopMove: function() { clearInterval(this.timerMove); this.timerMove = null; }, gameOver: function() { this.stopMove(); this.stopProduce(); document.getElementById('over').style.display = 'block'; this.isOver = true; }, restart: function() { //清空字母 for (var i = 0; i < letters.length; i++) { var letter = letters[i]; letter.kill(); i--; } this.startMove(); this.startProduce(); board.reset(); this.isOver = false; document.getElementById('over').style.display = 'none'; }};game.startProduce();game.startMove();//注冊(cè)事件window.onkeydown = function(e) { if (game.isOver) { return; } var key = e.key.toUpperCase(); //匹配 for (var i = 0; i < letters.length; i++) { var letter = letters[i]; if (letter.char === key) { letter.kill(); board.addScore(10); return; //只移除一個(gè) } }};

僅僅使用js的面向?qū)ο缶幊蹋蓯?ài)的金山打字小游戲就實(shí)現(xiàn)了

總結(jié)

到此這篇關(guān)于原生js實(shí)現(xiàn)的金山打字小游戲的文章就介紹到這了,更多相關(guān)js金山打字游戲內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!

標(biāo)簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: 室内室外厚型|超薄型|非膨胀型钢结构防火涂料_隧道专用防火涂料厂家|电话|价格|批发|施工 | 宝宝药浴-产后药浴-药浴加盟-艾裕-专注母婴调养泡浴 | 欧必特空气能-商用空气能热水工程,空气能热水器,超低温空气源热泵生产厂家-湖南欧必特空气能公司 | 防爆型气象站_农业气象站_校园气象站_农业四情监测系统「山东万象环境科技有限公司」 | 铸铝门厂家,别墅大门庭院大门,别墅铸铝门铜门[十大品牌厂家]军强门业 | 智能楼宇-楼宇自控系统-楼宇智能化-楼宇自动化-三水智能化 | 牛奶检测仪-乳成分分析仪-北京海谊 | 粘弹体防腐胶带,聚丙烯防腐胶带-全民塑胶 | 劳动法网-专业的劳动法和劳动争议仲裁服务网 | 砂磨机_立式纳米砂磨机_实验室砂磨机-广州儒佳化工设备厂家 | 青岛代理记账_青岛李沧代理记账公司_青岛崂山代理记账一个月多少钱_青岛德辉财税事务所官网 | 政府回应:200块在义乌小巷能买到爱情吗?——揭秘打工族省钱约会的生存智慧 | 北京印刷厂_北京印刷_北京印刷公司_北京印刷厂家_北京东爵盛世印刷有限公司 | 河南砖机首页-全自动液压免烧砖机,小型砌块水泥砖机厂家[十年老厂] | 洛阳防爆合格证办理-洛阳防爆认证机构-洛阳申请国家防爆合格证-洛阳本安防爆认证代办-洛阳沪南抚防爆电气技术服务有限公司 | 珠宝展柜-玻璃精品展柜-首饰珠宝展示柜定制-鸿钛展柜厂家 | 专业生物有机肥造粒机,粉状有机肥生产线,槽式翻堆机厂家-郑州华之强重工科技有限公司 | 深圳品牌设计公司-LOGO设计公司-VI设计公司-未壳创意 | 高精度电阻回路测试仪-回路直流电阻测试仪-武汉特高压电力科技有限公司 | 中药二氧化硫测定仪,食品二氧化硫测定仪|俊腾百科 | 茶叶百科网-茶叶知识与茶文化探讨分享平台 | 桂林腻子粉_内墙外墙抗裂砂浆腻子粉推荐广西鑫达涂料厂家供应 | 广州监控安装公司_远程监控_安防弱电工程_无线wifi覆盖_泉威安防科技 | 电磁辐射仪-电磁辐射检测仪-pm2.5检测仪-多功能射线检测仪-上海何亦仪器仪表有限公司 | 低浓度恒温恒湿称量系统,强光光照培养箱-上海三腾仪器有限公司 | 淘气堡_室内儿童乐园_户外无动力儿童游乐设备-高乐迪(北京) | 桂林腻子粉_内墙外墙抗裂砂浆腻子粉推荐广西鑫达涂料厂家供应 | 东莞韩创-专业绝缘骨架|马达塑胶零件|塑胶电机配件|塑封电机骨架厂家 | 新材料分散-高速均质搅拌机-超声波分散混合-上海化烁智能设备有限公司 | 植筋胶-粘钢胶-碳纤维布-碳纤维板-环氧砂浆-加固材料生产厂家-上海巧力建筑科技有限公司 | DNA亲子鉴定_DNA基因检测中心官方预约平台-严选好基因网 | 防火板_饰面耐火板价格、厂家_品牌认准格林雅| 电动高尔夫球车|电动观光车|电动巡逻车|电动越野车厂家-绿友机械集团股份有限公司 | PE拉伸缠绕膜,拉伸缠绕膜厂家,纳米缠绕膜-山东凯祥包装 | 楼梯定制_楼梯设计施工厂家_楼梯扶手安装制作-北京凌步楼梯 | 湖南教师资格网-湖南教师资格证考试网 | 新能源汽车电机定转子合装机 - 电机维修设备 - 睿望达 | 济南菜鸟驿站广告|青岛快递车车体|社区媒体-抖音|墙体广告-山东揽胜广告传媒有限公司 | 山东商品混凝土搅拌楼-环保型搅拌站-拌合站-分体仓-搅拌机厂家-天宇 | 不锈钢螺丝,不锈钢螺栓,不锈钢标准件-江苏百德特种合金有限公司 交变/复合盐雾试验箱-高低温冲击试验箱_安奈设备产品供应杭州/江苏南京/安徽马鞍山合肥等全国各地 | 压砖机、液压制砖机、静压砖机、环保砖机生产厂家—杜甫机械 |