今天我們來聊一聊關于javascript代碼游戲類的主題，我們都知道現(xiàn)在的游戲類應用越來越多，而javascript這種前端語言可以開發(fā)出很多有趣的游戲，在這里我們會講解一些簡單小游戲例子，希望對大家有所幫助。

首先，我們來介紹一個最基本的javascript游戲 - 打飛機，代碼如下：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;
var player = {
x: width / 2,
y: height - 10,
width: 20,
height: 20,
speed: 5,
velX: 0,
velY: 0,
color: '#bada55'
};
var keys = [];
window.addEventListener('keydown', function (e) {
keys[e.keyCode] = true;
});
window.addEventListener('keyup', function (e) {
keys[e.keyCode] = false;
});
function updatePlayer() {
if (keys[38]) {
if (player.velY > -player.speed) {
player.velY--;
}
}
if (keys[40]) {
if (player.velY < player.speed) {
player.velY++;
}
}
if (keys[39]) {
if (player.velX < player.speed) {
player.velX++;
}
}
if (keys[37]) {
if (player.velX > -player.speed) {
player.velX--;
}
}
player.velX *= 0.98;
player.velY *= 0.98;
player.x += player.velX;
player.y += player.velY;
if (player.x < 0) {
player.x = 0;
player.velX = 0;
}
if (player.x + player.width > width) {
player.x = width - player.width;
player.velX = 0;
}
if (player.y < 0) {
player.y = 0;
player.velY = 0;
}
if (player.y + player.height > height) {
player.y = height - player.height;
player.velY = 0;
}
}
function drawPlayer() {
ctx.fillStyle = player.color;
ctx.fillRect(player.x, player.y, player.width, player.height);
}
function gameLoop() {
ctx.clearRect(0, 0, width, height);
updatePlayer();
drawPlayer();
requestAnimationFrame(gameLoop);
}
gameLoop();

上面的代碼實現(xiàn)的是一個簡單的打飛機小游戲，玩家可以用鍵盤控制飛機的移動并發(fā)射子彈，而頁面會不斷地刷新使游戲畫面得以更新，這就是一個經(jīng)典的javascript游戲?qū)崿F(xiàn)方式。

接下來我們再來看一個更加有趣的javascript游戲 - 找小恐龍，代碼如下：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;
var speed = 5;
var score = 0;
var bestScore = localStorage.getItem('dinoBestScore');
if (!bestScore) {
bestScore = 0;
}
var img = new Image();
img.src = 'dino.png';
var dino = {
x: 50,
y: height - 85,
width: 50,
height: 50,
jumping: false,
jumpSpeed: 18,
speed: 5,
velY: 0
};
var obstacles = [];
setInterval(function () {
var size = Math.random() * 50 + 20;
var type = Math.floor(Math.random() * 3);
var obstacle = {
x: width,
y: height - size,
width: size,
height: size,
type: type
};
obstacles.push(obstacle);
}, 2000);
window.addEventListener('keydown', function (e) {
if (e.keyCode === 32 && !dino.jumping) {
dino.velY = -dino.jumpSpeed;
dino.jumping = true;
}
});
function updateDino() {
dino.y += dino.velY;
if (dino.y + dino.height > height) {
dino.jumping = false;
dino.y = height - dino.height;
dino.velY = 0;
}
if (dino.jumping) {
dino.velY += 1.5;
}
if (keys[39]) {
dino.x += dino.speed;
}
if (keys[37]) {
dino.x -= dino.speed;
}
}
function drawDino() {
ctx.drawImage(img, dino.x, dino.y, dino.width, dino.height);
}
function updateObstacles() {
for (var i = 0; i < obstacles.length; i++) {
var obstacle = obstacles[i];
obstacle.x -= speed;
if (obstacle.x + obstacle.width < 0) {
obstacles.splice(i, 1);
i--;
score++;
}
if (dino.x < obstacle.x + obstacle.width && dino.x + dino.width > obstacle.x && dino.y < obstacle.y + obstacle.height && dino.y + dino.height > obstacle.y) {
obstacles = [];
if (score > bestScore) {
bestScore = score;
localStorage.setItem('dinoBestScore', bestScore);
}
score = 0;
}
}
}
function drawObstacles() {
for (var i = 0; i < obstacles.length; i++) {
var obstacle = obstacles[i];
var color;
if (obstacle.type === 0) {
color = '#ee4035';
} else if (obstacle.type === 1) {
color = '#0492c2';
} else {
color = '#f89e12';
}
ctx.fillStyle = color;
ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
}
}
function drawScore() {
ctx.fillStyle = '#000';
ctx.font = '24px Arial';
ctx.fillText('Score: ' + score, 10, 30);
ctx.fillText('Best Score: ' + bestScore, 10, 60);
}
function gameLoop() {
ctx.clearRect(0, 0, width, height);
updateDino();
updateObstacles();
drawDino();
drawObstacles();
drawScore();
requestAnimationFrame(gameLoop);
}
gameLoop();

這個小游戲中，玩家需要控制小恐龍避開飛來的障礙物，并在成功闖過之后得分，這個游戲除了有高清的畫面效果之外，還加入了計分系統(tǒng)和最高分紀錄功能，可以真正的讓玩家享受游戲的樂趣。

以上就是兩個比較經(jīng)典和基礎的javascript小游戲案例，希望對想要進入javascript游戲開發(fā)的同學們有所幫助，大家可以根據(jù)這些例子的基礎上，創(chuàng)造出更符合自己需求的游戲，祝愿大家在javascript游戲開發(fā)的路上越走越順！