HTML小游戲越來越受歡迎，無論是在學(xué)校、工作還是在家里，人們喜歡用游戲緩解壓力。如果你想學(xué)習(xí)編寫HTML小游戲的代碼，那么這篇文章就是為你準(zhǔn)備的。下面是一個HTML小游戲代碼大全，你可以復(fù)制這些代碼，將它們粘貼到你的HTML文檔中，并進(jìn)行修改，以創(chuàng)建你自己的游戲。
<!DOCTYPE html>
<html>
<head>
<title>我的游戲</title>
<style>
body {
background-color: #F0F0F0;
}
#game {
position: relative;
width: 500px;
height: 500px;
background-color: #FFFFFF;
margin: 0 auto;
}
#ball {
position: absolute;
top: 0px;
left: 0px;
width: 50px;
height: 50px;
background-color: #FF0000;
border-radius: 50%;
}
#paddle {
position: absolute;
bottom: 0px;
left: 200px;
width: 100px;
height: 10px;
background-color: #000000;
}
</style>
</head>
<body>
<div id="game">
<div id="ball"></div>
<div id="paddle"></div>
</div>
<script>
var ball = document.getElementById("ball");
var paddle = document.getElementById("paddle");
var x = 0;
var y = 0;
var dx = 1;
var dy = 1;
function moveBall() {
x += dx;
y += dy;
if(x < 0 || x >= 450) {
dx = -dx;
}
if(y < 0 || y >= 450) {
dy = -dy;
}
if(y + 50 >= 500) {
if(x + 50 >= parseInt(paddle.style.left) && x <= parseInt(paddle.style.left) + 100) {
dy = -dy;
}
else {
alert("游戲結(jié)束!");
document.location.reload();
}
}
ball.style.top = y + "px";
ball.style.left = x + "px";
}
document.addEventListener("keydown", function(event) {
if(event.keyCode == 37) {
paddle.style.left = parseInt(paddle.style.left) - 10 + "px";
}
if(event.keyCode == 39) {
paddle.style.left = parseInt(paddle.style.left) + 10 + "px";
}
});
setInterval(moveBall, 10);
</script>
</body>
</html>以上代碼是一個基本的打球游戲。你可以根據(jù)你的喜好來修改樣式，也可以添加其他游戲元素。這些代碼可以作為你編寫自己的HTML小游戲的參考。祝你好運！