jquery动画--字母消除游戏

1.实现点击开始游戏后网页随机生成带有背景颜色的字母

2.按下键盘上的字母，网页中与之匹配的字母下落消失

3.字母成功消失后分数累加

如下：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>字母消除游戏</title><script src="js/jquery.js"></script><style>body {width: 100%;padding: 0;margin: 0}/* 存放随机生成的字母的span的类样式 */.letter {position: absolute;width: 30px;height: 30px;text-align: center;padding: 5px;}#start {width: 100px;text-align: center;background-color: #0070b5;color: #ffffff;padding: 15px 15px;margin: 0 auto}#start:hover {cursor: pointer}#score {font-size: 46px;text-align: right;top: 30px;right: 50px;display: none}</style>
</head>
<body><div id="score">0</div><div id="start">开始游戏</div><script>$(function () {var score = 0;// 分数$("#start").click(function () {$("#score").show();//显示分数$(this).fadeOut("slow");//按钮隐藏getLetter();//调用随机生成的字母})//生成一个随机的字母在A-Z之间function getLetter() {var color = randomcolor();//A-Z 对应编码 65-90var code=Math.floor(Math.random()*26)+65;var ch=String.fromCharCode(code)var swith = screen.width - 300;var sheight = screen.height - 300;//随机出现的位置var top = Math.floor(Math.random() * sheight);var left = Math.floor(Math.random() * swith);//拼接好元素向页面追加$("body").append('<span class="letter letter'+code+'"style="left: '+left+'px;top:'+top+'px;background-color: #'+color+'">'+ch+'</span>');setTimeout(getLetter,1000)//每隔一秒生成一个字母}//随机一个背景颜色function randomcolor() {var color = '';var arr = ['a', 'b', 'c', 'd', 'e', 'f', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];for (var i = 0; i < 6; i++) {color += arr[Math.floor(Math.random() * 15)];}return color;}//键盘按下事件$(document).keydown(function () {// 获取到我们按下了键盘的哪个按键，返回的是ascii码var keycode=event.keyCode;var height=screen.height;// 自定义字母元素的下落动画，并在动画结束后实现：$('.letter'+keycode).animate({"top":height+"px"},1000,function () {score+=20;   //  1、分数累加$("#score").html(score);    //  2、把分数显示在页面上的元素中$(this).remove();        //  3、把字母元素移除掉})})})</script>
</body>
</html>

jquery动画--字母消除游戏相关推荐

16宫格的翻牌消除游戏、纯前端实现16宫格的翻牌消除游戏
16宫格的翻牌消除游戏.纯前端实现16宫格的翻牌消除游戏纯前端实现16宫格翻牌消除游戏代码,这个游戏大家应该非常熟悉,它是一个16宫格的翻牌消除游戏,点击卡片后,如果两张卡片形状相同,则同时被消除. ...
H5 六边形消除游戏开发
试玩地址,目前只适配pc端.源码六边形游戏的鼻祖应该是这个 hex-frvr,原作者开发用的是 pixi 游戏引擎,本着快速开发的理念,本游戏采用 cocos creator,UI 延用 hex-f ...
html5游戏 dice掷骰子,使用jQuery实现掷骰子游戏
本文实例为大家共享了jQuery实现掷骰子游戏的详细代码,供大家参考,详细内容如下直接新版建一个html网页,需要在head中引入jquery,js,一些css代码以及js代码,如下: .wrap{ ...
H5 六边形消除游戏开发 1
六边形游戏的鼻祖应该是这个 hex-frvr,原作者开发用的是 pixi 游戏引擎,本着快速开发的理念,本游戏采用 cocos creator,UI 延用 hex-frvr.学习过程中,有借鉴各路实现 ...
Educoder/头歌JAVA——jQuery动画
目录第一关:jQuery动画效果--隐藏/显示相关知识 show()和hide() toggle() 编程要求第2关:jQuery动画效果--淡入淡出相关知识 fadeIn(),fadeOut ...
基于html篮球网页游戏,基于html5和jquery的篮球跳动游戏
今天给大家分享一款基于html5和jquery的篮球跳动游戏.这款实例和之前分享的HTML5重力感应小球冲撞动画类似.用鼠标拖动篮球,篮球在页面上跳动,可在演示中看下效果.效果图如下: 实现的代码. ...
基于Unity3D技术的纸牌消除游戏
基于Unity3D技术的纸牌消除游戏 1 项目的创建和资源的导入在Project下创建好需要的四个文件夹,其中Resources文件夹是用来存放A-K和大小王正面纸牌资源,Textture文件夹用来 ...
cocos2dx CrystalCraze 宝石消除游戏解析(二)
上一篇:cocos2dx CrystalCraze 宝石消除游戏解析(一) 上一篇介绍了 mainScene界面,下面进入正题,GameScne界面!会比较长,毕竟1000行代码啊,耐心看下吧 2 ...
C语言—打字母单机游戏（简易）
分析需求: 制作一个打字母游戏,要求在屏幕中每隔一段时间,下落一定数目的字符,然后由键盘输入对应的字母后,能够达到消除该字符,并称产生新字符的功能.最好能够体现出难度提升的模式. 需求分析: 通过需 ...

jquery动画--字母消除游戏

jquery动画--字母消除游戏相关推荐

最新文章

热门文章