js+svg实现赛马游戏代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：js+svg实现赛马游戏代码，点击右下角开始赛马，右上角可调节游戏参数。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>

body {
    margin: 0 auto;
    background: #232323
}

.racer {
    transition-duration: 500ms;
    -moz-transition-duration: 500ms;
    -webkit-transition-duration: 500ms;
    transition-property: transform;
    -moz-transition-property: transform;
    -webkit-transition-property: transform;
    transition-timing-function: linear;
    -moz-transition-timing-function: linear;
    -webkit-transition-timing-function: linear
}

.restart {
    padding: 20px;
    cursor: pointer;
    font-family: 'Roboto',sans-serif;
    font-weight: 700;
    position: fixed;
    bottom: 20px;
    right: 20px;
    border-radius: 100px;
    height: 80px;
    width: 80px;
    transition: 200ms;
    font-size: 2em;
    border: 0;
    box-shadow: 0 4px 4px #000
}

.restart:hover {
    height: 90px;
    width: 90px;
    bottom: 15px;
    right: 15px
}

.goldMedal,.silverMedal,.bronzeMedal {
    transition: 500ms
}


</style>
</head>

<body>
<svg id="racecourse" viewBox="-10 -10 500 140"><defs><filter id="mud"><feTurbulence baseFrequency="0.85" numOctaves="10" seed="113" /><feColorMatrix values="2.4 -0.6 -2.8 -1.7 -0.3 -3.1 -1.8 -1.8 -4.1 2.7 0.8 -3.1 2.9 -0.8 3.7 -2.2 4.2 -0.5 3.1 -1.3" /><feDiffuseLighting lighting-color="rgb(102,74,52)" surfaceScale="1"><feDistantLight azimuth="270" elevation="90" /></feDiffuseLighting></filter><filter id="blur" x="-100%" y="-100%" width="300%" height="300%"><feGaussianBlur in="SourceGraphic" stdDeviation="2" /></filter><radialGradient id="grad"><stop offset="50%" stop-color="forestgreen" /><stop offset="100%" stop-color="green" /></radialGradient><path id="horse" d="M 10 0 c 1.7 0.1 4.6 -1 5.5 -1.6 c -0.7 -0.2 -1.1 -0.2 -1 -0.3 c 1.2 -0.1 1.4 -0.1 1.5 -0.1 c 0 0 0.2 0 0.2 -0.1 c 0 0 -0.2 0 -0.2 0 c -0.2 -0.1 -0.5 -0.2 -0.6 -0.2 c 0 0 -0.2 0 -0.2 0 c 0 -0.1 0.2 -0.1 0.2 -0.1 c 0.3 0 0.5 -0.1 0.8 -0.1 c 0.1 0 0.4 0 0.4 0 c 0 -0.1 -0.3 -0.1 -0.5 -0.2 c -0.1 -0.1 0.6 -0.2 0.8 -0.1 c 0 0 0.3 0.1 0.3 0 c 0 -0.1 -0.7 -0.3 -0.7 -0.4 c 0.2 -0.1 0.5 0 0.9 0.1 c 0.2 0 0.7 0.2 0.7 0.1 c 0.1 -0.2 -0.5 -0.3 -0.4 -0.4 c 0 -0.2 0.5 -0.1 0.8 0 c 0.4 0.1 0.6 0 0.5 -0.1 c -0.5 -0.3 0 -0.2 0.1 -0.2 c 0.3 0 0.6 0.1 0.8 0.2 c 0.2 0.1 -0.1 -0.3 0 -0.4 c 0 -0.1 0.5 0.1 0.7 0.2 c 0.1 0 0.2 0 0.3 -0.1 c 0.1 -0.1 0.2 -0.3 0.2 -0.4 c 0 -0.1 0.2 -0.2 0.3 -0.4 c 0.1 -0.1 0.1 -0.4 0.2 -0.4 c 0.1 0 0.4 0.4 0.4 0.5 c 0.1 0.2 0.2 0.5 0.3 0.7 c 0.1 0.1 0 0.4 0 0.5 c 0 0 0 0 0 0 c 0.2 0.2 0.3 0.5 0.5 0.6 c 0.3 0.4 1.1 1.8 1.3 2.1 c 0.2 0.3 0.8 1 0.8 1.1 c 0 0.2 0.1 0.4 0.2 0.5 c 0.2 0.2 0.1 0.5 0 0.7 c -0.1 0.2 -0.4 0.3 -0.5 0.3 c -0.1 0.1 -0.4 0.2 -0.5 0.1 c -0.2 0 -0.2 -0.2 -0.5 -0.5 c -0.4 -0.3 -0.7 -0.8 -1 -1.1 c -0.4 -0.1 -0.8 -0.3 -1.1 -0.3 c -0.2 -0.1 -0.6 -0.2 -0.8 -0.4 c -0.3 0.4 -2.5 2.3 -2.8 2.5 c -0.1 1.1 -0.1 2.1 -0.2 2.4 c -0.2 0.3 -0.3 0.6 -0.1 0.9 c 0.6 1.1 1.5 2.6 1.6 2.8 c 0.2 0.3 0.3 0.2 0.5 0.5 c 0.1 0.3 0.8 1.7 1.4 2.2 c 0.5 0.4 1.1 1.2 1.4 1.4 c 0.2 0.3 0.7 0.5 0.9 0.7 c 0.1 0.3 0.5 0.8 0.5 0.9 c -0.1 0.1 -1.4 0 -1.4 -0.2 c -0.1 -0.3 -0.2 -0.5 -0.1 -0.7 c -0.2 -0.1 -0.5 -0.5 -0.9 -0.5 c -0.3 -0.1 -1.5 -2.1 -1.7 -2.4 c -0.3 -0.3 -0.4 -0.1 -0.7 -0.5 c -0.4 -0.4 -0.5 -0.8 -1 -1.1 c -0.4 -0.2 -1.3 -1.5 -1.9 -2.2 c -0.5 0.1 -0.8 0.2 -1.3 0.2 c 0 0 0 0 0 0 c 0 0 0 0 0 0 c -0.1 0 -0.1 0 -0.1 0 c -0.6 0.1 -1.5 0.8 -1.8 1.2 c -0.4 0.4 -1 0.8 -1.4 1.4 c -0.3 0.4 -0.7 1.1 -1.2 1.7 c -0.3 0.4 -0.6 0.7 -0.6 0.8 c 0.1 0.3 -0.5 0.9 -0.6 1 c -0.1 0.2 0 0.4 0.1 0.6 c 0.2 0.3 0 1 -0.1 1.1 c -0.1 0.2 -1.3 -0.7 -1.1 -1 c 0.1 -0.2 0.5 -0.5 0.5 -0.6 c 0 -0.2 0.2 -0.6 0.3 -0.9 c 0.2 -0.2 1.1 -1.3 1.2 -1.5 c 0.1 -0.3 0.5 -1.4 0.6 -1.6 c 0.1 -0.4 0.6 -0.8 0.9 -1.3 c 0.1 -0.1 0.2 -0.3 0.3 -0.5 c -1.1 -0.2 -2.3 -0.6 -3.1 -0.9 c -1 -0.3 -3.4 -1.4 -4 -1.4 c -0.9 0.1 -1.4 0.4 -2.2 0.6 c -1 0.4 -1.6 1.2 -1.9 1.3 c -0.5 0.1 -1.2 1.5 -1.4 1.8 c -0.4 0.3 -1.4 1.2 -1.5 1.4 c -0.1 0.2 -0.2 0.3 -0.4 0.4 c -0.4 0.2 -1.3 1.3 -1.4 1.7 c -0.1 0.5 -0.3 0.7 -0.5 0.8 c -0.3 0.2 -0.5 0.1 -0.7 0.5 c -0.1 0.3 -0.5 1.2 -1.1 1.4 c -0.5 0.1 -0.4 -0.3 -0.4 -0.6 c 0 -0.4 0.2 -1 0.5 -1 c 0.3 -0.1 0.5 0 0.6 -0.2 c 0.2 -0.2 0.1 -0.4 0.3 -0.6 c 0.2 -0.2 0.8 -0.5 0.9 -0.9 c 0.2 -0.4 0.8 -1.4 0.8 -1.8 c 0.1 -0.4 0.9 -1.2 1.2 -1.6 c -0.7 0.5 -2.4 1.5 -2.7 1.7 c -0.3 0.3 -0.7 1.1 -0.9 1.2 c -0.3 0.2 -0.7 0.4 -1 0.5 c -0.3 0.1 -0.6 0.2 -1 0.4 c -0.5 0.1 -0.7 0.1 -0.8 0.1 c -0.2 -0.1 -0.1 -1.1 0.5 -1.4 c 0.5 0 0.7 0.2 1 0.1 c 0.3 -0.1 0.2 -0.4 0.4 -0.5 c 0.2 -0.1 0.8 -0.2 0.9 -0.4 c 0.2 -0.2 1.4 -1.4 1.6 -1.7 c 0.3 -0.4 0.7 -1.2 0.9 -1.4 c 0.3 -0.2 0.9 -0.3 1.3 -0.5 c 0.4 -0.2 0.9 -0.6 1.2 -1.1 c -0.2 -0.9 0 -2.2 -0.1 -2.8 c 0 -0.5 0.2 -1 0.4 -1.4 c 0 -0.1 0 -0.1 -0.1 -0.1 c -0.4 -0.1 -0.9 0.4 -1.2 0.5 c -1.1 0.3 -0.9 0.2 -0.6 0 c -1.3 0.2 -1.8 0.6 -1.8 0.6 c 0.1 -0.1 0.2 -0.2 0.3 -0.3 c -0.2 0 -0.6 0.4 -0.9 0.5 c -0.6 0.1 -0.8 0.1 -0.9 0.2 c -0.1 0 -0.2 0 -0.2 0 c 0 0 0.2 -0.1 0.2 -0.1 c 0.1 0 0.3 -0.1 0.4 -0.2 c 0.1 -0.1 0.1 -0.1 0.1 -0.1 c -0.1 -0.1 -0.3 0 -0.4 0 c -0.2 0 -0.4 0.2 -0.5 0.2 c -1.1 0.2 -1.6 0.3 -1.6 0.3 c 0.6 -0.3 1 -0.3 1.1 -0.4 c -2 0.1 -2.2 0.2 -2.5 0.3 c 0 -0.1 0.6 -0.4 1.3 -0.5 c -0.2 -0.1 -1.6 -0.1 -1.8 0 c 0.1 -0.1 0.1 -0.1 0.4 -0.2 c 1.6 -0.3 1.8 -0.4 1.9 -0.4 c 0 0 -0.1 0 -0.1 0 l -0.5 0 c -0.4 0 -0.7 -0.2 -1.1 -0.2 c -0.8 0 0.2 -0.1 0.2 -0.1 c 0.1 0 0.1 0 0.3 -0.1 c -0.2 -0.1 -0.7 -0.1 -0.9 0 c -0.2 0.1 -0.3 0.2 -0.4 0.2 c 0.2 -0.3 0.5 -0.4 0.7 -0.4 c 0.5 0 1.3 -0.1 1.7 -0.1 c 0.6 0.1 0.7 0 0.7 0 c 0 0 0.4 -0.1 0.5 -0.1 c 0.5 0 1.2 0.3 1.7 0.2 c 0.3 0 0.5 0 0.7 -0.1 c -0.2 -0.1 -0.3 -0.1 -0.3 -0.2 c 0.1 0 0.5 0.1 0.6 0.1 c 0.8 0 1.1 0 1.4 -0.1 c 2.1 -0.2 2.2 -0.2 2.3 -0.3 c 0.5 -0.3 2.6 -0.7 3.6 -0.8 c 1.1 0 2.7 0.5 3.2 0.5 c 0.5 0 1.9 0.6 3.1 0.4 z z" fill="tan" /><path id="jockey" d="M 10 0 c -1.1 -0.4 -1.5 -0.5 -2.3 -1 c -0.9 -0.5 -1.4 -1.3 -1.4 -1.7 c 0 -0.4 0.3 -1 1.3 -1.4 c 3 -1 3.8 -1 4.2 -1 c 2.1 -0.1 1.7 0.1 2.1 -1 c 0.5 -0.6 1.2 -0.7 1.6 -0.5 c 0.5 0.2 1.1 0.8 0.9 1.2 c 0 0.1 -0.1 0.2 -0.1 0.2 c 0 0.1 0.1 0.1 0.1 0.2 c 0.1 0 0.3 0.2 0.1 0.2 c -0.1 0 -0.3 0 -0.4 -0.1 c -0.1 0.1 -0.3 0.3 -0.3 0.5 c -0.1 0.4 -0.4 0.5 -0.5 0.7 c -0.3 0.2 -0.5 0.1 -0.8 -0.1 c -0.3 -0.2 -0.5 -0.1 -0.5 0.5 c 0 0.5 -0.4 0.6 -0.5 1 c -0.1 0.4 -0.2 0.8 0.3 1 c 0.5 0.2 1.7 0.6 1.8 0.3 c 0.1 -0.3 0.9 -0.2 0.8 0.2 c -0.1 0.4 -0.4 0.7 -0.8 0.4 c -0.3 -0.1 -0.8 0.3 -2.3 0.1 c -0.4 -0.1 -0.5 -0.1 -0.7 -0.5 c -0.2 -0.4 -0.1 -0.8 -0.7 -0.8 c -0.2 0 -1.1 0.1 -1.4 0.1 c 0.3 0.4 1.1 0.8 1.2 1.2 c 0.1 0.2 0 0.4 -0.1 0.5 c -0.4 0.4 -1.6 1.5 -1.8 1.8 c 0.4 0.1 0.9 0.1 0.9 0.2 c 0.1 0.2 0.1 0.3 0 0.4 c -0.4 0.4 -2.1 0.1 -2 -0.3 c 0.1 -0.4 0.6 -1.2 1.3 -2.3 z" /></defs><!-- ground(can use the mud filter if you want)--><rect class="ground" x="-10" y="-10" width="100%" height="2000" fill="rgb(102,74,52)" /><g class="medals" transform="translate(100 0)"><!-- 1st --><g class="goldMedal" transform="scale(0.2 0.2) translate(0 -200)"><clipPath id="medalMask"><circle cx="50" cy="50" r="35" /></clipPath><circle clip-path="url(#medalMask)" cx="50" cy="50" r="35" fill="gold" filter="brightness(90%)" /><path clip-path="url(#medalMask)" d="M -10 90 L 0 100 L 100 0 L 90 -10" fill="#fff"><animate id="shine" attributeName="d" values="M -10 90 L 0 100 L 100 0 L 90 -10; M 50 150 L 60 160 L 160 60 L 150 50" dur="1s" begin="0s;shine.end+5s" fill="freeze" /></path><path clip-path="url(#medalMask)" d="M 0 0 V 100 L 100 0 Z" fill="gold" filter="brightness(120%)" /><circle cx="50" cy="50" r="30" fill="gold" /><text x="50" y="50" dominant-baseline="middle" text-anchor="middle" fill="gold" filter="brightness(80%)" font-family="Arial, Helvetica, sans-serif" font-size="25">1st</text><!-- shine --><path clip-path="url(#medalMask)" d="M 40 140 L 50 150 L 150 50 L 140 40" fill="#fff"><animate attributeName="d" values="M 40 140 L 50 150 L 150 50 L 140 40; M -60 40 L -50 50 L 50 -50 L 40 -60" dur="1s" begin="0.5s;shine.end+5.5s" fill="freeze" /></path><text x="50" y="50" dominant-baseline="middle" text-anchor="middle" fill="rgba(255, 230, 15,0.1)" font-family="Arial, Helvetica, sans-serif" font-size="25">1st</text></g><!-- 2nd --><g class="silverMedal" transform="scale(0.2 0.2) translate(1700 -200)"><circle clip-path="url(#medalMask)" cx="50" cy="50" r="35" fill="silver" filter="brightness(90%)" /><path clip-path="url(#medalMask)" d="M -10 90 L 0 100 L 100 0 L 90 -10" fill="#fff"><animate id="shine" attributeName="d" values="M -10 90 L 0 100 L 100 0 L 90 -10; M 50 150 L 60 160 L 160 60 L 150 50" dur="1s" begin="0s;shine.end+5s" fill="freeze" /></path><path clip-path="url(#medalMask)" d="M 0 0 V 100 L 100 0 Z" fill="silver" filter="brightness(120%)" /><circle cx="50" cy="50" r="30" fill="silver" /><text x="50" y="50" dominant-baseline="middle" text-anchor="middle" fill="silver" filter="brightness(80%)" font-family="Arial, Helvetica, sans-serif" font-size="25">2nd</text><!-- shine --><path clip-path="url(#medalMask)" d="M 40 140 L 50 150 L 150 50 L 140 40" fill="#fff"><animate attributeName="d" values="M 40 140 L 50 150 L 150 50 L 140 40; M -60 40 L -50 50 L 50 -50 L 40 -60" dur="1s" begin="0.5s;shine.end+5.5s" fill="freeze" /></path><text x="50" y="50" dominant-baseline="middle" text-anchor="middle" fill="#000" opacity="0.1" font-family="Arial, Helvetica, sans-serif" font-size="25">2nd</text></g><!-- 3rd --><g class="bronzeMedal" transform="scale(0.2 0.2) translate(1700 -200)"><circle clip-path="url(#medalMask)" cx="50" cy="50" r="35" fill="rgb(185, 107, 30)" filter="brightness(90%)" /><path clip-path="url(#medalMask)" d="M -10 90 L 0 100 L 100 0 L 90 -10" fill="#fff"><animate id="shine" attributeName="d" values="M -10 90 L 0 100 L 100 0 L 90 -10; M 50 150 L 60 160 L 160 60 L 150 50" dur="1s" begin="0s;shine.end+5s" fill="freeze" /></path><path clip-path="url(#medalMask)" d="M 0 0 V 100 L 100 0 Z" fill="rgb(185, 107, 30)" filter="brightness(120%)" /><circle cx="50" cy="50" r="30" fill="rgb(185, 107, 30)" /><text x="50" y="50" dominant-baseline="middle" text-anchor="middle" fill="rgb(185, 107, 30)" filter="brightness(80%)" font-family="Arial, Helvetica, sans-serif" font-size="25">3rd</text><!-- shine --><path clip-path="url(#medalMask)" d="M 40 140 L 50 150 L 150 50 L 140 40" fill="#fff"><animate attributeName="d" values="M 40 140 L 50 150 L 150 50 L 140 40; M -60 40 L -50 50 L 50 -50 L 40 -60" dur="1s" begin="0.5s;shine.end+5.5s" fill="freeze" /></path><text x="50" y="50" dominant-baseline="middle" text-anchor="middle" fill="#000" opacity="0.1" font-family="Arial, Helvetica, sans-serif" font-size="25">3rd</text></g></g><g class="finishLine"><path d="M420 -10v140" stroke="rgb(72,44,22)" stroke-width="12" /><path d="M420 0v120" stroke="#000" stroke-dasharray="5" stroke-width="10" /><path d="M420 0v120" stroke="#fff" stroke-dasharray="5" stroke-dashoffset="5" stroke-width="10" /></g><g id="playerArea"><!-- riders populate here --></g><g class="startingBlocks"><!-- building --><g class="startBuilding"><path d="M -10 -2 h 50 v 124 h-50" fill="url(#grad)" stroke="#000" stroke-width="0.5" /><path d="M -10 -2 l 25 22 v 80 l-25 22 M 40 -2 l-25 22v 80 l25 22" fill="none" stroke="rgba(0,0,0,0.3)" stroke-width="0.5" /></g><!-- gates --><g id="gates"><!-- opening gates populate here --></g></g></svg>
    <button
        class="restart" onclick="go()" title="Start the Race!">🏁</button>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/knobs.1.3.6.js"></script>
        <script >
     // add any number of riders you want!
