html+css+JS游戏惩罚特效

1、准备好需要用到的图标。

2、新建html文档。

3、书写hmtl代码。<div id="chengfa" class="chengfa">点击"启动"，开始惩罚</div><div class="cfav"> <a class="count count_a">开始倒计时...</a><a class="start">启动</a><a class="over">停止</a></div>

4、书写css代码。body{color:#000;margin:0;padding:0;font:14p旌忭檀挢x "Microsoft YaHei","微软雅黑",Arial,\5b8b\4f53;font-weight:bold;}div::selection {background:#c00;}.chengfa{font-size:50px;color:#f60;width:980px;height:500px;margin:10px auto 0 auto;text-align:center;overflow:hidden;border:2px dashed #ccc;line-height:500px;}.cfav{width:240px;height:auto;margin:0 auto;padding-top:40px;}.cfav a{width:200px;height:40px;display:block;background:#f60;overflow:hidden;line-height:40px;color:#fff;text-align:center;border:1px solid #f30;border-radius:5px;float:left;margin:0 20px;cursor:pointer;display:none; position:relative;}.cfav a:hover{background:#f80;}.cfav a.count{ display:none;}.cfav a.moren{width:200px;height:40px;display:block;background:#f60;overflow:hidden;line-height:40px;color:#fff;text-align:center;border:1px solid #f30;border-radius:5px;float:left;margin:0 20px;cursor:pointer;display:none; position:relative;}.cfav a.count_a{background:#ccc;border:1px solid #eee;}.tmp_face{width:400px;height:400px;position:absolute;margin-top:-138px;left:-400px;}

5、书写并添加js代码。<script src="js/jquery-1.8.1.min.js"></script><script>var wait = 2;var jieguo = 0;$(function(){ var time; var font; $(".start").show(); $(".start").click(function(){ time = setInterval("gaocf()",0);$("#chengfa").animate({fontSize:"50px"}); $(".start,.over").toggle(); }); $(".over").click(function(){ clearInterval(time); for ( var i=0;i<test.length;i++ ){ if ( $("#chengfa").html() == test[i] ) { openFace(Math.floor(Math.random()*4));test.splice(i,1); } } $("#chengfa").animate({fontSize:"20px"}).animate({fontSize:"50px"}); $(".start,.over").toggle(); for ( i=1;i<=wait;i++ ) { setTimeout("count("+ i + ")",i*1000) } $(".start").hide();$(".count").show(); }) $(document).keydown(function(event){ if(event.keyCode == 13 || event.keyCode == 32){ if ( $(".start").css("display") == "none" && $(".over").css("display") == "none" ) { return false; } if ( $(".start").css("display") == "block" ) { $(".start").click() } else { $(".over").click() } }; if(event.keyCode == 116){return false;} })})function count(num){ if ( num == wait ) { $(".count").hide();$(".start").show();} else { jieguo = wait - num; $(".start").hide();$(".count").show(); $(".count").html("启动(" + jieguo + "秒)") }}function gaocf(){ var numSj = Math.floor(Math.random()*test.length); var chengfa = test[numSj]; $("#chengfa").html(chengfa);}function openFace(obj){ $("body").append("<img class='tmp_face' src='images/"+obj+".gif'/>"); var winW = $(window).width(); var winH = $(window).height(); $(".tmp_face").css("top",winH/2-200).fadeIn().animate({"left":winW/2-200},500).delay(1000).fadeOut(function(){ $(this).remove() });}</script><script>var test = ["甜蜜传递","吸名片(双向)","脸红心跳(20秒)","天旋地转，然后走猫步...","真心话大冒险","装清纯、装Gay、装傻子"];</script>

6、代码整体结构。

7、查看效果。