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

您的位置:首頁技術文章
文章詳情頁

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

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

首先先來看一下效果圖

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

如果感興趣的就來看一下Js源碼吧

//計分板var board = { dom: document.getElementById('score'), maxLost: 3, //最大丟失量 lost: 0, //當前丟失了多少個 score: 0, //當前分數 render: function() { //顯示 this.dom.innerHTML = '<p>得分:' + this.score + '</p><p>丟失:' + this.lost + ' / ' + this.maxLost + '</p>'; }, //增加一個丟失數 addLost: function() { if (this.lost === this.maxLost) { return; //游戲已經結束了 } this.lost++; if (this.lost === this.maxLost) { //丟失量達到最大 game.gameOver(); } this.render(); }, reset: function() { this.lost = 0; this.score = 0; this.render(); }, //增加得分 addScore: function(number) { if (this.lost === this.maxLost) { //已經結束了 return; } this.score += number; this.render(); }};board.render();var letters = []; //目前的所有字母,一個字母就是一個對象//字母的容器var divContainer = document.getElementById('letter-container');/** * 產生一個字母對象,并將其加入到數組中 */function createLetter() { //創建img元素 var img = document.createElement('img'); img.className = 'letter'; divContainer.appendChild(img); //設置src路徑 var charNumber = getRandom(65, 65 + 26); //字母的隨機ASCII碼 var char = String.fromCharCode(charNumber); img.src = 'http://www.hdgsjgj.cn/bcjs/img/letter/' + char + '.png'; //left隨機 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'; }, // 每調用一次該方法,字母移動一段距離 // duration是經過的時間: 秒 move: function(duration) { var dis = duration * this.speed; //計算距離 this.top += dis; this.render(); }, kill: function() { //自殺 // 從數組中移除 var index = letters.indexOf(this); //找到字母在數組中的下標 if (index >= 0) { letters.splice(index, 1); } // 移除dom元素 this.dom.remove(); } }; letter.render(); letters.push(letter);}// 根據最小值和最大值產生一個隨機整數(不包含最大值)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);}//游戲對象,統籌規劃var game = { timerProduce: null, //自動產生字母的timerid timerMove: null, //自動移動的timerid isOver: false, //自動的,不斷的,產生字母 startProduce: function() { if (this.timerProduce) { return; //正在產生中,什么也不做 } this.timerProduce = setInterval(createLetter, 500); }, //停止自動產生字母 stopProduce: function() { clearInterval(this.timerProduce); this.timerProduce = null; }, //開始不斷的移動所有字母 startMove: function() { if (this.timerMove) { return; } var duration = 0.016; //間隔時間,秒 this.timerMove = setInterval(function() { for (var i = 0; i < letters.length; i++) { var letter = letters[i]; //要移動的字母 letter.move(duration); //判斷該字母是不是可以消除了 if (letter.top >= divContainer.clientHeight) { letter.kill(); i--; //丟失 board.addLost(); } } }, duration * 1000); }, //停止移動所有字母 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();//注冊事件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; //只移除一個 } }};

僅僅使用js的面向對象編程,可愛的金山打字小游戲就實現了

總結

到此這篇關于原生js實現的金山打字小游戲的文章就介紹到這了,更多相關js金山打字游戲內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網!

