html 小游戏

最新推荐文章于 2024-08-18 15:23:48 发布

"Dream"

最新推荐文章于 2024-08-18 15:23:48 发布

阅读量172

点赞数

文章标签： html css css3

本文链接：https://blog.csdn.net/Dreafdddhf/article/details/127997271

版权

<!DOCTYPE html>
<html>
<head></head>
<body>

<div id="board1" style="position: absolute; width:80px; height:10px; left:420px;
top:555px; background-color: cadetblue;"></div>
<div id="board2" style="position: absolute; width:80px; height:10px; left:520px;
top:555px; background-color: cadetblue;"></div>
<div id="board3" style="position: absolute; width:80px; height:10px; left:620px;
top:555px; background-color: cadetblue;"></div>
<div id="board4" style="position: absolute; width:80px; height:10px; left:720px;
top:555px; background-color: cadetblue;"></div>

<div id="ball" class="circle" style="width:20px;
height:20px; background-color:crimson; border-radius: 50%; position:absolute;
left:600px; top:100px"></div>

<div id="box" style="border: 5px solid #555555; width:400px; height:550px"></div>

<div id="score" style="width:200px; height:10px; position:absolute; left:900px;
font-family:'隶书'; font-size: 30px;">分数：0</div>

<div id="gg" style="width:200px; height:10px; position:absolute; left:550px; top:200px;
font-family:'隶书'; font-size: 30px; display: none;">游戏结束</div>
<script>
// 设置box的样式
var box = document.getElementById("box");
box.style.position = "absolute";
box.style.left = "400px";