javascript代码游戏类

今天我们来聊一聊关于javascript代码游戏类的主题，我们都知道现在的游戏类应用越来越多，而javascript这种前端语言可以开发出很多有趣的游戏，在这里我们会讲解一些简单小游戏例子，希望对大家有所帮助。

首先，我们来介绍一个最基本的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();

上面的代码实现的是一个简单的打飞机小游戏，玩家可以用键盘控制飞机的移动并发射子弹，而页面会不断地刷新使游戏画面得以更新，这就是一个经典的javascript游戏实现方式。

接下来我们再来看一个更加有趣的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 = '/post/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();

这个小游戏中，玩家需要控制小恐龙避开飞来的障碍物，并在成功闯过之后得分，这个游戏除了有高清的画面效果之外，还加入了计分系统和最高分纪录功能，可以真正的让玩家享受游戏的乐趣。

以上就是两个比较经典和基础的javascript小游戏案例，希望对想要进入javascript游戏开发的同学们有所帮助，大家可以根据这些例子的基础上，创造出更符合自己需求的游戏，祝愿大家在javascript游戏开发的路上越走越顺！