標簽: JavaScript
相關文章:
主站蜘蛛池模板: jrs高清nba(无插件)直播-jrs直播低调看直播-jrs直播nba-jrs直播 上海地磅秤|电子地上衡|防爆地磅_上海地磅秤厂家–越衡称重 | 干式变压器厂_干式变压器厂家_scb11/scb13/scb10/scb14/scb18干式变压器生产厂家-山东科锐变压器有限公司 | 铝单板_铝窗花_铝单板厂家_氟碳包柱铝单板批发价格-佛山科阳金属 | 办公室家具公司_办公家具品牌厂家_森拉堡办公家具【官网】 | 螺旋绞龙叶片,螺旋输送机厂家,山东螺旋输送机-淄博长江机械制造有限公司 | arch电源_SINPRO_开关电源_模块电源_医疗电源-东佑源 | 合肥钣金加工-安徽激光切割加工-机箱机柜加工厂家-合肥通快 | 南京种植牙医院【官方挂号】_南京治疗种植牙医院那个好_南京看种植牙哪里好_南京茀莱堡口腔医院 尼龙PA610树脂,尼龙PA612树脂,尼龙PA1010树脂,透明尼龙-谷骐科技【官网】 | 天津仓库出租网-天津电商仓库-天津云仓一件代发-【博程云仓】 | 集装箱标准养护室-集装箱移动式养护室-广州璟业试验仪器有限公司 | 老房子翻新装修,旧房墙面翻新,房屋防水补漏,厨房卫生间改造,室内装潢装修公司 - 一修房屋快修官网 | 校园气象站_超声波气象站_农业气象站_雨量监测站_风途科技 | 天津货架厂_穿梭车货架_重型仓储货架_阁楼货架定制-天津钢力仓储货架生产厂家_天津钢力智能仓储装备 | 定时排水阀/排气阀-仪表三通旋塞阀-直角式脉冲电磁阀-永嘉良科阀门有限公司 | 上海冠顶工业设备有限公司-隧道炉,烘箱,UV固化机,涂装设备,高温炉,工业机器人生产厂家 | 骁龙云呼电销防封号系统-axb电销平台-外呼稳定『免费试用』 | 重庆中专|职高|技校招生-重庆中专招生网 | 高楼航空障碍灯厂家哪家好_航空障碍灯厂家_广州北斗星障碍灯有限公司 | 动库网动库商城-体育用品专卖店:羽毛球,乒乓球拍,网球,户外装备,运动鞋,运动包,运动服饰专卖店-正品运动品网上商城动库商城网 - 动库商城 | 减速机电机一体机_带电机减速器一套_德国BOSERL电动机与减速箱生产厂家 | 厌氧工作站-通用型厌氧工作站-上海胜秋科学仪器有限公司 | 传递窗_超净|洁净工作台_高效过滤器-传递窗厂家广州梓净公司 | 合肥汽车充电桩_安徽充电桩_电动交流充电桩厂家_安徽科帝新能源科技有限公司 | 东莞ERP软件_广州云ERP_中山ERP_台湾工厂erp系统-广东顺景软件科技有限公司 | 高楼航空障碍灯厂家哪家好_航空障碍灯厂家_广州北斗星障碍灯有限公司 | 模型公司_模型制作_沙盘模型报价-中国模型网 | 环氧铁红防锈漆_环氧漆_无溶剂环氧涂料_环氧防腐漆-华川涂料 | 冷藏车-东风吸污车-纯电动环卫车-污水净化车-应急特勤保障车-程力专汽厂家-程力专用汽车股份有限公司销售二十一分公司 | 阀门智能定位器_电液动执行器_气动执行机构-赫尔法流体技术(北京)有限公司 | 定制液氮罐_小型气相液氮罐_自增压液氮罐_班德液氮罐厂家 | 动力配电箱-不锈钢配电箱-高压开关柜-重庆宇轩机电设备有限公司 聚天冬氨酸,亚氨基二琥珀酸四钠,PASP,IDS - 远联化工 | 铝箔-铝板-花纹铝板-铝型材-铝棒管-上海百亚金属材料有限公司 | 包塑丝_高铁绑丝_地暖绑丝_涂塑丝_塑料皮铁丝_河北创筹金属丝网制品有限公司 | 曙光腾达官网-天津脚手架租赁-木板架出租-移动门式脚手架租赁「免费搭设」 | 工作服定制,工作服定做,工作服厂家-卡珀职业服装(苏州)有限公司 | 平面钻,法兰钻,三维钻-山东兴田阳光智能装备股份有限公司 | 论文查重_免费论文查重_知网学术不端论文查重检测系统入口_论文查重软件 | 烟台螺纹,烟台H型钢,烟台钢材,烟台角钢-烟台市正丰金属材料有限公司 | 水冷式工业冷水机组_风冷式工业冷水机_水冷螺杆冷冻机组-深圳市普威机械设备有限公司 | 罗氏牛血清白蛋白,罗氏己糖激酶-上海嵘崴达实业有限公司 | 杭州高温泵_热水泵_高温油泵|昆山奥兰克泵业制造有限公司 |