创建HTML样式
/*外部样式*/
*{
margin: 0;
padding: 0;
}
body,html{
width: 100%;
height: 100%;
background:pink;
overflow: hidden;
}
/*云朵运动*/
.coloud_bg{
animation: coloud_bg 20s linear infinite;
}
@keyframes coloud_bg{
0%{
transform: scale(1);
}
50%{
transform: scale(2);
}
100%{
transform: scale(1);
}
}
/* 云朵定位*/
.cloud{
display: block;
position: absolute;
}
/* 父级容器 */
.car_box{
width: 60%;
height: 100%;
background:skyblue;
position: absolute;
left: 25%;
border-left: 8px solid white;
border-right: 8px solid white;
box-shadow: 0px 0px 30px black;
}
/* 我的样式 */
#ar{
width:15%;
height: 20%;
background: url(img/11.png) no-repeat center;
position: absolute;
background-size: 80%;
left:42% ;
bottom: 10%;
}
/* 敌方样式 */
.dicar{
width:15%;
height: 20%;
background: url(img/1.png) no-repeat center;
position: absolute;
background-size: 80%;
}
/* 开始样式 */
#start{
width: 150px;
height:40px;
position:absolute;
left: 30px;
top: 20px;
border-radius: 10px;
box-shadow: #BBBBBB;
cursor: pointer;
color: red;
display: block;
border: 1px;
line-height:50px;
font-size: 30px;
background:white;
text-align:center;
}
/* 分数样式 */
#score{
width: 150px;
height: 90px;
position:absolute;
top: 100px;
font-size: 24px;
background:white;
border-radius: 10px;
color: red;
left: 30px;
margin: auto;
}
</style>body部分
</head>
<body>
<img class="cloud coloud_bg" src="img/cloud.png"/>
<div class="car_box">
<div id="ar"></div>
<!-- <div class="dicar"></div> -->
</div>
<div>
<span id="start"> 开始</span>
<span id="score">得分:</span>
</div>创建好样式的图片
?编写script
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
//初始
var score=0
var timer=null
var scot=null
//恐龙
$(function () {
//移动
carMove()
//生产
addItemCar()
})
//我方恐龙
var code=2
function carMove(){
document.onkeydown=function (even){
//alert("键盘"+even.keyCode)
if(even.keyCode==37){
//左移
code--
if(code<0){
code=0
}
}
if(even.keyCode==39){
//右移
code++
if(code>4){
code=4
}
}
var left_c=code*20+2
//动画
$("#ar").animate({"left":left_c+"%" },50)
}
}
//生产水果的方法
function item_car(){
//水果
var item=document.createElement("div")
$(".car_box").append(item)
item.className="dicar"
//随机图片
var rand_img=Math.floor(Math.random()*3+1)
//设定
item.style.backgroundImage="url(img/"+rand_img+".png)"
//随机出现
var rand_code=Math.floor(Math.random()*5)
//给left赋值
$(item).css("left",rand_code*20+2+"%")
//速度
var rand_speed=Math.floor(Math.random()*2000+800)
$(item).animate({"top":"100%"},rand_speed,function(){
$(this).remove()
//加分
score++
})
//碰
carko(item)
}
//批量生产水果
function addItemCar(){
setInterval(function(){
item_car()
},1000)
}
//碰撞检测
function carko(item){
var ar=document.getElementById("ar")
timer= setInterval( function(){
var artop=ar.offsetTop
var arleft=ar.offsetLeft
var arheight=ar.offsetHeight
var arwidth=ar.offsetWidth
var itemtop=item.offsetTop
var itemleft=item.offsetLeft
if(Math.abs(artop-itemtop)<arheight && Math.abs(arleft-itemleft)< arwidth ){
gameOver()
}
},30)
}
function gameOver(){
//得分的刷新
$("#score").html("得分:"+score)
//淡入
$("#score").fadeIn(500)
alert("游戏结束!!!")
$("#start").fadeIn(500)
//停止生产
clearInterval(timer)
//离开
$("#ar").animate({"bottom":"-100%"},200)
}
//开始按钮
$("#start").click(function(){
$("#score").fadeOut(500)
$("#start").fadeOut(500)
//加载页面
document.location.reload()
})
</script>
</body>
</html>运行的游戏
?
?