学习JavaScript，轻松制作小游戏！ |21xrx.com

学习JavaScript，轻松制作小游戏！

2023-06-11 04:52:59 深夜i 25 0

JavaScript 小游戏制作代码

JavaScript是最受欢迎的高级Web前端编程语言之一。它可以让你轻松编写交互式和动态的网页内容，甚至可以创建自己的小游戏！在这篇文章中，我们将介绍如何使用JavaScript编写简单的小游戏。下面是一些基本的JavaScript小游戏代码：

1. 点击游戏

这个游戏的目的是在规定时间内点击屏幕上出现的形状。首先，需要在HTML中创建一个canvas元素。然后，在JavaScript中使用canvas API绘制一些形状，通过添加事件监听器来检测用户点击，以及用计时器来检测时间。以下是代码示例：

script
var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");
var shapeX, shapeY, shapeR, time, score, timer;
function init() {
 shapeX = Math.floor(Math.random() * canvas.width);
 shapeY = Math.floor(Math.random() * canvas.height);
 shapeR = Math.floor(Math.random() * 50 + 10);
 time = 10;
 score = 0;
 clearTimeout(timer);
 timer = setTimeout(gameOver, 10000);
 canvas.addEventListener("click", handleClick);
 drawShape();
}
function drawShape() {
 ctx.clearRect(0, 0, canvas.width, canvas.height);
 ctx.beginPath();
 ctx.arc(shapeX, shapeY, shapeR, 0, 2 * Math.PI);
 ctx.fillStyle = "red";
 ctx.fill();
}
function handleClick(event) {
 var x = event.clientX - canvas.offsetLeft;
 var y = event.clientY - canvas.offsetTop;
 if (Math.sqrt(Math.pow(x - shapeX, 2) + Math.pow(y - shapeY, 2)) <= shapeR) {
  score++;
  init();
 }
}
function gameOver() {
 canvas.removeEventListener("click", handleClick);
 alert("Game over! Your score: " + score);
}
init();

2. 小蛇游戏

这个游戏将涉及更复杂的游戏逻辑和控制。你需要使用键盘控制小蛇移动，以吃到食物并避开障碍物。以下是代码示例：

script
var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");
var snake, food, score, dir, gameover;
function init() {
 snake = [ y: 5];
 food = {x: Math.floor(Math.random() * canvas.width / 10), y: Math.floor(Math.random() * canvas.height / 10)};
 score = 0;
 dir = 0;
 gameover = false;
 canvas.addEventListener("keydown", handleKeydown);
 draw();
}
function draw() {
 ctx.clearRect(0, 0, canvas.width, canvas.height);
 ctx.fillStyle = "green";
 for (var i = 0; i < snake.length; i++) {
  ctx.fillRect(snake[i].x * 10, snake[i].y * 10, 10, 10);
 }
 ctx.fillStyle = "red";
 ctx.fillRect(food.x * 10, food.y * 10, 10, 10);
}
function handleKeydown(event) {
 if (event.keyCode == 37 && dir != 1) dir = 0; // left
 else if (event.keyCode == 38 && dir != 3) dir = 2; // up
 else if (event.keyCode == 39 && dir != 0) dir = 1; // right
 else if (event.keyCode == 40 && dir != 2) dir = 3; // down
}
function update() {
 if (gameover) return;
 var head = {x: snake[0].x, y: snake[0].y};
 if (dir == 0) head.x--;
 else if (dir == 1) head.x++;
 else if (dir == 2) head.y--;
 else if (dir == 3) head.y++;
 if (head.x < 0 || head.x >= canvas.width / 10 || head.y < 0 || head.y >= canvas.height / 10) gameover = true;
 for (var i = 0; i < snake.length; i++) {
  if (snake[i].x == head.x && snake[i].y == head.y) gameover = true;
 }
 if (head.x == food.x && head.y == food.y) {
  snake.unshift(head);
  food = {x: Math.floor(Math.random() * canvas.width / 10), y: Math.floor(Math.random() * canvas.height / 10)};
  score++;
 }
 else {
  snake.pop();
  snake.unshift(head);
 }
 draw();
 setTimeout(update, 200);
}
init();
update();

以上是两个简单的小游戏，你可以通过复制以上代码并自己修改和试验来进一步学习和探索JavaScript编程。祝你好运！

上一篇: idea打包java可执行jar包

下一篇: 作为一个正在学习Java的初学者

评论区

相似文章