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%)" /><cir.........完整代码请登录后点击上方下载按钮下载查看