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:14px "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、查看效果。
