原生JS成语接龙小游戏

1、界面实现及逻辑判断

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>成语接龙机器人</title><style type="text/css">body,div,span,input{margin: 0px;padding: 0px;}body{background-color: rgba(215, 215, 215, 1);}#box{margin: 1vh auto;width: 430px;height: 97vh;border: 3px solid rgba(0, 0, 0, 1);border-radius: 6px;box-shadow: 4px 3px 7px rgba(0, 0, 0, 0.7);overflow: hidden;}/*head start*/#box .head{width: 430px;height: 9vh;color: rgba(255, 255, 255, 1);font-size: 7vh;font-family: "楷体";text-align: center;text-shadow: 3px 4px 7px rgba(255, 255, 255, 0.5);background-color: rgba(0, 0, 0, 0.7);box-shadow: 4px 3px 7px rgba(0, 0, 0, 1);}/*head end*//*middle start*/#screen{width: 430px;height: 81vh;background-color: rgba(255, 255, 255, 0.5);overflow: auto;}/*头像*/#screen .header{width: 36px;height: 36px;background-color: rgba(255, 165, 0, 1);border-radius: 9px;}/*文本框*/#screen [class$="send"]{width: 300px;position: relative;}#screen [class$="arrow"]{border: 8px solid transparent;position: absolute;top: 10px;z-index: 99;}#screen [class$="text"]{padding: 9px;font-family: "楷体";background: rgb(172,218,71);border-radius: 6px;box-sizing: border-box;position: absolute;}/*对方*/#screen .other-side{margin: 6px auto;overflow: -webkit-paged-x;float: left;}#screen .other-side .left-send{float: left;}#screen .other-side .left-send .left-arrow{border-right-color: rgb(172,218,71);left: 4px;}#screen .other-side .left-send .left-text{left: 20px;}/*自己*/#screen .myself{margin: 6px auto;overflow: -webkit-paged-x;float: right;}#screen .myself .right-send{float: right;}#screen .myself .right-send .right-arrow{border-left-color: rgb(172,218,71);right: 4px;}#screen .myself .right-send .right-text{right: 20px;}/*滚动条*/#screen::-webkit-scrollbar{width: 4px;}#screen::-webkit-scrollbar-track{box-shadow: inset 0 0 4px rgba(0,0,0,0.3);border-radius: 12px;}#screen::-webkit-scrollbar-thumb{background-color: rgba(75, 180, 225, 1);border-radius: 12px;}/*middle end*//*foot start*/#box .foot{width: 430px;height: 7vh;background-color: rgba(0, 0, 0, 0.5);display: flex;box-shadow: 3px -1px 9px rgba(0, 0, 0, 1);}#box .foot #input{margin: auto;width: 321px;height: 34px;font-size: 24px;font-family: "楷体";border: 1px solid transparent;display: block;border-radius: 6px;box-shadow: 4px 3px 12px rgba(0, 0, 0, 1);}#box .foot #but{margin: auto;width: 64px;height: 36px;font-size: 24px;font-family: "楷体";text-align: center;line-height: 36px;background-color: rgba(134, 215, 43, 1);display: block;border-radius: 3px;box-shadow: 4px 3px 12px rgba(0, 0, 0, 1);cursor: pointer;}/*foot end*/</style></head><body><div id="box"><!--head--><div class="head">成语接龙</div><!--middle--><div id="screen"><!-- 对方 --><div class="other-side"><div class="header" style="float: left;"></div><div class="left-send"><div class="left-arrow"></div><div class="left-text">来啦,老弟(老妹儿)(*^3^*)<br/>输入"开始"来局成语接龙吧(~O~)<br/>告诉你个小秘密,ctrl+enter可以快捷发送哦(^-^)</div></div></div><!-- 自己 --><div class="myself"><div class="header" style="float: right;"></div><div class="right-send"><div class="right-arrow"></div><div class="right-text">哈哈哈...</div></div></div></div><!--foot--><div class="foot"><input id="input" type="text" autofocus="autofocus" /><div id="but">发送</div></div></div><!--引入成语库--><script type="text/javascript" src="js/db.js" ></script><!--script--><script type="text/javascript">var screen = document.getElementById("screen");var input = document.getElementById("input");var but = document.getElementById("but");var out = "";var power = false;function main(){if(input.value==null || input.value==""){reply("请输入有意义的内容！！！");input.focus();power = false;}else if(input.value == "开始"){var num = Math.ceil(Math.random()*100);out = listWords[num];send(input.value);reply(out);power = true;}else if(power){judge(input.value);}else{send(input.value);reply("输入'开始'才能成语接龙哦(^-^)");power = false;}}function send(paramet){screen.innerHTML += "<div class='myself'>"+"<div class='header' style='float: right;'></div>"+"<div class='right-send'>"+"<div class='right-arrow'></div>"+"<div class='right-text'>"+paramet+"</div>"+"</div>"+"</div>";input.value = "";input.focus();screen.lastChild.scrollIntoView();//将最后一个对话框滚动至可见区域}function reply(paramet){screen.innerHTML += "<div class='other-side'>"+"<div class='header' style='float: left;'></div>"+"<div class='left-send'>"+"<div class='left-arrow'></div>"+"<div class='left-text'>"+paramet+"</div>"+"</div>"+"</div>";screen.lastChild.scrollIntoView();//将最后一个对话框滚动至可见区域}//鼠标点击发送but.onclick = function(){main();}//快捷键发送document.onkeypress = function(event){var e = event || window.event;var key = e.keyCode || e.which;if(key == 10){//同时按下ctrl和entermain();}}function judge(str){if(str.length == 4){if(listWords.indexOf(str) == -1){send(str);reply("喂喂喂,不准耍赖啊...");power = false;}else{if(out.charAt(3) == str.charAt(0)){var start = listWords.join("").indexOf(str.charAt(3));var end = start + 4;if(start%4 == 0){out = listWords.join("").substring(start,end);send(str);reply(out);power = true;}else{send(str);reply("是在下输了...");power = false;}}else{send(str);reply("哈哈哈,你输了");power = false;}}}else{send(str);reply("游戏中不要开小差啊！");power = false;}}</script></body>
</html>

