<!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. 关于陈冰、陈良乔以及《我的第一本C++书》【转】

    出处:如何在淘宝上卖出 600 本自己写的 C++ 入门书? 陈冰:<我的第一本C++书> 策划编辑,现为图灵公司副总编,<C程序设计伴侣>策划编辑 陈良乔:<我的第一本 ...

  2. android studio 自用快捷键方案

    自用改建方案,一切为了更加顺手 以windows平台为例,为了清晰明了,字母键盘都以大写注明 代码篇 格式化代码            ctl+alt+L 快速修复               alt ...

  3. [置顶] lua 进阶3--lua文件中调用C++函数

    前面讲了一下,C++读取lua文件中的变量,包括一维表.二维表这些,这节讲一下如何在lua文件中去调用C++函数 C++代码如下 #include <stdio.h> extern &qu ...

  4. 文字处理TX Text Control X10独家揭秘（二）：图像占位符合并

    在前面一篇文章<TX Text Control X10独家揭秘(一):数据源自动处理>中已经对即将发布的TX Text Control X10的数据源自动处理做了一些了解,接下来述说它的图 ...

  5. android 开发中的常见问题

    Android studio 使用极光推送, 显示获取sdk版本失败 在 build.gradle(Module.app) 添加 android {    sourceSets.main {      ...

  6. javascript 金额格式化

    金额格式化 example: <!DOCTYPE html> <html> <head> <script src="http://code.jque ...

  7. ecshop发票不能使用出现flow.php on line 723等报错

    最模板给客户ecshop网站做编码转换出现个问题,网站在点结算页面出现Warning: Invalid argument supplied for foreach flow.php on line 7 ...

  8. xcode4.3 完成输入后 点击背景关闭键盘

    -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ [self.view endEditing:YES];} 把这个复制到 ...

  9. RANSAC和Flitline

    [blog算法原理]RANSAC和FitLine ​ 如果已经有一系列图片,需要拟合出最为合适的一条直线出来,这个时候你会选择RANSAC还是FitLine. 一.算法定义: RANSAC是实际运用非 ...

  10. 水流雨渍shader

    战神斯巴达之魂的雨渍做的很逼真,尝试了下,似乎是差不多了,整体欠缺不少 普通平面: 环形流动: 河流: shader实现,3层加上一个偏移层 圆形的雨渍流动和河流要重新展一下UV