HTML練習之吃豆豆小遊戲

阿新 • • 發佈：2020-12-17

一、概述

閒來無聊，稍微學一點HTML的知識，動手寫一個吃豆豆的小遊戲，感覺蠻好玩的。這裡把程式碼放在這，以防以後用的上，可以參考。

二、程式碼

已經將重點部分註釋了，用的animation很有意思，方便，快捷。

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>吃豆豆</title>
		<style>
			.mouth{
				width: 
 200px;
				height: 200px;
				border-radius: 50%; /* 畫個圓 */
				animation: peas 1s linear infinite; /* 動畫播放 繫結keyframes: peas */
			}
			.mouthTop{ /* 上半個嘴巴*/
				width: 200px;
				height: 100px;
				background-color: pink;
				margin-left: 200px;
				margin-top: 100px;
				border-radius: 100px 100px 0 0;				
				animation 
: mouthTopK 1s linear infinite;
			}
			.mouthBottom{/* 下半個嘴巴*/
				width: 200px;
				height: 100px;
				background-color: pink;
				margin-left: 200px;
				margin-top: 0px;
				border-radius: 0 0 100px 100px;
				animation: mouthBottomK 1s linear infinite;				
			}
			@keyframes mouthTopK{ /* 上半個嘴巴關鍵幀 定義三個關鍵幀 */
				0% 
{
					transform: rotate(-30deg) ;
				}
				50%{
					transform: rotate(0deg) ;
				}
				100%{
					transform: rotate(-30deg) ;
				}
			}
			@keyframes mouthBottomK{
				0%{
					transform: rotate(30deg) ;
				}
				50%{
					transform: rotate(0deg) ;
				}
				100%{
					transform: rotate(30deg) ;
				}
			}
			@keyframes peas{ /* 定義豆豆的動畫關鍵幀 */
				0%{
					box-shadow: 
					300px 0 0 -80px red,
					450px 0 0 -80px red,
					600px 0 0 -80px red,
					750px 0 0 -80px red;
				}
				100%{
					box-shadow: 
					150px 0 0 -80px red,
					300px 0 0 -80px red,
					450px 0 0 -80px red,
					600px 0 0 -80px red;
				}
			}
		</style>
	</head>
	<body>
		<div class="mouth">
			<div class="mouthTop">
			</div>
			<div class="mouthBottom">
			</div>
		</div>
	</body>
</html>

三、效果

HTML練習之吃豆豆小遊戲

技術標籤：前端開發css3htmlanimationcss 一、概述閒來無聊，稍微學一點HTML的知識，動手寫一個吃豆豆的小遊戲，感覺蠻好玩的。這裡把程式碼放在這，以防以後用的上，可以參考。

python實現吃蘋果小遊戲

本文例項為大家分享了python實現吃蘋果小遊戲的具體程式碼，供大家參考，具體內容如下

Hi3861之俄羅斯方塊小遊戲（附原始碼）

目錄：一、原理二、顯示三、方塊移動四、按鍵的實現五、自然下降視訊相信不少人已經看過了！

java面向物件之人機猜拳小遊戲

人機猜拳小遊戲，只要用到的java面向物件的思維模式。本遊戲中有遊戲玩家和計算機兩個參與者。玩家和計算機都有的屬性是姓名和得分。共分為4個類。下圖是遊俠小程式控制臺截圖：

吃豆子小遊戲

最近做了一個小遊戲，有點瑕疵，希望大家能滿意。話不多說，直接上程式碼。

C++圖形介面之貪吃蛇小遊戲實驗報告

前言：工具：VS2017，需要下載圖形介面庫Easyx並將它安裝在vs的目錄下。附上鍊接：

Java開發學習之如何編寫小遊戲

教大家如何用JAVA寫一個簡單的桌球小遊戲，實現的效果是一個桌球能指定在球檯內滾動，實現效果如下：

Java入門案列之猜拳小遊戲

最近正在學習Java基礎知識，終於完成了第一個小demo，記錄下來，算是一個小總結與整理，也希望可以幫助到別人。

HTML+LayUI+WebApi 簡單個人小白demo教程 ----《.Net踩坑之路(二)》

題外話：接上篇吧。上篇主要是介紹下LayUI的使用，太興奮手打程式碼去了- -。

小遊戲之莫交叉

做這個小遊戲的靈感來源於...那時候在西永上班的幾個同事，一個設計健哥，一個後臺wei哥，另一個產品wei哥，再加上我這個前端，組成的一個開發小組，有一段時間我想自己寫一個網路上比較火的貪吃蛇遊戲耍，我就把想法

第九章 nginx基礎之搭建小遊戲

一、nginx部署 1.epel源安裝 [root@web01 ~]# yum install -y nginx 2.官方源安裝 1.配置官方源[root@web02 ~]# vim /etc/yum.repos.d/nginx.repo [nginx-stable]name=nginx stable repobaseurl=http://nginx.org/pa