2、成语数据db.js

var listWords=["金蝉脱壳","百里挑一","金玉满堂","背水一战","霸王别姬","天上人间","不吐不快","海阔天空","情非得已","满腹经纶","兵临城下","春暖花开","插翅难逃","黄道吉日","天下无双","偷天换日","两小无猜","卧虎藏龙","珠光宝气","簪缨世族","花花公子","绘声绘影","国色天香","相亲相爱","八仙过海","金玉良缘","掌上明珠","皆大欢喜","逍遥法外","生财有道","极乐世界","情不自禁","愚公移山","魑魅魍魉","龙生九子","精卫填海","海市蜃楼","高山流水","卧薪尝胆","壮志凌云","金枝玉叶","四海一家","穿针引线","无忧无虑","无地自容","三位一体","落叶归根","相见恨晚","惊天动地","滔滔不绝","相濡以沫","长生不死","原来如此","女娲补天","三皇五帝","万箭穿心","水木清华","窈窕淑女","破釜沉舟","天涯海角","牛郎织女","倾国倾城","飘飘欲仙","福星高照","妄自菲薄","永无止境","学富五车","饮食男女","英雄豪杰","国士无双","塞翁失马","万家灯火","石破天惊","精忠报国","养生之道","覆雨翻云","六道轮回","鹰击长空","日日夜夜","厚德载物","亡羊补牢","万里长城","黄金时代","出生入死","一路顺风","随遇而安","千军万马","郑人买履","棋逢对手","叶公好龙","后会无期","守株待兔","凤凰于飞","一生一世","花好月圆","世外桃源","韬光养晦","画蛇添足","青梅竹马","风花雪月","滥竽充数","总而言之","没完没了","欣欣向荣","时光荏苒","差强人意","好好先生","无懈可击","随波逐流","袖手旁观","群雄逐鹿","血战到底","唯我独尊","买椟还珠","龙马精神","一见钟情","喜闻乐见","负荆请罪","三人成虎","河东狮吼","程门立雪","金戈铁马","笑逐颜开","千钧一发","纸上谈兵","风和日丽","邯郸学步","大器晚成","庖丁解牛","甜言蜜语","雷霆万钧","浮生若梦","大开眼界","汗牛充栋","百鸟朝凤","以德服人","白驹过隙","难兄难弟","鬼哭神嚎","声色犬马","指鹿为马","龙争虎斗","雾里看花","男大当婚","未雨绸缪","南辕北辙","三从四德","一丝不挂","高屋建瓴","阳春白雪","杯弓蛇影","闻鸡起舞","四面楚歌","登堂入室","张灯结彩","而立之年","饮鸩止渴","杏雨梨云","龙凤呈祥","勇往直前","左道旁门","莫衷一是","马踏飞燕","掩耳盗铃","大江东去","凿壁偷光","色厉内荏","花容月貌","越俎代庖","鳞次栉比","美轮美奂","缘木求鱼","再接再厉","马到成功","红颜知己","赤子之心","迫在眉睫","风流韵事","相形见绌","诸子百家","鬼迷心窍","星火燎原","画地为牢","岁寒三友","花花世界","纸醉金迷","狐假虎威","纵横捭阖","沧海桑田","不求甚解","暴殄天物","吃喝玩乐","乐不思蜀","身不由己","小家碧玉","文不加点","天马行空","人来人往","千方百计","天高地厚","万人空巷","争分夺秒","如火如荼","大智若愚","斗转星移","七情六欲","大禹治水","空穴来风","孟母三迁","绘声绘色","九五之尊","随心所欲","干将莫邪","相得益彰","借刀杀人","浪迹天涯","刚愎自用","镜花水月","黔驴技穷","肝胆相照","多多益善","叱咤风云","杞人忧天","作茧自缚","一飞冲天","殊途同归","风卷残云","因果报应","无可厚非","赶尽杀绝","天长地久","飞龙在天","桃之夭夭","南柯一梦","口是心非","江山如画","风华正茂","一帆风顺","一叶知秋","草船借箭","铁石心肠","望其项背","头晕目眩","大浪淘沙","纵横天下","有问必答","无为而治","釜底抽薪","吹毛求疵","好事多磨","空谷幽兰","悬梁刺股","白手起家","完璧归赵","忍俊不禁","沐猴而冠","白云苍狗","贼眉鼠眼","围魏救赵","烟雨蒙蒙","炙手可热","尸位素餐","出水芙蓉","礼仪之邦","一丘之貉","鹏程万里","叹为观止","韦编三绝","今生今世","草木皆兵","宁缺毋滥","回光返照","露水夫妻","讳莫如深","贻笑大方","紫气东来","万马奔腾","一诺千金","老马识途","五花大绑","捉襟见肘","瓜田李下","水漫金山","苦心孤诣","可见一斑","五湖四海","虚怀若谷","欲擒故纵","风声鹤唳","毛遂自荐","蛛丝马迹","中庸之道","迷途知返","自由自在","龙飞凤舞","树大根深","雨过天晴","乘风破浪","筚路蓝缕","朝三暮四","患得患失","君子好逑","鞭长莫及","竭泽而渔","飞黄腾达","囊萤映雪","飞蛾扑火","自怨自艾","风驰电掣","白马非马","退避三舍","三山五岳","称心如意","望梅止渴","茕茕孑立","振聋发聩","运筹帷幄","逃之夭夭","杯水车薪","有的放矢","矫枉过正","睚眦必报","姗姗来迟","一鸣惊人","孜孜不倦","一马平川","入木三分","沆瀣一气","天伦之乐","兄弟阋墙","藕断丝连","心猿意马","想入非非","盲人摸象","眉飞色舞","三教九流","高楼大厦","锲而不舍","过犹不及","狗尾续貂","斗酒学士","高山仰止","形影不离","小心翼翼","返璞归真","见贤思齐","按图索骥","枪林弹雨","桀骜不驯","遇人不淑","道貌岸然","名扬四海","虚与委蛇","门可罗雀","水落石出","不卑不亢","无法无天","拔苗助长","大快朵颐","因地制宜","单刀直入","时来运转","天方夜谭","一蹴而就","踌躇满志","战无不胜","插翅难飞","图穷匕见","鬼话连篇","亢龙有悔","望洋兴叹","爱屋及乌","惊鸿一瞥","风华绝代","名胜古迹","如履薄冰","持之以恒","潜移默化","昙花一现","巫山云雨","狡兔三窟","栉风沐雨","骇人听闻","断章取义","曲突徙薪","谢天谢地","脱颖而出","垂帘听政","一马当先","不耻下问","不以为然","春华秋实","欲盖弥彰","人琴俱亡","投鼠忌器","歧路亡羊","金风玉露","落花流水","春风化雨","心如刀割","锱铢必较","一叶障目","来历不明","名副其实","中流砥柱","绕梁三日","安步当车","放荡不羁","天衣无缝","自相矛盾","神机妙算","沧海一粟","冲锋陷阵","龙虎风云","言简意赅","九死一生","铁树开花","画龙点睛","风雨无阻","不耻下问","不以为然","春华秋实","欲盖弥彰","人琴俱亡","投鼠忌器","歧路亡羊","金风玉露","落花流水","春风化雨","心如刀割","锱铢必较","一叶障目","来历不明","名副其实","中流砥柱","绕梁三日","安步当车","放荡不羁","天衣无缝","自相矛盾","神机妙算","沧海一粟","冲锋陷阵","龙虎风云","言简意赅","九死一生","铁树开花","画龙点睛","风雨无阻","坐井观天","奇货可居","浮光掠影","牝鸡司晨","沽名钓誉","天作之合","甚嚣尘上","铩羽而归","劫后余生","泾渭分明","节哀顺变","有恃无恐","不绝如缕","马革裹尸","监守自盗","耳濡目染","金屋藏娇","不约而同","逐鹿中原","龙潭虎穴","江郎才尽","明日黄花","栩栩如生","人山人海","面面相觑","唇亡齿寒","知法犯法","相敬如宾","曾几何时","欢聚一堂","纷至沓来","李代桃僵","毛骨悚然","衣冠禽兽","有凤来仪","见微知著","旗鼓相当","无与伦比","摸金校尉","牛头马面","凤毛麟角","难得糊涂","衣香鬓影","马到功成","鸠占鹊巢","狭路相逢","春秋笔法","厉兵秣马","约法三章","豁然开朗","平步青云","步步为营","蝇营狗苟","心如止水","从善如流","殚精竭虑","十字路口","矢志不渝","九九归一","井底之蛙","居安思危","不一而足","周而复始","望穿秋水","秦晋之好","不落窠臼","司空见惯","怙恶不悛","百年好合","出神入化","身体力行","敬谢不敏","嗤之以鼻","天之骄子","贤妻良母","能说会道","进退维谷","甘之如饴","人心不古","颐指气使","墨守成规","左右逢源","回心转意","插科打诨","别来无恙","翩翩公子","穷兵黩武","舌战群儒","字字珠玑","义无反顾"];

