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小游戏时得心应手。