1_01李婉玲_JavaScript浏览器编程_1109
Day07作业
作业01 JavaScript小游戏代码
- 基于平时积累和查找资料对JavaScript掷骰子计分游戏源代码的初步理解
开始界面
运行界面
文件目录结构
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1200, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>猪骰子Pig Dice Gametitle>
<link rel="stylesheet" type="text/css" href="css/style.css">
head>
<body>
<div class="wrapper clearfix">
<div class="player-0-panel active">
<div class="player-name" id="name-0">玩家 1div>
<div class="player-score" id="score-0">43div>
<div class="player-current-box">
<div class="player-current-label">当前得分div>
<div class="player-current-score" id="current-0">11div>
div>
div>
<div class="player-1-panel">
<div class="player-name" id="name-1">玩家 2div>
<div class="player-score" id="score-1">72div>
<div class="player-current-box">
<div class="player-current-label">当前得分div>
<div class="player-current-score" id="current-1">0div>
div>
div>
<button class="btn-new"><i class="ion-ios-plus-outline">i>新游戏button>
<button class="btn-roll"><i class="ion-ios-loop">i>掷骰子button>
<button class="btn-hold"><i class="ion-ios-download-outline">i>Holdbutton>
<input type="text" placeholder="最终得分" class="final-score">
<img src="images/dice-5.png" alt="Dice" class="dice" id="dice-1">
<img src="images/dice-5.png" alt="Dice" class="dice" id="dice-2">
div>
<script src="js/app.js">script>
body>
html>
CSS
/**********************************************
*** GENERAL
**********************************************/
/* 最终得分 */
.final-score {
position: absolute;
left: 50%;
/* translateX(n):元素X轴（水平方向）移动。 */
transform: translateX(-50%);
top: 520px;
color: #555;
font-size: 18px;
font-family: 'Lato';
text-align: center;
/* padding:内边距。 */
padding: 10px;
width: 160px;
/* text-transform:属性控制文本的大小写。uppercase:所有文字大写显示； */
text-transform: uppercase;
}
/* outline(轮廓)是绘制于元素周围的一条线，位于边框边缘的外围。 */
.final-score:focus {
outline: none; }
#dice-1 {
top: 120px; }
#dice-2 {
top: 250px; }
* {
/* margin:外边距。 */
margin: 0;
padding: 0;
/* box-sizing:指定两个boxes接壤。border-box指定宽度和高度（最小/最大属性）确定元素边框。 */
box-sizing: border-box;
}
.clearfix::after {
/* :after 伪元素在元素之后添加内容，这个伪元素允许在元素内容的最后面插入生成内容。 */
content: "";
/* diaplay用于定义建立布局时元素生成的显示框类型，此元素会作为块级表格来显示（类似 ），表格前后带有换行符。 */
display: table;
/* clear属性规定元素的左右两侧均不允许浮动元素。 */
clear: both;
}
body {
/* linear-gradient()函数用于创建一个表示两种或多种颜色线性渐变的图片。 */
background-image: linear-gradient(rgba(62, 20, 20, 0.4), rgba(62, 20, 20, 0.4)), url(../images/back.jpg);
background-size: cover;
background-position: center;
font-family: Lato;
font-weight: 300;
position: relative;
height: 100vh;
color: #555;
}
.wrapper {
width: 1000px;
position: absolute;
top: 50%;
你可能感兴趣的:(javascript,js,css,html)