HTML5是新一代的網(wǎng)頁(yè)標(biāo)準(zhǔn)，不僅擁有更加豐富的功能，還能夠制作出簡(jiǎn)單有趣的小游戲。
<html>
<head>
<title>小游戲</title>
<script>
function move() {
var div = document.getElementById("box");
var topVal = parseInt(div.style.top) || 0;
var leftVal = parseInt(div.style.left) || 0;
if (topVal < 200) {
div.style.top = (topVal + 10) + "px";
} else if (leftVal < 200) {
div.style.left = (leftVal + 10) + "px";
} else {
div.style.top = "0px";
div.style.left = "0px";
}
}
</script>
<style>
#box {
position: absolute;
top: 0px;
left: 0px;
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div id="box" onclick="move()"></div>
</body>
</html>上面的代碼是一個(gè)簡(jiǎn)單的小游戲，鼠標(biāo)點(diǎn)擊紅色方塊，方塊就開(kāi)始移動(dòng)，如果移動(dòng)到200px的高度，則向右移動(dòng)，到達(dá)200px的寬度后，又會(huì)回到原點(diǎn)。整個(gè)過(guò)程中，方塊的位置會(huì)不斷變化。