原生JS成语接龙小游戏相关推荐

简单c语言实现的成语接龙小游戏
一.目标: 成语接龙小游戏,玩家输入一个成语,程序(电脑)输出一个.按成语接龙规则(最后一个字与接下来第一个字相同) 二.算法流程图: 三.实现代码: #include<stdio.h> ...
c语言成语接龙编程,C语言完成成语接龙小游戏
用C语言实现成语接龙小游戏(新手上路,大神勿喷) 1.首先需要找到一个成语库(从网上下载即可,保存为.txt文件) 2.整体思路如下由于要用的成语保存在文件里,一边用一边读取会降低代码的效率,所以我 ...
python成语接龙到为所欲为_Python小伙用简单爬虫实现成语接龙小游戏！
闲来无事,写了一个成语接龙小游戏,抓取某成语接龙网站内容,请大家指正. Python实现这个功能非常简单,当然,这里我也是写了个简单版的,实现了基本功能就好.话不多说,先上干货: 开发前准备及思路: ...
C语言接龙,C语言完成成语接龙小游戏
用C语言实现成语接龙小游戏(新手上路,大神勿喷) 1.首先需要找到一个成语库(从网上下载即可,保存为.txt文件) 2.整体思路如下由于要用的成语保存在文件里,一边用一边读取会降低代码的效率,所以我 ...
原生JS实现的h5小游戏-植物大战僵尸
代码地址如下: http://www.demodashi.com/demo/12755.html 项目介绍本项目是利用原生js实现的h5小游戏-植物大战僵尸,主要结合了一下自己对于h5小游戏的理解, ...
C语言完成成语接龙小游戏
用C语言实现成语接龙小游戏(新手上路,大神勿喷) 1.首先需要找到一个成语库(从网上下载即可,保存为.txt文件) 2.整体思路如下由于要用的成语保存在文件里,一边用一边读取会降低代码的效率,所以我 ...
我用 Python 自制成语接龙小游戏，刺激
在 https://github.com/pwxcoo/chinese-xinhua 项目中可以下载到中华成语的语料库,该项目收录包括 14032 条歇后语,16142 个汉字,264434 个词语, ...
python爬虫的使用——成语接龙小游戏
python爬虫的使用--成语接龙小游戏游戏介绍本游戏采用python进行开发,利用爬虫技术,能够自动获取代理服务器IP地址,可从常用汉字中选取查找成语随机出题,可进行人与电脑的对弈,可进行多轮较 ...
html flappybird小游戏代码,原生js实现Flappy Bird小游戏
这是一个特别简单的用原生js实现的一个小鸟游戏,比较简单,适合新手练习. html结构 css样式 #game { width: 800px; height: 600px; border: 1px s ...
原生js实现一个连连看小游戏（一）
前几天使用原生的js写了一个连连看小游戏,地址:连连看(js),基本功能都实现了,运行截图为: 根据游戏规则获取开发思路创建棋盘格生成随机不重复数字映射到棋盘格鼠标点击事件寻路,无通路,则到 ...

原生JS成语接龙小游戏

原生JS成语接龙小游戏相关推荐

最新文章

热门文章