<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ShuYingHengXie_Game</title>
<style type="text/css">
*{margin : 0px ; padding : 0px ;}
/*游戏区域*/
.gameDiv{background:url(img/dz2.jpg) ;width:100% ; height : 800px ; border : 2px solid red ;
background-size:cover ; overflow:hidden ;}
/*分数区域*/
.score{background-image:url(img/fs.png) ; width:150px; height :180px ; background-size:150px 180px;text-align:center ; line-height:140px ; font-size:40px ; color:#63351D ; cursor:pointer ; position:fixed ; right:50px; bottom: 10px ;}
/*图片下落区域*/
.game{position:relative ; margin: 0 auto;}
.game img{ position:absolute ;}
/*成功失败指示牌*/
.failorsuccess{background-image:url(img/sp1.png) ;
width:500px ; height:350px ;margin:0 auto ; display:none ; position:relative ; top: -50px ; cursor:pointer ;}
/*游戏按钮区域*/
.startorstop{ width:100% ;height:100px ; background:#fff;}
/*按钮*/
.btn{ float:left ; background-image:url(img/stop.png) ; width:130px ; height:50px ;text-align:center; line-height:50px ; background-size:130px 50px; cursor:pointer ;}
</style>
</head> <body> <!-- 游戏区域 -->
<div class="gameDiv">
<div class="game" id="game"> </div>
<div class="failorsuccess" id="failorsuccess"></div>
<div class="score" id="score">0</div>
</div>
<!-- 游戏方式区域 -->
<div class="startorstop">
<div class="btn" id="stop">暂停游戏</div>
<div class="btn" id="start">开始游戏</div>
<div class="btn" id="quick">游戏加速</div>
</div> </body>
<script type="text/javascript" src="js/jquery.js">
</script>
<script type="text/javascript" >
var chars = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'] ;
var score = 0 ;
var flag = true ;
/*
1.用户对谁做了操作
2.做了什么操作
3.做完操作之后想要达到什么效果
*/ $(function(){
$("#start").click(function(){
//源源不断的产生图片
window.setInterval(generateChar,1000) ;
window.setInterval(downChar,500) ;
}); $("#failorsuccess").click(function(){
location.reload() ;
}); $("#stop").click(function(){
flag = false ;
}); $("#quick").click(function(){
flag = true ;
window.setInterval(generateChar,1000) ;
window.setInterval(downChar,500) ;
}) ;
}); var generateChar = function(){
if(flag){
//随机产生图片
var random = Math.floor(Math.random()*26) ;
var img = chars[random] ;
var left = Math.floor(Math.random()*800+150);
$("#game").append("<img alt='A' src='img/"+img+".png' width='100px' height='100px' style='top:20px;left:"+left+"px;' />")
} } var downChar = function(){
if(flag){
//获取游戏区域的图片
var imgs = $("#game").children();
//遍历获取每张图片
for(var i = 0;i<imgs.length;i++)
{
var img = imgs[i] ;
if(img.nodeType==1){
var top = parseInt(img.style.top);
if(top<600){
img.style.top=top+50+"px" ;
}else{
img.remove() ;
score -= 10 ;
$("#score").html(score) ;
if(score== -150){
$("#failorsuccess").fadeIn(1000) ;
}
}
}
}
} //按键
window.onkeyup = function(){
var eve = window.event||e ;
var imgs = $("#game").children();
//遍历获取每张图片
for(var i = 0;i<imgs.length;i++)
{
var img = imgs[i] ;
var code = eve.keyCode ;//a--65 b--66
if(img.nodeType==1){
var imgSrc = img.src.split("/");
var name = imgSrc[imgSrc.length-1].split(".")[0] //A B
if(name==chars[code-65]){
img.remove() ;
score += 10 ;
$("#score").html(score) ;
} }
}
} } </script>
</html>

点击开始游戏,从上往下随机掉落字母,敲击键盘对应字母可使下落字母消失,并得分

单分数=-150时 会弹出重新开始画面

点击游戏加速,可使字母下落速度加快。

观摩制作小游戏(js应用)的更多相关文章

  1. 小游戏——js+h5[canvas]+cs3制作【五子棋】小游戏

    五子棋小游戏学习—— 有一个问题是,棋盘线的颜色,在canvas中,明明设置了灰色,但在我的预览中还是黑色的,很重的颜色. 以下是复刻的源码: <!DOCTYPE html> <ht ...

  2. c++制作小游戏--雷电

    用c++实现了一个小游戏--雷电,貌似执行的还不错.贴图和声效也是Duang!Duang!的.整个项目我也会给出下载链接,有兴趣的能够编译执行一下.用到了C++11的新特性,最好是使用vs2013编译 ...

  3. [SpriteKit] 系统框架中Cocos2d-x制作小游戏ZombieConga

    概述 使用SpriteKit实现一个简单的游戏, 通过一个游戏来进行SpriteKit的入门, 熟练2D游戏的API, 也可以更好的结合在iOS应用中. 详细 代码下载:http://www.demo ...

  4. 使用JS制作小游戏贪吃蛇

    先看效果图: 过程如下: 1.首先创建一张画布地图<div class="map"> </div>: 2.创建食物的自调用函数 (function (){ ...

  5. 用Canvas制作小游戏——贪吃蛇

    今天呢,主要和小伙伴们分享一下一个贪吃蛇游戏从构思到实现的过程~因为我不是很喜欢直接PO代码,所以只copy代码的童鞋们请出门左转不谢. 按理说canvas与其应用是老生常谈了,可我在准备阶段却搜索不 ...

  6. Canvas进阶——制作小游戏【贪吃蛇】

    今天呢,主要和小伙伴们分享一下一个贪吃蛇游戏从构思到实现的过程~因为我不是很喜欢直接PO代码,所以只copy代码的童鞋们请出门左转不谢. 按理说canvas与其应用是老生常谈了,可我在准备阶段却搜索不 ...

  7. 使用cocos2d-x3.4结合cocos2.1.5制作小游戏《亲亲小熊》

    在最新的cocos集成环境中,CocosStudio已经集成到cocos中了,至于界面的制作和编辑器的基本使用在cocos官网有详细教程, 这里就不细说,资源下载和详情请参看官网教程:http://c ...

  8. 把川普射上太阳—如何用python制作小游戏

    1.准备 开始之前,你要确保Python和pip已经成功安装在电脑上噢,如果没有,请访问这篇文章:超详细Python安装指南 进行安装. Windows环境下打开Cmd(开始—运行—CMD),苹果系统 ...

  9. Unity小游戏制作 - 暗影随行

    用Unity制作小游戏 - 暗影惊吓 最近玩了一个小游戏,叫做暗影惊吓,虽然是一个十分简单的小游戏,但是感觉还是十分有趣的.这里就用Unity来实现一个类似的游戏. 项目源码:DarkFollow 主 ...

随机推荐

  1. Java如何对ArrayList里的元素排序

  2. 160929、各数据库连接配置与maven依赖安装

    最近做的项目都是maven的,据说maven是个东西.把依赖的jar文件的事情都委托出去辣!试着用了一下哈,效果还可以! 今天做了数据库配置这一块,特意把相关的东西总结出来,以备不时之需. MySQL ...

  3. 160826、浏览器渲染页面过程描述,DOM编程技巧以及重排和重绘

    一.浏览器渲染页过程描述   1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DO ...

  4. Linux之awk命令详解

    简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再 ...

  5. dir cmd、the DIR Command、windows

    原因   :如何在windows下的cmd.exe中只列出文件名? solve : dir \a:-d \b Extend Reading : dir [drive:][path][filename] ...

  6. 1、java基础回顾与加强

    一.    基础回顾 1   集合 1.1  集合的类型与各自的特性 ---|Collection: 单列集合 ---|List: 有存储顺序, 可重复 ---|ArrayList:    数组实现, ...

  7. Web前端工作2个月小结

    开始语: 2013年6月30日,Microsoft Learning support 项目结束,转而进入Forerunner Development 项目,这对于这块领域空白的我,空前的困难,可是我坚 ...

  8. Android onTouchEvent, onClick及onLongClick的调用机制

    针对屏幕上的一个View控件,Android如何区分应当触发onTouchEvent,还是onClick,亦或是onLongClick事件? 在Android中,一次用户操作可以被不同的View按次序 ...

  9. freeMarker中list的两列展示

    前台界面中我使用freeMarker的机会有很多,自然也就会接触下<List>标签,我想大家应该都不陌生.<#list attrList as attr>${a.name}&l ...

  10. 字符编码的过滤器Filter(即输入的汉字,能在页面上正常显示,不会出现乱码)

    自定义抽象的 HttpFilter类, 实现自 Filter 接口 package com.lanqiao.javaweb; import java.io.IOException; import ja ...