观摩制作小游戏（js应用）
<!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应用）的更多相关文章
- 小游戏——js+h5[canvas]+cs3制作【五子棋】小游戏
五子棋小游戏学习—— 有一个问题是,棋盘线的颜色,在canvas中,明明设置了灰色,但在我的预览中还是黑色的,很重的颜色. 以下是复刻的源码: <!DOCTYPE html> <ht ...
- c++制作小游戏--雷电
用c++实现了一个小游戏--雷电,貌似执行的还不错.贴图和声效也是Duang!Duang!的.整个项目我也会给出下载链接,有兴趣的能够编译执行一下.用到了C++11的新特性,最好是使用vs2013编译 ...
- [SpriteKit] 系统框架中Cocos2d-x制作小游戏ZombieConga
概述 使用SpriteKit实现一个简单的游戏, 通过一个游戏来进行SpriteKit的入门, 熟练2D游戏的API, 也可以更好的结合在iOS应用中. 详细 代码下载:http://www.demo ...
- 使用JS制作小游戏贪吃蛇
先看效果图: 过程如下: 1.首先创建一张画布地图<div class="map"> </div>: 2.创建食物的自调用函数 (function (){ ...
- 用Canvas制作小游戏——贪吃蛇
今天呢,主要和小伙伴们分享一下一个贪吃蛇游戏从构思到实现的过程~因为我不是很喜欢直接PO代码,所以只copy代码的童鞋们请出门左转不谢. 按理说canvas与其应用是老生常谈了,可我在准备阶段却搜索不 ...
- Canvas进阶——制作小游戏【贪吃蛇】
今天呢,主要和小伙伴们分享一下一个贪吃蛇游戏从构思到实现的过程~因为我不是很喜欢直接PO代码,所以只copy代码的童鞋们请出门左转不谢. 按理说canvas与其应用是老生常谈了,可我在准备阶段却搜索不 ...
- 使用cocos2d-x3.4结合cocos2.1.5制作小游戏《亲亲小熊》
在最新的cocos集成环境中,CocosStudio已经集成到cocos中了,至于界面的制作和编辑器的基本使用在cocos官网有详细教程, 这里就不细说,资源下载和详情请参看官网教程:http://c ...
- 把川普射上太阳—如何用python制作小游戏
1.准备 开始之前,你要确保Python和pip已经成功安装在电脑上噢,如果没有,请访问这篇文章:超详细Python安装指南 进行安装. Windows环境下打开Cmd(开始—运行—CMD),苹果系统 ...
- Unity小游戏制作 - 暗影随行
用Unity制作小游戏 - 暗影惊吓 最近玩了一个小游戏,叫做暗影惊吓,虽然是一个十分简单的小游戏,但是感觉还是十分有趣的.这里就用Unity来实现一个类似的游戏. 项目源码:DarkFollow 主 ...
随机推荐
- 一、Java基础--01
Java基础测试题分析 第一题是关于基本的算法知识,这个很有必要去掌握以下,在学校也经常听老师们说找工作比试面试会出一些这方面的知识,我拿到的第一题是关于排序的,虽然很简单,但是我还是要提醒一下基础不 ...
- SqlServer 的提示符(Option/With等提示符)不是什么时候都可以用的
我们在做SqlServer的查询调优的时候,经常会在语句末尾用到option(loop/merge/hash join)或在join语句前直接声明loop/merge/hash,来强制SqlServe ...
- 视频处理控件TVideoGrabber中如何混合多个视频源（2）
在前面的<视频处理控件TVideoGrabber混合多个视频源(1)>一文中,已经对TVideoGrabber中混合视频源做了一些内容的说明,本文将继续前文: >>>TV ...
- 鸟哥的linux私房菜学习记录之认识系统服务(daemons)
- eclipse Juno Indigo Helios Galileo这几种版本的意思
Eclipse 3.1 版本代号 IO [木卫1,伊奥] Eclipse 3.2, 30-06-2006, Callisto projects, 版本代号 Callisto [木卫四,卡里斯托 ] ...
- android 在应用中切换语言
场景: 在设置中切换中英文,然后跳转MainActivity....步骤: 1.在MyApplication 中初始化语言 public class MyApplication extends App ...
- Hadoop Balance
一.hadoop balance工具的用法: 启动balance: bin/start-balancer.sh -threshold 5 停止balance: bin/stop-balancer.sh ...
- ectouch第二讲之 文件结构
相信大家在ectouch官网都注意到了,ectouch采用的MVC框架,之前一直以为它用的和ecshop一样都是smarty,本鸟默默按照smarty的文件结构研究了好几天,结果是各种文件对不上号.无 ...
- Codeforces 746D：Green and Black Tea（乱搞）
http://codeforces.com/contest/746/problem/D 题意:有n杯茶,a杯绿茶,b杯红茶,问怎么摆放才可以让不超过k杯茶连续摆放,如果不能就输出NO. 思路:首先,设 ...
- 对js原型的理解
1.值类型和引用类型,引用类型都是对象,通过typeof()测试类型,instanceof测试是否是对象.对象是属性的集合. 2.对象都是由函数创建的,函数又是一个对象. 3.函数有一个默认的属性,叫 ...