HTML5是一種新的網頁標準,它能夠幫助我們創建各種互動性的小游戲。下面是一些你可以用HTML5創建的小游戲代碼:
// 創建一個簡單的打地鼠游戲 var score = 0; var holes = document.querySelectorAll('.hole'); var moles = document.querySelectorAll('.mole'); var lastHole; var timeUp = false; function randomTime(min, max) { return Math.round(Math.random() * (max - min) + min); } function randomHole(holes) { var idx = Math.floor(Math.random() * holes.length); var hole = holes[idx]; if (hole === lastHole) { return randomHole(holes); } lastHole = hole; return hole; } function peep() { var time = randomTime(200, 1000); var hole = randomHole(holes); hole.classList.add('up'); setTimeout(function() { hole.classList.remove('up'); if (!timeUp) { peep(); } }, time); } function startGame() { score = 0; timeUp = false; scoreBoard.textContent = 0; peep(); setTimeout(function() { timeUp = true; }, 10000); } function play() { moles.forEach(function(mole) { mole.addEventListener('click', function() { if (!mole.classList.contains('up')) { return; } score++; this.classList.remove('up'); scoreBoard.textContent = score; }); }); } play();
上面的代碼創建了一個簡單的打地鼠游戲。在這個游戲中,地鼠會隨機從洞里鉆出來,玩家需要點擊它們來得分。在游戲結束前盡可能多地打中地鼠。
// 創建一個讓球跳躍的游戲 var canvas = document.querySelector('canvas'); var ctx = canvas.getContext('2d'); var ball = { x: canvas.width / 2, y: canvas.height - 30, dx: 2, dy: -2, radius: 10, color: '#0095DD' }; function drawBall() { ctx.beginPath(); ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2); ctx.fillStyle = ball.color; ctx.fill(); ctx.closePath(); } function moveBall() { ball.x += ball.dx; ball.y += ball.dy; if (ball.x + ball.dx >canvas.width - ball.radius || ball.x + ball.dx< ball.radius) { ball.dx = -ball.dx; } if (ball.y + ball.dy< ball.radius) { ball.dy = -ball.dy; } else if (ball.y + ball.dy >canvas.height - ball.radius) { if (ball.x >paddleX && ball.x< paddleX + paddleWidth) { ball.dy = -ball.dy; } else { alert('GAME OVER'); document.location.reload(); } } } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawBall(); moveBall(); requestAnimationFrame(draw); } draw();
上面的代碼創建了一個簡單的讓球跳躍的游戲。在這個游戲中,玩家需要控制一個長條來讓球不停地跳躍,不斷擊打方塊并得到分數。如果球掉下去了,游戲就結束了。
HTML5能夠支持各種各樣的小游戲代碼。你只需要一些基本的HTML、CSS和JavaScript知識就可以開始創建你自己的小游戲了。