HTML5-打字游戏

在网上找了一个HTML5的代码，照着敲了一下。发现收获还是蛮大的。而这个代码大多数是使用jq来写的。对于刚学js不久的自己也算是学习jq的一个不错的项目。游戏效果图如下：

这个图是只写好html和css的图：

这两个是写好的代码效果：

HTML代码：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>HTML5金山打字游戏源码</title><script src="jquery.js"></script><script src="js.js"></script><script>$(function(){new typegame();});</script></head><style>body{margin:0;background:url(game.jpg) no-repeat;background-size:cover;font-family:"幼圆";background:#E8F0F0;overflow:hidden;}.stop1{width:130px;height:50px;background:red;position:absolute;bottom:0;left:30px;text-align:center;cursor:pointer;background:url("stop.png");background-size:130px 50px;line-height:50px;color:#392112;font-size:16px;z-index: 6666666;font-weight:bold;}.screen1{width:100%;height:100%;background:url(img/dz2.jpg) no-repeat;background-size:cover;margin:0 auto;padding:0;position:relative;overflow:hidden;}.xiabian{width:100%;height:40px;background:#000;position:absolute;bottom:0;right:0;opacity:0.8;filter:alpha(opacity=80);}@keyframes cg{0%{transform:translateY(-50%);}100%{transform:translateY(0%);}}@keyframes cgfont{0%{transform:scale(0,0);}100%{transform:scale(1,1);}}body{background:#84B526;}</style><body><div class="screen1"></div><div class="stop1">暂停游戏</div><div class="xiabian"></div></body>
</html>

HTML这里定义了两个动画cg和cgfont，还有就是规定了一下网页的格式，这些css不算难，这里就不重点去讲了。

重点说一下的是js的代码。

function typegame(){//定义字母对象this.objletter={};//创建游戏函数this.creatGame();//一开始出现的字母数量this.num=3;//检查字母出现是否存在重叠this.check();//创建分数面板this.creatScore();//分数this.score=0;//第几关，默认第一关玩起this.stage=1;//开始游戏this.startGame();//暂停游戏this.stopGame();
}

这里我们定义一个函数，作为入口函数，这样做可以使我们的结构更加清晰。之后我们可以利用prototype去完善我们定义的函数。

//为函数添加属性
typegame.prototype={//创建游戏creatGame:function(){//获取窗口高度和宽度var height=$(window).height();var width1=$(window).width();//获取有class=screen1的标签，修改其css$(".screen1").css({width:width1,height:$(window).height()-10,overflow:"hidden"});},//创建字母creatletter:function(){var that=this;do{var randomnum=Math.floor(Math.random()*26+65);//将数字转化为字母var randomletter=String.fromCharCode(randomnum);}while(this.objletter[randomletter]);//如果出现过就继续//四舍五入0到100var top1=-Math.round(Math.random()*100);//选出字母之间左右不相互重叠在一起的位置do{var left1=Math.round(Math.random()*740);}while(this.check(left1));//获取时间var time=new Date().getTime();//动态创建一个div，然后放图片//(selector).animate({styles},speed,easing,callback)样式，速度，加速度是否变化，回调函数//这个游戏只要有一个字母落到最底部就会输var ele=$("<div data-time="+time+"></div>").css({width:"100px",height:"100px",background:"url(img/"+randomletter+".png) center no-repeat",backgroundSize:"contain",lineHeight:"60px",fontSize:"30px",color:"#fff",textAlign:"center",position:"absolute",left:left1,top:top1}).appendTo(".screen1").animate({top:$(window).height()},6000,"linear",function(){if($("div[data-time="+time+"]")[0]){//重新赋值that.num = 3;that.score=0;that.stage=1;//清空对象内的全部el对象$.each(that.objletter,function(index,value){value.el.remove();});//改为空的对象that.objletter={};//创建失败的画面that.createFail();}});this.objletter[randomletter]={start:left1-60,end:left1+60,keycode:randomnum,el:ele}},//开始游戏，创建字母palyGame:function(){this.keydown();for(var i=0;i<this.num;++i){this.creatletter();}},//检查字母是否重叠一起check:function(left){var flag=false;$.each(this.objletter,function(index,value){if(left>value.start&&left<value.end){flag=true;}});return flag;},//按键函数keydown:function(){var that=this;//是否获取到按键$(document).keydown(function(e){var code=e.keyCode;$.each(that.objletter,function(index,value){//找到按下的字母if(code==value.keycode){//删除这个字母的信息value.el.remove();delete that.objletter[index];//创建一个新的字母that.creatletter();//分数加加that.score++;//更换class=score标签的文本值$(".score").html(that.score);//如果这个分数大于等级乘10，那么就出现闯关成功，去下一关if(that.score>=that.stage*10){that.score=0;$(".score").html(0);that.num++;that.stage++;$.each(that.objletter,function(index,value){value.el.remove();});that.objletter={};//创建闯关成功画面that.creatStage();}}});});},//创建分数的函数creatScore:function(){$("<div class='score'>0</div>").css({background:"url(fs.png) no-repeat",backgroundSize:"150px 180px",width:150,height:180,position:"absolute",right:25,bottom:60,color:"#522E1A",fontSize:"60px",lineHeight:"140px",textAlign:"center"}).appendTo("body");},//创建闯关成功的画面creatStage:function(){var that=this;//alert(this.stage);$("<div class='stage'></div>").css({position:"absolute",top:"-50%",bottom:0,right:0,left:0,background:"url(cg.png)",width:520,height:400,backgroundSize:"contain no-repeat",margin:"auto",borderRadius:"5%",animation:"cg 2s linear"}).appendTo("body");var btn=$("<div class='btn'></div>").css({position:"absolute",top:"235px",right:0,left:"65px",margin:"auto",background:"url(xy.png)",zIndex:9999,fontFamily:"幼圆",fontSize:"22px",width:100,height:40,margin:"0 auto",marginTop:"200",color:"#fff",lineHeight:"40px",backgroundSize:"240px 300px",cursor:"pointer"}).appendTo(".stage").click(function(){that.palyGame();$(this).parent().remove();});},//创建失败的画面createFail:function(){var that=this;if(this.failbord){this.failbord.remove();}var btn=$("<div></div>").css({width:160,height:35,textAlign:"center",lineHeight:"30px",margin:"0 auto",cursor:"pointer",position:"absolute",right:0,left:0,margin:"auto",bottom:"70px"}).click(function(){$(".scor").html(0);that.palyGame();$(this).parent().remove();});this.failbord=$("<div></div>").css({position:"absolute",top:"-50%",bottom:0,right:0,left:0,background:"url(sp1.png)",width:500,height:350,backgroundSize:"400px 340px",margin:"auto",borderRadius:"5%",backgroundSize:"contain no-repeat",animation:"cg 2s linear"}).appendTo("body").append(btn);},//开始游戏按钮函数startGame:function(){var that=this;$("<div class='start'>开始游戏</div>").css({width:130,height:50,textAlign:"center",lineHeight:"50px",margin:"0 auto",cursor:"pointer",background:"url(stop.png) no-repeat",backgroundSize:"130px 50px",color:"#392112",position:"absolute",left:"175px",bottom:0,fontWeight:"bold",marginTop:"55px"}).appendTo("body").click(function(){that.palyGame();})},//暂停游戏函数stopGame:function(){var that=this;$(".stop1").click(function(){$.each(that.objletter,function(index,value){value.el.stop();});if($(".stop1").html()=="暂停游戏"){$(".stop1").html("继续游戏");}else if($(".stop1").html()=="继续游戏"){$(".stop1").html("暂停游戏");//全部元素重新添加一次动画，就能继续开始了$.each(that.objletter,function(index,value){value.el.animate({top:$(window).height()},6000,"linear",function(){that.num=3;that.stage=1;that.score=0;$.each(that.objletter,function(index,value){//value.el.stop();value.el.remove();});that.objletter={};that.createFail();})})}})}
};

整一个流程是这样的，首先进行创建字母，然后每个字母都添加一个动画，动画有个回调函数，只要动画一结束，那么回调函数触发后，就进行游戏初始化，创建一个失败的界面出来，还有创建一个重新游戏的按钮。具体的细节代码中已注释。

$("<div class='stage'></div>")

这个语句代表创建一个div。

$.each

这个语句代表遍历的意思。

就这样一个完整的游戏就做好了。游戏资源

HTML5-打字游戏相关推荐

打单词游戏 html5,html打字游戏
[实例简介] html5写的一款打字小游戏,是以射击类游戏为模型,练习英语单词也是这款游戏的特色 [实例截图] [核心代码] HTML5打字游戏 └── 打飞字 ├── index.html ├── ...
html5游戏ztype源码,Ztype打字游戏！
原标题:Ztype打字游戏! 很早的时候就开始了解这款游戏了,记得是H5刚开始火爆的时候,你搜H5小游戏就会搜到这款游戏.不过在国内它有一个土气贴切的名字"盲打高手打飞字": 游戏 ...
基于html5的英语打字游戏（纯手工，不贴图）
基于html5的打字游戏引言一.打字游戏是一款耳熟能响的桌面应用程序,通过该程序可以将英语单词学习和娱乐有效的结合起来.但是在这个大量应用从c/s架构往b/s架构过渡的年代,我们将通过html5等 ...
HTML5+JS游戏开发模块----canvas打字游戏升级版
之前发了简单版本打字游戏,现在增加图片,设置开始按钮,记录分数,字母显示也改成对象数组,直接操作对象而不是操作对象属性,孰好孰坏,我也不懂,我也是初学者. 直接上代码字母类 //字母类 functi ...
情人节学写html5微信游戏
情人节都在干什么??? 当然是写代码!!! 看某书正好以一个html5微信游戏,很适合今天的日子附上demo:demo 请在手机上查看,pc端请切换手机调试模式,目前没弄完后续完善(图片也懒得弄了, ...
19.04.27--作业打字游戏
/* 编译环境:windows系统编译器:VC6.0 编译时间:19.04.27 编译者:黑桃3 */ #include <stdio.h> #include <time.h> ...
python小游戏开发，使用python实现英语打字游戏
需求分析英文打字小游戏,要有多界面交互,界面整洁.美观,可调节游戏等级难度,可配置游戏信息. 要有游戏分数,游戏时间,动画特效,背景音乐,不同游戏等级的历史最高分记录. 拼写成功的英文单词显示中文意 ...
pygame简单的俄罗斯方块游戏和简单的打字游戏
1.pygame简单的俄罗斯方块游戏一.对战的方块管理定义一个BlockManage管理对战的方块根据BlockManage根据传入的玩家id返回方块,保证每个玩家拿到的方块序列是一致的,所以在 ...
pygame做一个简单的打字游戏
pygame做一个简单的打字游戏 1.基本代码下面的代码完成了每一秒在界面的顶部随机生成一个新的字母 # -*- coding=utf-8 -*- import pygame from pygame ...
如何实现一个HTML5 RPG游戏引擎——第一章，实现地图类
一,话说天下大事前不久看到lufy的博客上,有一位朋友想要一个RPG游戏引擎,出于兴趣准备动手做一做.因为我研究lufylegend有一段时间了,对它有一定的依赖性,因此就准备将这个引擎基于lufy ...

HTML5-打字游戏

HTML5-打字游戏相关推荐

最新文章

热门文章