HTML5是一種用于網(wǎng)頁設(shè)計的語言，可以創(chuàng)造各種有趣的小游戲。這里我們將分享一個簡單的HTML5小游戲源代碼。
<!DOCTYPE html>
<html>
<head>
<title>小游戲</title>
<style>
#game-board {
width: 300px;
height: 300px;
background-color: lightblue;
}
#game-piece {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -25px;
}
</style>
</head>
<body>
<div id="game-board">
<div id="game-piece"></div>
</div>
<script>
var piece = document.querySelector('#game-piece');
var board = document.querySelector('#game-board');
function movePiece(event) {
var x = event.clientX;
var y = event.clientY;
piece.style.left = x - 25 + 'px';
piece.style.top = y - 25 + 'px';
}
board.addEventListener('mousemove', movePiece);
</script>
</body>
</html>這個小游戲很簡單，讓用戶通過鼠標(biāo)控制紅色方塊在藍(lán)色區(qū)域內(nèi)移動。代碼分為三部分：
- HTML頭部：聲明文檔類型以及HTML頁面基本結(jié)構(gòu)。
- CSS樣式表：定義藍(lán)色區(qū)域以及紅色方塊的樣式。
- JavaScript腳本：實現(xiàn)鼠標(biāo)控制紅色方塊在藍(lán)色區(qū)域內(nèi)移動的功能。
使用HTML5創(chuàng)建小游戲非常有趣，通過學(xué)習(xí)HTML5，你可以創(chuàng)造自己的小游戲。