用代码来过端午节---基于HTML的端午节划龙舟小游戏
var index = 2;
var score = 0;
var timer = ""
// 1. 通过键盘或者手指来控制小船
function moveCar(){
//监听键盘点击事件
document.onkeydown = function(e){
console.log(e)
console.log(e.keyCode)
//当kecode == 37 小船向左移动 当keycode ==39 向右移动
if(e.keyCode==37){
index = index<= 0 ? 0 : index-1;
}else if(e.keyCode == 39){
index = index >=4 ? 4 :index+1;
}
$(".car").animate({
"left":index*20+4+"%",
},10)
}
}
moveCar();
setCar();
// 定时出现障碍物
function setCar(){
timer = setInterval(function(){
createCar()
},1000)
}
//生成一个障碍物
function createCar(){
var car = document.createElement("img");
console.log(car)
car.className="otherCar"
car.src = "img/"
$(".trankBox").append(car)
var rand = Math.floor(Math.random()*5)
// 随机出现障碍物
$(car).css({
"left": rand*20+4+"%"
})
//第一关 .....
$(".otherCar").animate({
"top":"100%"
},5000,'linear',function(){
// 设置得分
score++
// 消除障碍物
$(this).remove()
})
//碰撞 kno = 0 1 2 3 （多次)
//一次就结束 碰撞检测
konckCar(car);
}
// 碰撞检测
function konckCar(othercar){
var car = document.getElementById("car")
setInterval(function(){
//进行碰撞检测
//敌方小车的x和y轴的距离
var otherX = othercar.offsetLeft
var otherY = othercar.offsetTop
//赛车的xy轴距离
var carX = car.offsetLeft
var carY = car.offsetTop
var carW = car.offsetWidth
var carH = car.offsetHeight
//判断条件
// carX-otherX<carW
// carY-otherY<carH
console.log(carW)
if(Math.abs(carX-otherX)< carW && Math.abs(carY-otherY)< carH){
//游戏结束
gameOver()
}
},10)
}
function gameOver(){
// 赛车
$(".car").animate({
"top":"130%"
},100)
// 去除所有障碍车
$(".otherCar").remove()
//清楚定时器
clearInterval(timer)
//页面抖动
shak();
}
// var left
function shak(){
$(".trankBox").animate({
"left":"35%"
},100,'linear',function(){
$(".trankBox").animate({
"left":"20%"
},100,'linear',function(){
$(".trankBox").animate({
"left":"30%"
},100,'linear',function(){
$(".trankBox").animate({
"left":"25%"
},100,'linear',function(){
//重新开始
restart()
})
})
})
})
}
function restart(){
// 显示重新开始按钮
$("#restart").removeClass("hidden").addClass("show")
$("#score").removeClass("hidden").addClass("show")
$("#score").html("这么菜就不要玩游戏了！你的得分只有"+score+"分")
// 添加点击事件
$("#restart").click(function(){
// 修改字体颜色
$("#restart").css({
"color":"blue"
})
window.location.reload()
})
}