let ridersStore = [
	{name: 'Bungus', color: 'brown', number: 1},
	{name: 'Chungus', color: 'red', number: 2},
	{name: 'Amungus', color: 'lime', number: 3},
	{name: 'Flungus', color: 'purple', number: 4},
	{name: 'Chippewa', color: 'orange', number: 5},
	{name: 'Fleen', color: 'yellow', number: 6},
	{name: 'Awooga', color: 'gray', number: 7},
	{name: 'Lasty', color: 'beige', number: 0},
	{name: 'Carumba', color: 'goldenrod', number: 8},
	{name: 'Horse', color: 'lightblue', number: 9},
	{name: 'Horse 2 (the Sequel)', color: 'lightgreen', number: 10},
	{name: 'Mr. Ed', color: 'steelblue', number: 11},
	{name: 'Mrs. Fred', color: 'coral', number: 12},
	{name: 'Fasty', color: 'black', number: 13},
	{name: 'Broke-leg Bucky', color: 'green', number: 14},
	{name: 'Lump', color: 'darkorchid', number: 15},
	{name: `Lump's friend`, color: 'darksalmon', number: 16},
	{name: 'Stinks', color: 'khaki', number: 17},
	{name: 'Jacobim', color: 'lavender', number: 18},
	{name: 'Megan Thee Horse', color: 'hotpink', number: 19},
	{name: 'Skidaddle', color: 'lightskyblue', number: 20}
];
let numRiders = 13;
let winnerOffset = 0;
let finishOrder = [];
let maxRaceTime = 7000;
let maxRaceDiff = 2000;
let raceLength = 500;

