当先锋百科网

首页 1 2 3 4 5 6 7

HTML5小游戏是近年来非常火爆的一种游戏形式,它可以在不同的设备上玩耍,包括PC、手机、平板等。而要制作HTML5小游戏,就需要一些基本的代码知识。以下是一些HTML5小游戏代码大全,供大家参考。

//1. 计算器游戏
<html>
<head>
<title>计算器游戏</title>
</head>
<body>
<input type="text" id="num1">
+
<input type="text" id="num2">
=
<input type="text" id="result">
<button onclick="add()">计算</button>
<script>
function add() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
document.getElementById("result").value = num1 + num2;
}
</script>
</body>
</html>
//2. 打砖块游戏
<html>
<head>
<title>打砖块游戏</title>
<div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div>
<script> var ballX = 200; var ballY = 200; var ballSpeedX = 5; var ballSpeedY = 5; var paddleX = 150; var paddleY = 390; var paddleSpeed = 10; function init() { setInterval("moveBall()", 50); document.addEventListener("keydown", movePaddle, false); } function moveBall() { ballX += ballSpeedX; ballY += ballSpeedY; if (ballX <= 0 || ballX >= 380) { ballSpeedX *= -1; } if (ballY <= 0 || ballY >= 380) { ballSpeedY *= -1; } if (ballY >= paddleY-20 && ballX >= paddleX-20 && ballX <= paddleX+100) { ballSpeedY *= -1; } document.getElementById("ball").style.top = ballY + "px"; document.getElementById("ball").style.left = ballX + "px"; } function movePaddle(e) { if (e.keyCode == 37) { paddleX -= paddleSpeed; } if (e.keyCode == 39) { paddleX += paddleSpeed; } document.getElementById("paddle").style.left = paddleX + "px"; } </script>
</html>

以上这两个游戏都非常经典,能充分显示HTML5小游戏的魅力所在。希望这些代码能够启发你的编程灵感,让你在制作HTML5小游戏时得心应手。