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