const randInt = (min, max) => {
	return Math.floor(Math.random() * (max - min + 1)) + min;
};

function go() {
	let riders = ridersStore.slice(0, numRiders);
	let course = document.querySelector('#racecourse');
	let startBuilding = document.querySelectorAll('.startBuilding > path');
	let finishLinePaths = document.querySelectorAll('.finishLine > path');
	let finishLine = raceLength - 100;
	let buildingH = (riders.length * 20) + 4;
	document.querySelector('.ground').setAttribute('width', raceLength);
	document.querySelector('.goldMedal').setAttribute('transform', `scale(0.2 0.2) translate(${1170 + raceLength} -200)`);
					document.querySelector('.silverMedal').setAttribute('transform', `scale(0.2 0.2) translate(${1170 + raceLength} -200)`);
					document.querySelector('.bronzeMedal').setAttribute('transform', `scale(0.2 0.2) translate(${1170 + raceLength} -200)`);
	
	startBuilding[0].setAttribute('d', `M -10 -2 h 50 v ${buildingH} h-50`);
	startBuilding[1].setAttribute('d', `M -10 -2 l 25 ${buildingH/8} v ${buildingH - (buildingH/3)} l-25 ${buildingH/5} M 40 -2 l-25 ${buildingH/8}v ${buildingH - (buildingH/3)} l25 ${buildingH/5}`);
	course.setAttribute('viewBox', `-10 -10 ${raceLength} ${(riders.length * 20) + 20}`);
	finishLinePaths[0].setAttribute('d', `M${finishLine} -10v${(riders.length * 20) + 20}`);
	finishLinePaths[1].setAttribute('d', `M${finishLine} -2.5v${(riders.length * 20) + 5}`);
	finishLinePaths[2].setAttribute('d', `M${finishLine} -2.5v${(riders.length * 20) + 5}`);
	// reset stuff
	winnerOffset = 0;
	finishOrder = [];
	let g = document.querySelector("#playerArea");
	let gatesArea = document.querySelector("#gates");
	const winnersSVG = document.querySelector("#winnersSVG");
	// Remove existing racers
	while .........完整代码请登录后点击上方下载按钮下载查看