©2020-2024 ioDraw All rights reserved
<>一、端午节习俗
赛龙舟是中国端午节的习俗之一，也是端午节最重要的节日民俗活动之一。
关于赛龙舟的起源，有多种说法，有祭曹娥，祭屈原，祭水神或龙神等祭祀活动，其起源可追溯至战国时代。
赛龙舟先后传入邻国日本、越南及英国等，是2010年广州亚运会正式比赛项目。
作为程序员，虽然可能并没有机会去实时实地滴去试一试划龙舟，但我们还是得发挥一下我们的技术，就来简单的做一个基于HTML+CSS+JS的划龙舟小游戏吧。说干就干！
<>html页面
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>boat-Game</title>
<link rel="stylesheet" type="text/css" href="css/boat.css"/> </head> <body>
<!-- 跑道 龙珠 障碍 重新开始按钮 游戏得分显示--> <div class="trankBox"> <!-- 游戏的赛道 --> <ul class="
trank"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <!-- 龙珠 --> <img
src="img/boat.jpg" class="car" id="car"> <!-- 障碍物是游戏开始以后随机生成 --> <!-- 按钮 --> <
div class="btn"> <button type="button" id="restart" class="hidden">重新开始</button>
<div class="score hidden" id="score">这么菜就不要玩游戏了！你的得分只有10分</div> </div> </div> <
script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script
> <script src="js/boat.js" type="text/javascript" charset="utf-8"></script> </
body> </html>
<>css代码
*{ margin: 0; padding: 0; } .trankBox{ position: absolute; width: 50%; height:
100%; left: 25%; /* border: 5px solid black; */ border-left: 10px solid black;
border-right: 10px solid black; overflow: hidden; } .trankBox .trank{ position:
absolute; list-style: none; /* border: 5px solid red; */ width: 100%; height:
200%; background: rgb(21, 128, 209); top: -100%; animation: trank 2s linear
infinite; } @keyframes trank{ from{top:-100%} to{top:-1%} } .trank li{ width:
20%; height: 100%; border: 1px dashed white; float: left; } .car{ position:
absolute; width: 15%; height: 17%; bottom: 5%; left: 44%; } .otherCar{ position:
absolute; width: 15%; height: 17%; top: 0; left: 4%; } .btn{ position: absolute
; /* border: 2px solid red; */ top: 0; left: 0; right: 0; bottom: 0; margin:
auto; width: 400px; height: 300px; } .btn #restart{ border: 1px solid orange;
width: 200px; height: 100px; position: absolute; top: 20px; left: 50%;
margin-left: -100px; border-radius: 40px; background-color: orange; font-size:
30px; } .btn #score{ border: 1px solid orange; width: 350px; height: 100px;
position: absolute; bottom: 20px; left: 50%; margin-left: -175px; text-align:
center; line-height: 100px; font-size: 15px; background-color: orange; } .hidden
{ display: none; } .show{ display: block; }
<>js代码
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/carrier.png" $(".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() }) }
<>二、运行一下吧
我们可以通过键盘操作龙舟左右移动，躲避障碍物，最后计算出碰撞前的最后得分。很简单的一个html小游戏,直接复制代码，运行一下试试看吧！